React Native In Production

Pre-History

The app is about a year old; we originally hacked it together with a web-native hybrid interface, and incrementally added native components over time. The web view code is written mainly with React and Flux, which was already a boon to our productivity and reduced bugs.

Hacking

Web development used to feel just as daunting under similar circumstances. Then React came out, I adopted it at Propeller, and the work didn’t feel so intractable. I learned the benefits of isolated components, explicit state, and unidirectional data-flow, but I wasn’t getting that out of UIKit or the iOS ecosystem. Out of options, I hacked together an integration of React Native into our app to see if it would do the job.

Benefits

This crazy thing worked, we got our features shipped, and I haven’t seen any React Native-specific crash reports in the wild. What happened next?

Sharing

I mentioned earlier that we already used web views in our app, powered by React. While we don’t have any “universal” components, we do have some tooling and utility methods used by both sets of JavaScript code bases. But this is also a double-edged sword: it’s not immediately obvious that the web view JavaScript exists in a separate world than the React Native JavaScript.

Testing

Automation and iOS have never played nicely: you traditionally need an OS X build node, which probably makes it a special snowflake in your build ecosystem. But since React Native code uses JavaScript, we don’t actually need to compile any Objective-C to execute portions of our code.

Team

Lessons

Not everything has been roses. Here are some mistakes that we (and by we, mostly I) made when first integrating React Native, and hopefully you can learn from them.

Navigation

Like many iOS engineers, I am cursed with enough experience with UIKit to do some really dumb things. One aspect of our app is a navigation bar with custom UINavigationBar hackery. It looks great — except neither Navigation nor NavigatorIOS supported our customizations.

Many Worlds

Introducing React Native increased the mental overhead of answering, “Wait, how does this app work?” There are now three distinct user-interface environments in our app: web views, React Native views, and UIKit views.

Pre-1.0

This might go without saying, but React Native hasn’t hit a stable release and its APIs are evolving. Our app had some not-so-trivial Objective-C glue to get React Native working with our existing code, which stone-walled our attempts to upgrade for awhile. It’s incredibly exciting to see the regular release cadence of React Native, and one day we’ll get caught up.

--

--

Engineering @Opendoor

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store