Today I would like to speak about using React Native in production. I started working closely with RN (React Native) about 3 months ago. Before I had a very bad experience with PhoneGap\Cordova because it lagged. Still I don’t believe that webview-based apps can deliver at least semi-smooth experience, and at the same time appear the RN technology. I will not go deeper into details, just let me explain how it works in general.

The main thing you should remember is that your RN app will try to render at 60FPS, so the animations will be smoother, the transitions – faster, and it might be less laggy. In background, RN runs at least 2 threads:

1. JS Thread – a thread where all your JS code executes
2. the main thread – a thread where UI Kit runs

Also, native modules of your app can have their own threads that usually are used for speeding up your application, if you are doing time consuming operations (for example, rendering maps). In RN, all your components (buttons, text, inputs, labels) are rendered as native elements on native “canvas”. I quoted “canvas” to clarify that no webview was used for rendering. So, all elements, actions, and everything that happens runs natively on the platform. How might that be achieved? While running the app, RN generates native widgets from a code written on JS. The code provided below is written on JSand will be processed by RN.s a result, you get a native button, which works as if you would write completely native app, and all this code runs in the main thread.

render() {
return(
<Button><Text>Hello World</Text></Button>
)
}

However, all actions and interactions will be processed by the JS Thread via RN bridge, which is responsible for delivering all actions to a JS code, and after the JS code is executed, the results will be passed back to the main thread to re-render an element or a component. Working in this way, you will not have your app frozen while, for example, sending a request to the server and waiting for a response. Your main thread still will be working as before, rendering your application, and be ready to re-render the elements according to the response from the server, or any other action that you’ve done in your JS code, and the result is sent back to the main thread.

The RN has a set of predefined components, like buttons, inputs, checkboxes, radiobuttons, etc. Also, there are lots of 3rd party components, starting from the AirMap by airbnb, and up to countless time pickers and other UI components. Some components include native modules, so probably, you will need to link them to the source code. The best thing about RN is a consistent API, so for iOS and Android, calling some RN function will return the same result. However, for the UI you should style it by yourself. Some components have basic styling according to the platform, but some components require additional styling, which looks the same as CSS, so adding some width to a button will look like

<Button style={{width: 10}}></Button>

Note that there are no units, so RN will use its own units according to device display dimensions, DPI. The main concept behind all styling is a usage of FlexBox. Also, you can try using the % of display width or height to build exactly what you want, and that is what I personally tried to do starting the RN app. Understanding FlexBox concepts will make your life easier, and make your layout looks the same on 3.5* iPhone and 8* Android displays.

Though, if you want, you can create different styles for different platforms, so you will not be limited to any UI kit.
So, is RN ready for not just another TODO example, but real apps? Yes, definitely! You can create a wide range of apps. With 3rd party components you will have an access to all aspects of your device: geolocation, push notifications, deep linking and other platform specific features. The only thing you should remember – the framework is relatively new, and even minor release can break something in your code, or change API in some built-in component. If you get stuck, there is a big community which answer your questions (99% of questions have already been answered).

So, if you need a mobile app looking the same and working the same way, why not to try to use RN?

Good Luck.