Get Advice Icon

Need advice about which tool to choose?Ask the StackShare community!

NativeScript
NativeScript

330
486
+ 1
415
React Native
React Native

7.1K
6K
+ 1
912
Add tool

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’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.

NativeScript vs React Native: What are the differences?

NativeScript: Build truly native apps with JavaScript. 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; React Native: A framework for building native apps with React. 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.

NativeScript and React Native can be categorized as "Cross-Platform Mobile Development" tools.

Some of the features offered by NativeScript are:

  • 100% Access to Native Platform API
  • NativeScript is free of charge as an open source project
  • Code with JavaScript. Style with CSS

On the other hand, React Native provides the following key features:

  • Native iOS Components
  • Asynchronous Execution
  • Touch Handling

"Access to the entire native api" is the top reason why over 55 developers like NativeScript, while over 170 developers mention "Learn once write everywhere" as the leading cause for choosing React Native.

NativeScript and React Native are both open source tools. React Native with 78.8K GitHub stars and 17.6K forks on GitHub appears to be more popular than NativeScript with 17.2K GitHub stars and 1.27K GitHub forks.

Instagram, TravelPerk, and Intuit are some of the popular companies that use React Native, whereas NativeScript is used by Work Box, Zege Technologies, and GeekyAnts. React Native has a broader approval, being mentioned in 719 company stacks & 809 developers stacks; compared to NativeScript, which is listed in 9 company stacks and 26 developer stacks.

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.

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.
Get Advice Icon

Need advice about which tool to choose?Ask the StackShare community!

Why do developers choose NativeScript?
Why do developers choose React Native?

Sign up to add, upvote and see more prosMake informed product decisions

    Be the first to leave a con
    What companies use NativeScript?
    What companies use React Native?

    Sign up to get full access to all the companiesMake informed product decisions

    What tools integrate with NativeScript?
    What tools integrate with React Native?

    Sign up to get full access to all the tool integrationsMake informed product decisions

    What are some alternatives to NativeScript and React Native?
    Ionic
    Free and open source, Ionic offers a library of mobile and desktop-optimized HTML, CSS and JS components for building highly interactive apps. Use with Angular, React, Vue, or plain JavaScript.
    Xamarin
    Xamarin’s Mono-based products enable .NET developers to use their existing code, libraries and tools (including Visual Studio*), as well as skills in .NET and the C# programming language, to create mobile applications for the industry’s most widely-used mobile devices, including Android-based smartphones and tablets, iPhone, iPad and iPod Touch.
    React
    Lots of people use React as the V in MVC. Since React makes no assumptions about the rest of your technology stack, it's easy to try it out on a small feature in an existing project.
    Flutter
    Flutter is a mobile app SDK to help developers and designers build modern mobile apps for iOS and Android.
    Apache Cordova
    Apache Cordova is a set of device APIs that allow a mobile app developer to access native device function such as the camera or accelerometer from JavaScript. Combined with a UI framework such as jQuery Mobile or Dojo Mobile or Sencha Touch, this allows a smartphone app to be developed with just HTML, CSS, and JavaScript.
    See all alternatives
    Decisions about NativeScript and React Native
    Sezgi Uluçam
    Sezgi Uluçam
    Sr. Software Engineer at StackShare · | 6 upvotes · 108.7K views
    Apache Cordova
    Apache Cordova
    PhoneGap
    PhoneGap
    React Native
    React Native
    Flutter
    Flutter
    #JavaScript
    #MobileFrameworks
    #NativeApps

    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
    Software Engineer at Casa Magalhães · | 4 upvotes · 65.1K views
    NativeScript
    NativeScript
    Apache Cordova
    Apache Cordova
    Vue.js
    Vue.js

    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
    Sezgi Uluçam
    Sezgi Uluçam
    Sr. Software Engineer at StackShare · | 7 upvotes · 174.4K views
    Expo
    Expo
    Xcode
    Xcode
    React Native
    React Native
    Android Studio
    Android Studio
    Android SDK
    Android SDK

    I've recently switched to using Expo for initializing and developing my React Native apps. Compared to React Native CLI, it's so much easier to get set up and going. Setting up and maintaining Android Studio, Android SDK, and virtual devices used to be such a headache. Thanks to Expo, I can now test my apps directly on my Android phone, just by installing the Expo app. I still use Xcode Simulator for iOS testing, since I don't have an iPhone, but that's easy anyway. The big win for me with Expo is ease of Android testing.

    The Expo SDK also provides convenient features like Facebook login, MapView, push notifications, and many others. https://docs.expo.io/versions/v31.0.0/sdk/

    See more
    React
    React
    Redux
    Redux
    AngularJS
    AngularJS
    React Native
    React Native
    redux-saga
    redux-saga
    Apache Cordova
    Apache Cordova
    #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
    Vishal Narkhede
    Vishal Narkhede
    Javascript Developer at getStream.io · | 19 upvotes · 161.5K views
    atStreamStream
    Stream
    Stream
    React Native
    React Native
    Chat by Stream
    Chat by Stream
    JavaScript
    JavaScript
    Expo
    Expo
    styled-components
    styled-components
    Babel
    Babel

    Recently, the team at Stream published a React Native SDK for our new Chat by Stream product. React Native brings the power of JavaScript to the world of mobile development, making it easy to develop apps for multiple platforms. We decided to publish two different endpoints for the SDK – Expo and React Native (non-expo), to avoid the hurdle and setup of using the Expo library in React Native only projects on the consumer side.

    The capability of style customization is one a large deal breaker for frontend SDKs. To solve this, we decided to use styled-components in our SDK, which makes it easy to add support for themes on top of our existing components. This practice reduces the maintenance effort for stylings of custom components and keeps the overall codebase clean.

    For module bundling, we decided to go with Rollup.js instead of Webpack due to its simplicity and performance in the area of library/module providers. We are using Babel for transpiling code, enabling our team to use JavaScript's next-generation features. Additionally, we are using the React Styleguidist component documentation, which makes documenting the React Native code a breeze.

    See more
    Gustavo Muñoz
    Gustavo Muñoz
    Web UI Developer at Globant · | 7 upvotes · 56.5K views
    Flutter
    Flutter
    React
    React