Are you a React developer thinking about making the leap to React Native to build apps for iOS and Android? Read on to find out what I learned while writing and publishing my first React Native app, Fitness Routine Timer.
1. Basics
React Native isn’t all that different from React in many ways. The structure of the projects and the syntax for creating smart/dumb components should seem very familiar. You can still use Redux and most of your other favorite React libraries, with the important exception of those that generate visual components, which leads to my first point…
2. Can I use HTML?
No. If you try to put in HTML tags into your jsx, you’re going to have a bad time. For this reason, many open source React components that generate things like progress bars, charts, form elements, and the like won’t work in React Native. Thankfully, there’s usually a React Native version for many of those things if you look around.
On a more positive note, styling uses the same CSS properties and supports flex-box positioning, albeit an adapted version of it. Many of the CSS properties you were using before will still work.
3. Where’s the database?
Probably one of the easier ways of using React Native is to just make an HTTP request for data and configuration settings from another server. However, it might be handy to see some of that data without internet service, and further, maybe you don’t want or need some of that data sitting in a public server somewhere.
React Native’s AsyncStorage allows you to store data in the device in key value pairs. For simpler data storage this will work fine. But if you’re storing JSON and objects, you’ll have to use JSON.stringify and JSON.parse every time you read and write to the storage.
Since I was using Redux, I decided a simpler approach would be to use Redux-Persist, which syncs your redux store with the local storage of the device. You can even select which keys you want to store and programmatically decide when you want to purge the store altogether. Awesome.
Some people seem to really like React Native Realm. I attempted to use it, but to be honest some of its “features” made it really difficult to work with and even antithetical to basic React principles. Basically, you can query for an array of objects in Realm and store those in a variable. When you mutate that variable, you mutate the state in Realm! And this is achieved with a Proxy mediating all your requests to the store. What a hot mess. I’d like it much better if it got rid of those Proxys altogether. Perhaps folks might have better luck using it in an action creator within a React Redux context.
There are a hand full of other options, like react-native-simple-store, pouchdb-react-native, and others. If you’ve used these or any others, let me know in the comments about your experiences!
4. How does routing work?
This was one of my biggest questions when I first started. How does one move from screen to screen in the application?
React Native conceptualizes the different pages of your application as scenes, and a Navigator component acts as a switch to decide which component should be rendered given a specific scene name. Pretty similar to React Router.
More information can be found here.
5. How to handle Android back button?
By default, the Android back button will exit the app. Probably not the default behavior you want, unless your app is a single scene application.
It’s easy enough to solve, however. You just need to use the ReactNative BackHandler component to specify what you want to happen. When I was building my app, I had trouble getting that to work, so I had to use the deprecated but still working BackAndroid component instead.
6. How do I keep the screen from turning off?
The screen shutting off after some time of inactivity is actually a great feature most of the time. But for apps where the user is looking at the app but not necessarily interacting with it for an extended period of time, this is actually a really annoying bug. Thankfully, there’s a component for that as well, called react-native-keep-awake.
7. How do I add a cool splash screen when the app turns on?
So this is a bit more of a process. I ended up using react-native-splash-screen. The splash screen is actually an image and you have to generate several sizes for it. I used the online Image Gorilla tool to generate these assets.
8. How do I add an app icon?
For this I found a command line tool called ImageMagick to alter the files and generate the various app icons.
9. Semantic Versioning?
The Google Play Store only accepts integers for the official version. I used the recommendations in this blog post to generate the version with each release.
10. How do I get my app into the Google Play store?
These are the following steps for getting your app into the Google Play store:
- Register for a Google Play developer account and pay the $25 fee.
- Test your app and make sure it works properly in the Android emulator.
- Generate a signed APK with these steps. Note that you’re editing the GLOBAL gradle.properties file at ~/.gradle/gradle.properties, not the one located in your project folder. I made this mistake and wasted a few hours trying to figure out where I went wrong.
- Test the release version of your app with react-native run-android –variant=release. You might have to uninstall the previous app on the emulator to get this to work.
- Create a new app page in the Google Play Developer console. You will need screenshots of the app in various device sizes (if you have them), a high res version of the app icon, and a feature image. You will also need text for the app description.
- Upload your signed APK as a relevant new release type (production, beta, alpha).
- Create the release.
- To update your app, you will have to generate a new APK with a different version and create another release.