React Native vs iOS and Android native development

Cross-platform application development is one of the biggest issues when it comes to the creation and support of mobile applications. The cost of development is investment along with a support of the product. If iOS and Android applications share the code the business can cut the costs significantly. That's why there are many cross-platform frameworks. One of them is React Native (RN) open-sourced and developed by Facebook. At the moment it is one of the most performant, stable and developed tool.

In some cases, React Native is a reasonable investment in a technology and a product basis. The further analysis will reveal the pros and cons of the framework.

Pros: Native and Cross-platform

The first advantage is the cross-platform approach out-of-the-box. "Write once, run everywhere" (on iOS and Android and possibly Web). The web developers can quickly learn the framework especially with the knowledge of JavaScript and React. The contribution to the mobile project can increase significantly.

One layout system for iOS and Android - JSX and Flexbox (link, link) let you develop a unified user interface for both platforms. It is much easy to read and maintain than native code. It supports styling straight-away and validates the JSX layout schema on the fly.

Pros: Quick prototyping and a velocity of development

You might be an iOS, Android dev or Web developer and know your platform and frameworks on the highest level. But this limits you only to the one platform.

The React Native provides one experience with the layout system and routing between screens or components. Doing the development in one unified layout system such as JSX increases velocity and add a coherent approach to support the app.

Any change developer makes rendered instantly with a help of Hot reloading (another link). In contrast with native development, you don't need to rebuild the project to see the changes to the styling or the business logic of the app. Though Android has Instant Run feature, it is limited to the one platform and should be maintained and setup but the React Native works just from the start.

Pros: React Native has high performance

Using RN allows you to create any kind of application with fully native experience. The cross-platform code is written on JavaScript or TypeScrint and platform specific parts can be done with Native Modules. A developer can call any iOS and Android API or create a custom UI with simple class creation.

Native Modules iOS, Native UI components iOS,

Native Modules Android, Native UI Components Android.

The React Native is a real native framework. It uses JavaScriptCore framework which is thread-safe and leverages the speed of execution by providing the multi-threaded environment. In contrast with WebView based frameworks such as Ionic or PhoneGap where all elements are rendered in the web view and blocking the main thread of the application.

And all developers know that nothing should block the main thread except UI rendering. The RN can provide the ideal rate of 60 FPM (frames per second). Which is unbeatable by WebView rendering.

The React Native internal architecture uses the JavaScriptCore and Native Modules. So the code written on JavaScript or TypeScript is translated to the native code with existing React Native components or Native Modules.

As JavaScriptCore can execute code on the background threads this gives a boost to the performance and the application is almost the same performant as the native one.

Pros/Cons: The learning curve is short and high in different cases.

I would say React is a quite easy-to-learn framework with JSX, Flexbox if you are familiar with React web development in contrary with iOS SDK and Android where there a lot of different implementation cases and layout systems on iOS (e.g. XIB, Storyboard, and coded UI).

On the other hand, a developer would need to know the iOS and Android basics like an Xcode project structure or Gradle and Groovy for Android. This skill will be useful from time to time to setup the project, and a web developer can get a side help from a mobile developer or learn it with tutorials.

Pros: the ease of development

Since we have one entry point to the iOS and Android project and JSX as the JavaScript syntax for UI layout it simplifies a developers job a lot. One tool for everything. And in some cases, the shared code can be more than 90 percent.

For example, the creation of the project is a quite simple process using NPM tooling. Assume that we want to create an app named ReactBasicApp.

First, install create-react-native-app tool:

sudo npm install -g create-react-native-app

Then create a project:

create-react-native-app ReactBasicApp
cd ReactBasicApp
npm start

These commands have created two applications iOS and Android and the React app itself.

The first running  application is basically in one file App.js:

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default class App extends React.Component {
  render() {
    return (
      	<View>
            <Text>
        	The react basic application
	        Hello, world!
            </Text>
        </View>
      
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

The styles are created with StyleSheet and the whole screen is rendered in the render function. It is a most simplistic variant of the app but it shows that concept can be perceived with one look at the code.

Pros: open-source by default

The RN is fully open-sourced and supports the MIT license (link). It is supported by Facebook and implies a lot of factors for further development. The community can pick up the development of the framework. Being open-source from the start is the main reason for the good adoption. I personally using mostly open-source tools and if there are a couple of products the open-source is better because of open code and possible support of projects.

Cons: too many configurations and dependencies

Adding a library to the React Native project can be painful because it requires the support of both iOS, Android and React Native projects. It is three projects to setup and maintain.

For example iOS, the app will support Cocoapods for dependency management. These commands will install a library NPM library, iOS, and Android library and link it to the project:
npm install
react-native link

Most of the libraries have cross-dependancy and sometimes a developer needs to fix build issues linking additional dependent frameworks or fixing headers path.

This is a trade-off of shipping the app into the many platforms and once you setup a project with libraries you have everything running.

Cons: too many tools.

The cross-platform imply using native frameworks. So you need to know basics of iOS and/or Android development along with tooling such as Xcode and/or Android Studio, the build process, Google Store and Apple App Store submission, the Cocoapods for iOS and Gradle for Android. Too many things you can say. Yes, you're right. Whether you acquire the knowledge in process of development or you are already a mobile developer.

Cons: Young community

Te Facebook confirms its commitment towards React Native (an article). The RN is the quite a new technology. It requires time to answer, resolve issues on Github, follow the roadmap.
Some code and integration with native API would need to be written from the scratch in contrast with native development where most of the components are already written.

The growing pains are natural and it is already addressed by the community.

Cons: unexpected issues

When using React Native a developer would integrate a numerous number of JavaScript and native libraries. Some libraries are well sustained and some are new, there even fraudulent software which is not audited yet.
So awareness is a key to user React Native libraries. A developer can check the source code and the dependencies it brings. This practice can be applied to any other software platforms.

Conclusion

The implication of using young technologies would need additional time debugging or research on Github or StackOverflow community but it comes with a growth and maturing of the tool.

The React Native is a robust framework to build cross-platform applications. It can reduce development time and people resources. Basically, one developer does 2 applications and this is a real investment because a development process and support are very consuming expenses of businesses.]]></content:encoded>