Generate and Share Excel Styled Spreadsheets Using React Native
Creating a React Native Expo app that generates and shares spreadsheets
Why use ExcelJS?
If you are reading this tutorial, maybe you have googled the phrase “generating excel react native”, and like me, found this StackOverflow question or this story. These resources summarize quite well how to generate an Excel file using SheetJS on your React Native app.
In my case however, I wanted to style some rows and add colors to cells to highlight values. While the pro version of SheetJS allows styling your spreadsheets, maybe you want a free alternative. This is possible with ExcelJS.
If you don’t need styling and are content with the basic features of SheetJS, I recommend you use it, since it seems to have good support and is easy to use. If you need to add style to your spreadsheets, follow along this tutorial.
Creating your project
If you already have a React Native project or are familiar with the creation of projects using Expo, you can skip this section and jump to the Excel generation.
I’ll assume you have Xcode and an iOS Simulator/Device if you are developing for iOS, or Android Studio and an Android Emulator/Device. These are needed if you want to run your app and view the changes. To run the app on your device you can install the Expo App on iOS or on Android. Running the app on your device is as easy as scanning a QR code.
If you never created a project with Expo, you can install the Expo CLI it on the Terminal using npm:
npm install — global expo-cliAfter installation, you can create a project using the Expo CLI:
expo init react-native-excel-styleYou can choose the Blank template. In my case I chose TypeScript.
Inside the generated project’s folder you can run it using:
npm startOn the terminal, you can run the project on an installed Android Emulator by pressing a or the iOS Simulator by pressing i. As mentioned before, you can also run it on your device by scanning the QR code. You should see a screen like this:
Now that we’ve got a running project, let’s start working on generating an Excel.
Setting up our App
First of all, let’s install the dependencies we will use for generating the Excel file and then share it on the next step. On the Terminal run:
npm install exceljs
expo install expo-file-system
expo install expo-sharingNow we can start writing the code. Start with changing the imports, and a StyleSheet to center the button we are going to create:
As for the App component, we added a button that doesn’t do anything for the meantime. Our simple app should look like this:
Generating a shareable Excel
Let’s create a function that generates an Excel with styling and returns the uri. This function will create a file with the name “YourFilename.xlsx”. To share a file, we can’t share it directly and need to store it on the device and get a local uri. Since we don’t need to store the file permanently, we can store it on the device’s cache, getting the cache path using the function FileSystem.cacheDirectory.
We added some information like the creator name, created and modified date. We then add a worksheet named “My Sheet”. On the created worksheet, we add the columns named “Id”, “Name”, “D.O.B”, each with different widths. On your app you can name the columns based on your data and add the rows with your data items.
After creating the columns, we proceed to add 2 rows with test values. Now for the interesting part that we can only do using ExcelJS, we add styling. On the first row, we change the font to Comic Sans. To further show some styling, we change the font on the second column to a green color. These stylings are just some examples that can be seen on ExcelJS’s GitHub page. Following these examples you can style your spreadsheet’s rows and cells according to your needs.
To finalize the file generation, we use the function writeBuffer, as we can’t use ExcelJS’s writeFile on React Native. We then convert this Buffer to a base64 string. We use this string to write to the local cache with the filename we chose before, then return the uri.
Sharing the file
If you needed to generate an Excel spreadsheet, probably your users want to share some data with customers, so let’s get to it. Fortunately, React Native’s Expo makes it easy. Let’s create a function that calls the generateShareableExcel function we just created:
After getting the uri, we call Expo’s shareAsync. We need to set the appropriate mimeType and UTI for an Excel file. When calling this function, the generated file can be shared on iOS and Android devices using the available apps, such as email, WhatsApp, and even AirDrop on iOS.
Testing our App
To test our functions, let’s change the Button on the App component that didn’t do anything to the following:
<Button title=’Generate Excel’ onPress={shareExcel} />If we run the App and press the Button, we should see the following:
As this video was recorded on an iOS Simulator, we don’t see many options. But on a device we should see the apps that we have installed and we can use for sharing, such as AirDrop, WhatsApp, and Gmail.
If we run the App on the Android Emulator, we can see options such as Gmail and Drive. Running it on an Android device should give you the apps you have installed.
If we send the generated file to our email and download it, we should see the following when opening it on Excel:
As we can see, the style we added is working. Now you can proceed to modify this code, generate your own spreadsheets with styling, and sharing them :)
Conclusion
If you want to take a look at the whole project, please check out the GitHub repo.
Thanks for reading!
