I just finished a one month React Native iOS project. The app was accepted into the app store yesterday – hooray! The app integrates Ustream live video with Firebase realtime chat and Braintree payments.
I chose React Native for a couple reasons.
1) The flex based layout system is a huge simplification (productivity and complexity) win over the native iOS contraint-based approach.
One of the first realizations I had was that I couldn’t actually re-use much of the code without changing it. There was copy and paste re-use, but our website didn’t have enough separation between component, model, and store. You obviously can’t re-use React component code designed for the web on the phone, but you can re-use the pattern, which counts for a lot.
The app got complex when I implemented deep linking from the web. The complexity came about when the UI state started to differ from the application (data) state. At that point, I had to implement “store” or “dispatcher” patterns. Data store classes load and cache data, and signal changes to the UI components via events (as opposed to the UI loading the data it needed when users tap).
Some other notes: The react-native-device-info project needs to be updated so that it doesn’t depend on the React Native cocoa pod. I added this library to get at my app version number, and to access a unique ID for the device. Device info should be supported by React Native itself. As it stands, it device info project compatible with the latest version of React Native (due to the cocoa pod issue).
I didn’t quite make the leap (or implement it myself), but a library that supports percentage-based styles will be useful. In practice, hard coded view sizes were sufficient to work on all the devices we wanted to support. react-native-extended-stylesheet is one package that I considered adding but didn’t.
The biggest snags I ran into were a babel conflict (conflicting .babelrc files) and verifying Google Analytics events (they were there, just very difficult to find until I created a separate property).
I’d like to spend another day building for Android. I’d like to learn Android deployment in order to be able to estimate the cost of Android projects.
Here are the packages I actually used for the project.
- babel-preset-react-native (for ES6)
- moment (date conversion)
- react-native-communications (for sending an email)
- react-native-linear-gradient (pretty backgrounds)
- react-native-orientation (for phone orientation changes)
- react-native-vector-icons (gives you access to 8 icon libraries)