Notice:
This post is older than 5 years – the content might be outdated.
tl;dr it depends on your goals; react native can definitely be a tool to simplify your development for multiple platforms, or even just for one Platform if you don’t have too much knowledge of native development and your app is simple enough to work with only the APIs provided by React Native. There are also cases where you don’t need any native experience at all. But there are drawbacks.
What is React Native in comparison to web apps and native apps?
Basically React Native allows us to develop mobile apps with a native User Interface (UI) by using the web technologies React and JSX. But I will go into more detail in the following sections.
(Progressive) Web Apps
If you develop (progressive) web apps you work with web technology like HTML, JavaScript and CSS. In the case of React you might be using JSX as a combination of HTML and JavaScript or even something like CSS in JS. But fundamentally you use the same techniques like in developing for the web. With PWA you might be using some additional APIs, but it is still all web tech. Last but not least, there is also Cordova. Cordova is a native Container around a web app and provides a lot of native APIs normally not accessible by web apps.
Fully Native Development
For most apps you need to code everything twice if you want Android and iOS users to get the benefits of your app. You use Objective-C or Swift for iOS and Java or Kotlin* for Android—with the exception of some C/C++ libs or the like with Android NDK or Objective-C in iOS. But you will most definitely need custom code for each Platform when it comes to the UI. This also allows you to use all the native UI Components which render and animate more smoothly than web apps most of the time.
While you can also write multi platform code with Kotlin for your Android and iOS Apps, we think it’s not ready for production yet. But we’ll have an eye on it.
React Native
With react native you will get something in between. You can use the same techniques as with React in the web, you can use JSX, just replace <div></div> with <View></View> for example. Instead of CSS you can use the React Native Stylesheets which work similarly to CSS but different; for example there is no class hierarchy.
The main difference between a WebApp and React Native is the use of native UI components instead of HTML. React Native uses the same building blocks for the UI as any native code would. So you get the look, feel and performance (UI-wise) of a native app, because the UI is native.
All your business logic is written in JavaSript, however. This will not be compiled to native code, but it will run in the JS runtime of your device with a bridge to your native UI. This can be a drawback, if you rely on high performance multithreaded code, because the Javascript runtime is single-threaded. There are ways to use webworkers for real multithreading in React Native but I haven’t tried them yet. Another way would be to create native code for tasks requiring higher performance and threads. If you want to you can use C/C++ to share this code for Android and iOS, but then you’ll have to create a bridge to React Native.
Is it really native?
While we have native code for our platforms, not all views are really the views coming from the platform. For example a ReactTextView on Android is a android.widget.TextView with some custom code but other views like ReactImageView do not extend the platform views. This can be an issue because you have to wait for new features or bug fixes happening in the platform code.
Antoher example ist the missing ripple effect on React Native buttons which is default in the Android native AppCompatButton, although there is a workaround.
Maturity of React Native
Although React (Native) itself is well matured and established in the web development community and React Native will celebrate its 3rd birthday next month, it has still no version 1.0. The current version as of this writing is 0.53. Martin Konicek, a core contributor to React Native, stated that they may bump a version 1.0 when they have a stable standard lib for navigation, but this statement is one and a half years old.
Development progresses kind of fast with more than one new version every month on average and the changes aren’t always backwards compatible, so you need reserve some time for React Native updates, otherwise you’ll be left behind.
Performance
Since the UI is native, performance is comparable with native apps, but your business logic is running in a single threaded JavaScript environment. Also you can loose performance if there is a lot of communication between your UI and your business logic, because these messages always need to be translated between native code and the JavaScript realm. You can overcome these issues, if you’re willing and able to process hungry tasks natively.
Community
The core team of React Native isn’t really interested in fixing bugs that do not affect apps developed by Facebook. Still, they say that pull requests are welcome. And while the documentation gets better for every new release, it’s still missing examples and good descriptions for a lot of components, so you need to try stuff to figure out how they’re working.
One particular bug we stumbled over is „[WebView] onMessage failing when there are JS warnings and errors on the page„. We tried to send data from the JavaScript running in a WebPage in the WebView to the React Native part of the app and failed miserably. This bug has been open for almost one and half years. We solved this problem by using a wkwebview plugin for React Native. But this meant to have a dependency only for iOS and only because something doesn’t work as it was supposed to. To fix this issue you need to know Objective-C, so probably most React Native (JavaScript) developers don’t have the knowledge or experience to fix these kinds of issues. As a result you need to learn programming the native part or you have to wait until someone with native experience stumbles over the same issue and is willing to create a pull request for the issue.
If you search for plugins for React Native on npmjs.com you’ll find a ton of packages, but you need to be careful, because quite a lot of them are kind of old and no longer maintained. There are a lot of packages for the same problem, and it is not always easy to find the best package for your particular problem, like in the JavaScript world outside of React Native, too. Most of the time, you should try to fix smaller problems yourself instead of introducing a new dependency and hoping it will be still maintained in the future.
Conclusion
So who should use React Native and who shouldn’t? IMHO React Native can be a solution for everyone who wants to develop a not too complicated app for both platforms with a smaller budget and/or with a team that has a lot of web or React experience. You almost always need an experienced iOS developer or someone who is willing to learn how to create an App Store build with all the code signing stuff. Creating and publishing Android builds for the Play Store is a lot easier to learn compared to publishing an iOS application to Apple’s AppStore.
Because React Native is actively developed and changing quite a lot, you will need to make some time for React Native updates, so you won’t be left behind. If you want to create an app, and then pause developing it for some time, it can be a real pain to get back into development, because some things may not work as intended in newer versions of React Native, and plugins you might want to use might require newer versions of React Native. Native apps written in Objective-C or Java can pause for much longer and it’ll be less painful to restart development.
As I said in the introduction, it depends if React Native is more suited to you than native development. Maybe the following pros and cons can help you to make an informed decision:
Advantages of React Native
- JavaScript, because there are a lot of JavaScript developers
- React, as a widespread web framework
- one code base for both mobile platforms
- most of the times it’s easier to find web developers than native developers
- fast development with Hot-Reloading
- React is a well designed framework
- one team for both platforms
- synchronous development and releases for both platforms
Disadvantages of React Native
- JavaScript, IMHO there are a lot of nicer programming languages
- with 3 years, it is still a young framework compared to the native frameworks for both platforms, which had more time to mature
- high maintenance, because of the possibility of breaking changes in minor releases
- single threaded JavaScript Environment
- you may need to wait some time for the support for new features on the platforms (like support for the iPhone X notch)
- React Native Components do not always comply with the Human Interface Guidelines of Apple or Material Design Guidelines of Google
- for more complex UI components and performance it still requires native knowledge
