Practically, this means I can write “<ScrollView>…</ScrollView>” and be assured it will (to a surprising degree) work on both Android and iOS. To me, this means I can write an Android app and an iOS app at the same time, with no experience in either platform.
In addition to learning how the iOS simulator worked, I had to think about UI in a radically new way. In React, the component hierarchy is not just a proxy for the layout, it’s also the logical structure of the project. Unlike an HTML document with embedded code (like an ERB template in Ruby), data must flow in a more structured way so React knows when and how to re-render. For example, the first component I implemented was the partner image in the home screen.
Here’s the code to render the partner images:
And the code to render the whole summary screen:
Once the iOS version was working and submitted to the App Store for review, I began work on the Android version. Most of the components I had written still worked! There were a couple cases of components which had more general cousins that I had to replace (for instance, the <NavigatorIOS> component had to be switched out with the <Navigator> component). The relative immaturity of the Android implementation meant inconsistencies in styling and component APIs between platforms. But there were workarounds in both cases. For instance, the swiping carousel component I had used on iOS didn’t work on Android, so I replaced it with simple next and back buttons.
All said, porting to Android took 10 business days from first draft to app submission, and the code reuse between the two platforms was just about 90%.
Thanks for the help!
A shout-out to two organizations which made the app possible: Smooch and the React Native community.
Smooch is the chat solution we used for Office Hours V1, and when we started the React Native version of Office Hours, Smooch had no React Native library, but they were responsive to our needs and built a library with both Android and iOS bindings.
React Native is a young project — it was open-sourced 9 months ago — so there are rough edges, especially on Android. But the community, especially on Github, was indispensable to us. I can’t tell you how many times I discovered a bug only to realize it had been discovered by someone else 2 days ago and there was already a pull request to fix it. The community builds fast, communicates clearly and politely, and releases often.