Developing our React Native App for Android
Part 2 of a story in which React Native became the ideal solution to build our mobile app. Read part 1 — Building 3 React Native Apps in One Summer — for more insight on the initial experience building an iOS app with React Native.
⏰ The Time Has Come
In the first week of March we decided to start development on the Android version of our React Native app. By the first week in April, Squad for Android was live in the Google Play Store.
Luckily, React Native for Android was open-sourced more than 5 months prior. We had been solely focused on iOS development. Until now. We had no idea how long it would take or how much code we could reuse. We also had no idea how to develop an Android app…
Step 1: Inventory the Code
The first step was simple: follow the RN Android Setup guide. Which included getting up & running with Genymotion & Android Studio (more on these later).
Our app now had a working (“hello world”-type) `index.android.js` 🎉
Next Steps:
- Compile a list of all Native Modules to port to Java (aside: Learn Java).
- Wrap / Polyfill iOS-Specific JavaScript APIs (e.g. `PushNotificationIOS`).
- Upgrade React Native (Reorganize Image Assets).
- Check 3rd party packages for Android Support.
- Compile a list of bugs you find along the way.
By this point, we had a complete list of TODO tasks. Our version of React Native was terribly out of date so we even took care of some low-hanging fruit by this point: Updating deprecated APIs (Using `Alert` instead of `AlertIOS`; `AppState` over `AppStateIOS`; etc)
After 1/2 week we had: ✅ Code Inventory, ✅ Create TODOs. At this point we were able to guess (with high confidence) that the remaining project would take 3 weeks time. We split the timeline like so:
Week 1: Finish (most) Native Modules
Week 2: Fixing all the UX/Animation Stuff
Week 3: Testing & fixing bugs
Porting Native Modules to Java
Our app didn’t have an excessive amount of native modules. The majority of this work was actually fairly simple. You know the drill: search for “reverse geolocation android” and see where you get… I found a couple of resources that were helpful in crafting my own solution to translate position coordinates into a geographical location name.
And before you know … 💥 I’m a Java Developer!
Contact Importer? No problem. S3Uploader? Looks like someone wrote a cross-platform one 👍 Text Message? There’s a tutorial for that! And we implemented native Java modules for AppHub, Fabric, Parse, & Pusher.
Not everything went so smooth in native-land. We spent quite a bit of time working on our Image Manipulation module. This is responsible for adding layers to an image, flattening & compressing images among other things. It took an intimate knowledge of Java that we didn’t have the week prior. With a little research & fist shaking it all came together in the end, thanks to a quick learning developer (props to Dan Horrigan).
Replacing the “IOS” components
This turned out to be pretty straight-forward and fairly fun in the end. React Native has a couple options for platform-specific code. Here’s a quick example of how we created our own cross-platform `ActivityIndicator` component:
And here’s an `ActionSheet` component using `Alert` on Android.
80–20 Rule in Full Effect
The bulk of the work load took about 2 weeks. There were still a quite a bit of grit work left to be done. Meaning it took us another 2 weeks to get to a Release Candidate due to bugs, & those final things that always take forever.
Then after 4 relatively easy weeks of development efforts, we finally had a completed Android app!
Development Take-Aways
First off, revisit Part 1 to see why I love working with React Native so much. In short: the community & the ability to jump into native code are huge benefits.
Comparing IOS to Android (as a non-native dev)
Languages: I was much more comfortable programming Java code than Objective-C. I found it easier to read & write. This is perhaps because I’m used to PHP & JavaScript. Nonetheless, it was much easier to learn.
DX (Developer Experience): I found the experience “rough” for Android development. This is due to the simulator situation mainly. Perhaps I should try a stock emulator instead of Genymotion as I found it consistently crashing & I was unable to use gestures. On the plus side, it’s much easier to load the app directly onto a device and test that way. The iOS simulator (much like the iOS devices themselves) just felt like a more solid product to me. I always thought the Android user experience felt a bit generic to me — perhaps its the lack of scroll-bounce and other little things that make it feel more polished to me. Perhaps I’m just bias.
I do like the Android Manifest & the more comfort I gain in development the more I’m sure I’d appreciate things like Gradle. I think the Google Play Developer Console is better than iTunes Connect. I love that I don’t have to wait for App Store approval.
React Native iOS vs Android:
There were a few oddities aside from those laid out in the Known Issues:
- <Image/> children aren’t supported? I could never get the layout to appear correctly when an Image had children. I needed to use absolute positioning in every situation.
- I still have an issue with the release build process… Probably due to permissions issues on my computer… but I have no idea.
- TextInput & Touchable things seemed to need a greater `hitSlop` on Android.
- Some things just didn’t seem to have the same consequences on Android. A `ViewPager` with draggable children isn’t “scrollable” unless the children don’t exist… (see issue)
- Parity in the community isn’t always there. We use react-native-camera because it’s a fantastic component. Unfortunately video recording on Android isn’t yet available. Also unfortunate is that we’re currently unable to develop our own Video recording component. So our Android app currently is unable to record video.
- Nav Bar differences. Can’t seem to get the “center” component actually centered (on larger devices & tablets)… Perhaps the new Navigation works in React Native will be more beneficial to us in the future.
In conclusion: React Native is awesome. Just as before: be prepared to get native. And if you have an existing iOS app build with React Native, you can safely plan that with 2 quick-learning developers it’ll take about a month for the Android version.
