React Native vs. NativeScript



  • 917
  • -
  • 48.2K
  • 480
  • 2.02K
  • 4.33K

What is React Native?

React Native enables you to build world-class application experiences on native platforms using a consistent developer experience based on JavaScript and React. The focus of React Native is on developer efficiency across all the platforms you care about - learn once, write anywhere. Facebook uses React Native in multiple production apps and will continue investing in React Native.

What is NativeScript?

NativeScript enables developers to build native apps for iOS, Android and Windows Universal while sharing the application code across the platforms. When building the application UI, developers use our libraries, which abstract the differences between the native platforms.

Want advice about which of these to choose?Ask the StackShare community!

Why do developers choose React Native?
Why do you like React Native?

Why do developers choose NativeScript?
Why do you like NativeScript?

What are the cons of using React Native?
Downsides of React Native?

What are the cons of using NativeScript?
No Cons submitted yet for NativeScript
Downsides of NativeScript?

What companies use React Native?
834 companies on StackShare use React Native
What companies use NativeScript?
16 companies on StackShare use NativeScript
What tools integrate with React Native?
46 tools on StackShare integrate with React Native
What tools integrate with NativeScript?
2 tools on StackShare integrate with NativeScript

What are some alternatives to React Native and NativeScript?

  • Ionic - A beautiful front-end framework for developing cross-platform apps with web technologies like Angular and React.
  • Xamarin - Create iOS, Android and Mac apps in C#
  • Apache Cordova - Platform for building native mobile applications using HTML, CSS and JavaScript
  • PhoneGap - Easilily create mobile apps using HTML, CSS, and JavaScript

See all alternatives to React Native

Releasing React Native 0.59
React Native Open Source Update March 2019
The State of the React Native Community in 2018
Create Native Mobile Apps, Web Apps, and Chatbots - ...
Your First Contribution to NativeScript: A Meet Up
Working with Vuex in Your NativeScript-Vue Applicati...
Related Stack Decisions
Sezgi Ulu莽am
Sezgi Ulu莽am
Sr. Software Engineer at StackShare | 5 upvotes 9841 views
Flutter
React Native
PhoneGap
Apache Cordova
#NativeApps
#MobileFrameworks
#JavaScript

For a front end dev like me, using a mobile framework for side projects makes more sense than writing a native app. I had used Apache Cordova (formerly PhoneGap) before (because React Native didn't exist yet), and was happy with it. But once React Native came out, it made more sense to go that way instead. It's more efficient and smooth, since it doesn't have the simulation overhead, and has more access to hardware features. It feels cleaner since you don't need to deal with #WebView, using native UI widgets directly. I also considered Flutter . It looks promising, but is relatively new to the game, and React Native seems more stable for now.

MobileFrameworks #JavaScript NativeApps

See more
leonardo silveira
leonardo silveira
mad hatter at techpar | 0 upvotes 9936 views
Vue.js
Apache Cordova
NativeScript

So, i am preparing to adopt NativeScript.

For years my hybrid projects used Apache Cordova.

"Let's avoid to maintain two teams and double the deliver velocity".

It was good for a few years, we had those september issues, (i.e. apple broke some backward compatibility) , but for the last years, things seems to be losing the grip faster.

Last breaking changes, for instance, seems to have a workaround, however that growing feeling that simple things can not rely on so fragile webviews keeps growing faster and faster.

I've tested nativescript not only on it's "helloworld", but also on how do they respond on issues.

I got tweed support. I opened an github issue and got answers on less than 10 hours (yes i did it on another timezone and very close to a weekend). I saw the faulty docs get corrected in two days.

The bad news is i only can adopt nativescript on newer projects, since there is no budget to revamp the current solutions.

The good news is i can keep coding on Vue.js , without vou router, but that's ok. I've already exchanged vanilla html for real native app with background magic enabled, the router can be easily reproduced.

See more
Apache Cordova
redux-saga
React Native
AngularJS
Redux.js
React
#JavascriptMvcFrameworks

We had contemplated a long time which #JavascriptMvcFrameworks to use, React and React Native vs AngularJS and Apache Cordova in both web and mobile. Eventually we chose react over angular since it was quicker to learn, less code for simple apps and quicker integration of third party javascript modules. for the full MVC we added Redux.js for state management and redux-saga for async calls and logic. since we also have mobile app along with the web, we can shere logic and model between web and mobile.

See more


Interest Over Time


NativeScript or React Native - Help me decide


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鈥檚 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 鈥淲eb 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 鈥淗ello, World!鈥 example

Since React Native is based on it鈥檚 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 鈥淗ello, 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鈥檚 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.