NativeScript or React Native - Help me decide

By Lee Sylvester

NativeScript and React Native are two very popular platforms for creating native mobile applications, for iOS and Android, using the powerful and ubiquitous JavaScript language. Beyond this, the power of these two platforms stem from their leverage of the leading JavaScript development frameworks; NativeScript utilises AngularJS and React Native is based on ReactJS.

Native API Support

One of the important benefits of using either platform is its exposure of the underlying native API. Having this ability increases the capabilities of the applications you write and will provide much greater power than simple web-apps displayed in an HTML view component.

NativeScript provides direct access to the native layer. By marshalling calls to and from your JavaScript. With NativeScript, there is no need to learn Objective-C or Java as your code is translated to and from the native layer, or third-party libraries, at runtime. One downside, however, is that the target platforms require distinct JavaScript API calls, as the API’s mimic the native counterparts. The following are examples of creating a button on both platforms

var button = new android.widget.Button(this);
button.setText("Hello World");

Creating a button on Android in NativeScript

var button = new UIButton();
button.setTitleForState('Hello World', UIControlStateNormal);

• Creating a button on iOS in NativeScript*

Typically, React Native requires more involvement with native code than NativeScript. There are numerous modules available that perform native tasks which can make development easier, but any native interaction will require the development of a bridge in order for React Native to interact with native code.

UI Styling

Both NativeScript and React Native work with real, native UI controls. No “Web View” is used in either platform, which ensures your user interface is fast and will typically look and operate the same as applications written in native code. Creating your UI with NativeScript requires either building out your views and controls with API calls or by using the NativeScript UI XML schema, which is an XML based domain language specific to NativeScript.

import { Component } from "@angular/core";

@Component({
   selector: "my-app",
   template: "<Label text='hello world'></Label>"
})
export class AppComponent {}

NativeScript “Hello, World!” example

Since React Native is based on it’s web based cousin ReactJS, UI development in React Native is typically created using JSX, which looks and behaves much like browser based HTML. This means creating a UI in React Native provides a lower level of entry for web developers.

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

export default class HelloWorldApp extends Component {
  render() {
    return (
      <View>
        <Text>Hello world!</Text>
      </View>
    );
  }
}

React Native “Hello, World!” example

Applying styles in both NativeScript and React Native is performed using a large subset of CSS (Cascading Style Sheets). Each CSS style can be applied globally within your application, specific to a give page / view or inlined with a specific component. Styles can also be added programmatically at run time.

Third-Party Libraries

Both NativeScript and React Native can utilise pure JavaScript and TypeScript libraries that do not call browser API functions. NodeJS libraries are particularly useful in this regard. Due to its relationship to ReactJS, React Native does provide syntactically alternative DOM (Document Object Model) manipulation out-of-the-box, while NativeScript can also do this with the help of third party libraries.

Aside from the plethora of NPM libraries available for use with both platforms, there are also platform specific libraries available. NativeScript provides it’s own marketplace with over 900 libraries at the time of publishing, which Native Directory hosts over 350 libraries for the React Native platform.

Performance

As both NativeScript and React Native work at a native level, their runtime performance is exceptional when compared to web applications that run in a WebView component or similar. Both platforms have been benchmarked to run at an impressive 60fps (frames-per-second) for most tasks.

As a native cousin to ReactJS, React Native also provides its own Virtual DOM which ensures its drawing and updating of the user interface is optimally fast. NativeScript does not provide a Virtual DOM out-of-the-box and so may sometimes run more slowly with heavily active UI changes. However, it is possible to utilise a Virtual DOM within NativeScript using a third-party plugin.

Another caveat with both platforms is that, when using third-party native libraries, these may in fact become the cause of bottlenecks within an application. As native code is rarely bug-free, introducing a library that is not optimised may lead to your application slowing down or even crashing completely. Therefore, care must be taken when developing your application.