React Native: The good, the bad & the ugly

What is React Native?

React Native aims to combine the good parts of web and native apps. You get the speed of native apps and the ease of cross-platform development of web apps. To be a bit more technical, it uses a Javascript thread with React which communicates with a native UI thread. So all the UI components the user sees are actually fast native components. But the decision what components to show and all the application logic is in the Javascript thread. React is a widely established framework from Facebook for creating complex dynamic user interfaces. It was originally designed for the web but react native allows it to be used for mobile (and even desktop) apps as well. Below we’ll explain to you what good, bad and even ugly things we found while working with React Native.

The good

Speed of development

React Native makes it very easy to quickly build very complicated UI cross-platform. All the layouting is done with Facebook’s own implementation of Flexbox called Yoga. It really makes layouting a breeze.

Ability to share code cross-platform

React Native goal isn’t to have the exact same UI on Android and iOS. Each platform has its own design language and users expect to look things the way they’re used to. Still, most developers say that they’re able to share at least 75% of the code between the platforms.

Hot reloading

Because Javascript does not need to get compiled before deploying, new code can be pushed quickly to the development device. This makes especially creating UI much easier as style changes can be quickly seen and tested.

JS ecosystem

There are many tools for the JS ecosystem and you can use most of them. Yarn, Prettier, ESLint, Babel, Typescript, Jest, Redux are all tools that we successfully used together with React Native. React Native profits from this ecosystem of battle-proven tools.

Over the air updates

Because most of the app logic lies in the Javascript code, this code can now very easily be loaded from anywhere. This makes it very easy to load rarely used UI elements on the fly or even update the whole app without going through the app/play store. While this should be used wisely, it can be a very powerful tool.

The bad

Deeper native integration still requires native code

If you want to access more specific OS features, you’ll likely still need to write native code. Sometimes plugins are available, but the more specific your wish, the more likely it is that you need to write native code yourself. So suddenly instead of writing one language, you need to master 3. We had this problem while trying to access fitness data from Google Fit / Apple Health.

XCode / Android Studio

Both of them are a beast. They require many GBs of downloads and want to be kept up to date. Each has its own build system and configurations which are really difficult to understand in detail. This is often overwhelming for a web developer and needs a lot of time to get used to. Obscure compile errors were the norm for us at the beginning. The Expo framework tries to allow React Native development without having to deal with these systems. But it’s limited, if you want to integrate deeply with the OS, you can’t use it.

Developers often only test on the platform they’re more familiar with

Developers mostly have their favorite platform and silently decide to only test on it. Most of the time, things just work on the other platform, but sometimes they don’t. Most notable are shadows that work completely different on both platforms. Developers need to be made aware of this issue, leave their comfort zone and cross test.

The ugly

Upgrading

A blank React Native repo created with ‘react-native init’ contains lots of platform-specific code and configuration files. These files change with every new version of React Native. At the same time these files need to be modified by you as well to customize the app. So updating react native isn’t just updating the npm module, but also all configuration and code files. This can be very tricky, if you don’t know the platform by heart. Again, Expo makes this much easier by abstracting these things away from you, but also limiting your possibilities.

Debugging

Stack traces get interrupted on the bridge between JS and Native. JS calls that create exceptions in the native code are very hard to trace back to the original JS code.

Conclusion

React Native is a great framework for many use cases and should almost always be used over web app frameworks like Cordova. But the more deeply you want to integrate with the OS, the more the disadvantages overweigh. If you’re already on a native stack, integrating React Native might create more drawbacks than benefits. Airbnb explained this very well in their blog post series about their experience with React Native.