One of the most important advantage of React Native is that you can create a native app. You don’t have to know Objective-C, Swift, Java or Kotlin. You can develop an app for iOS, Android, Windows Phone and VR (VR headsets and helmets). React Native is a Facebook project. Such tech giants as Tesla, Samsung, Airbnb, Wix, etc. committed to developing React Native and IT-community around it. According to the Google Trends the popularity of a React Native framework is growing over the past 3 years. And this growth is impressive and it is not going to stop.
If you are going to understand the technical underpinnings of using React Native in a mobile environment you need to know more about React JS framework. The reason for the high performance of the React is the use of Virtual DOM. First, we’ll need to recall that the Document Object Model (DOM) is a cross-platform standard for documents access. With the help of DOM, we can interact with a browser. But the main problem of a DOM is that you can’t create a dynamic responsive user interface with it.
Virtual DOM is a copy of a DOM. We make changes only in a particular part of this copy. Virtual DOM is a representation of an ideal UI which can be reconciled with a real DOM.
Instead of using the browser’s DOM React Native renders iOS or Android components.
So the main trick of React Native is invoking the native rendering APIs. React Native apps make API requests which call native components by the means of an Objective-C or Java. React Native uses standard UI blocks, the same that usual iOS or Android apps do but without WebView/UIWebView.
If you need to create a mobile app it should be native. And if you need an app which is based on HTML, CSS, and JS then it is better to improve a mobile version of a web app.
One of the advantages of using React Native is the possibility to use Expo. This toolchain has lots of additional APIs on top of a React Native. Plus you can monitor the progress of your development process or test some new features through the Expo app. If you have a rather complicated and big project you need a full play. For a comprehensive project, it is better to initialize your mobile app by the means of React Native itself.
One of the big pluses of using React Native is that if you already have some experience in web-development it is very easy for you to learn React Native. And you can use your favorite tools such as NPM, CSS, ES6, ES7, Yarn, etc.
React Native has a smart system of error monitoring. It includes tracking an error, showing a message or attempting to recover. This mechanism is very effective for handling uncaught exceptions.
One the biggest advantages of the React Native is the community support. StackOverflow shows over 52 000 react-native related questions
and GitHub shows stable growth of open-source projects using RN.
There are a few React Native competitors out there on the market. Let’s briefly talk about 2 of them: Flutter and Ionic and compare them with React Native.
React Native VS. Flutter
Flutter is a Google’s attempt to create a cross-platform mobile framework. It allows developers to create mobile apps for both Android and iOS using Dart language.
In our opinion, Flutter is, well, not that good. At least for iOS development. In order to understand our point, we need to have a look at how React Native works at first.
Each mobile platform: both Android and iOS provides a set of APIs to communicate with native environment. It can be APIs for rendering native elements or for using native OS technologies (such as Bluetooth, GPS, etc.). And basically, React Native provides a user with a bridge that allows your JS code to call native function from the platform.
And when you’re creating a button by calling some abstract function createButton (well, it’s dome by React DOM under the hood, but anyway), React Native transfer this instruction over the bridge to the native platform and calls Android’s Java function for creating a buttons and iOS Objective-C function that creates the native iOS button. This principle allows React Native apps to look and behave just as Native apps.
And let’s get back to Flutter now. Flutter works more like a game engine. And here comes the first Flutter’s disadvantage. When you’re calling createButton function in your Dart code, Flutter’s engine is responsible for drawing this button. And inside the standard library, Flutter tries to mimic the behaviour of the native button. It’s implemented quite well on Android, but on iOS it looks far away from native. And firstly, iit gives your users poor experience and secondly, when new UI element or APIs are released, you have to wait for Google to update the implementation of native adapter before using it.
React Native VS. Ionic
The most important disadvantage of Ionic apps is that they are slow and looks non-native at all. And the reason for this is that Ionic is just a Webview wrapper over the web components written with CSS and JS, which makes your app depend on WebView that’s slow. Also, it makes you responsible for making your app look and behave natively, which can be pretty complicated.
The Future of a React Native
And React Native is changing! React Native has its own issues for sure, and as more and more companies and teams are moving into the RN development, these issues are become much more visible and there is much more tension to resolve them. And Facebook team is rebuilding React Native in order to resolve much of the framework’s pains.
The best way to understand the new architecture is to check this beautiful overview from one of RN contributors: http://blog.nparashuram.com/2019/01/react-natives-new-architecture-glossary.html
