NativeScript vs React Native: What are the differences?

# Introduction

1. **Platform Specific Components**: NativeScript allows developers to directly access platform-specific APIs and components using JavaScript code, enabling more fine-tuned control over the user interface, whereas React Native abstracts away platform-specific APIs and components, providing a more consistent development experience across different platforms.
  
2. **Language Support**: NativeScript supports TypeScript and Angular, making it a preferred choice for developers familiar with these technologies; whereas React Native primarily uses JavaScript and React, attracting developers who are well-versed in these languages and frameworks.
  
3. **Rendering Method**: NativeScript uses a JavaScript Virtual Machine to render native components, leading to better performance on devices; on the other hand, React Native utilizes a bridge to communicate between JavaScript and native components, which can sometimes introduce performance overhead.
  
4. **Animations**: React Native provides a more extensive library of built-in animations and transitions, enhancing the visual appeal of mobile applications; in contrast, NativeScript offers fewer out-of-the-box animations, necessitating more custom implementation for complex animations.
  
5. **Developer Tools**: React Native includes a comprehensive set of debugging tools, like the React Developer Tools extension for Chrome, streamlining the development process; NativeScript also provides debugging tools but may require additional configuration and setup for optimal usage.
  
6. **Community and Ecosystem**: React Native boasts a larger community and a rich ecosystem of third-party libraries and plugins, accelerating development time by leveraging existing solutions; NativeScript, while having its own community and ecosystem, may have a smaller pool of resources compared to React Native.

In Summary, NativeScript and React Native differ in their approach to platform-specific components, language support, rendering methods, animations, developer tools, and the size of their respective communities and ecosystems.

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.