NativeScript
NativeScript

268
383
408
React Native
React Native

5.5K
4.5K
891
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.

Want advice about which of these 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

What are the cons of using NativeScript?
What are the cons of using React Native?
    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.
    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.
    PhoneGap
    PhoneGap is a web platform that exposes native mobile device apis and data to JavaScript. PhoneGap is a distribution of Apache Cordova. PhoneGap allows you to use standard web technologies such as HTML5, CSS3, and JavaScript for cross-platform development, avoiding each mobile platforms' native development language. Applications execute within wrappers targeted to each platform, and rely on standards-compliant API bindings to access each device's sensors, data, and network status.
    See all alternatives
    Decisions about NativeScript and React Native
    Apache Cordova
    redux-saga
    React Native
    AngularJS
    Redux
    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
    Vishal Narkhede
    Vishal Narkhede
    Javascript Developer at getStream.io · | 19 upvotes · 32.3K views
    atStreamStream
    Babel
    styled-components
    Expo
    JavaScript
    Chat by Stream
    React Native
    Stream

    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 · | 6 upvotes · 11.3K views
    JavaScript
    Visual Studio Code
    Android Studio
    Dart
    React Native
    React
    Flutter
    #Flare

    In my modest opinion, Flutter is the future of mobile development. The framework is as important to mobile as React is to the web. And seeing that React Native does not finish taking off, I am focusing all my efforts on learning Flutter and Dart. The ecosystem is amazing. The community is crazy about Flutter. There are enough resources to learn and enjoy the framework, and the tools developed to work with it are amazing. Android Studio or Visual Studio Code has incredible plugins and Dart is a pretty straight forward and easy-to-learn language, even more, if you came from JavaScript. I admit it. I'm in love with Flutter. When you are not a designer, having a framework focused on design an pretty things is a must. And counting with tools like #flare for animations makes everything easier. It is so amazing that I wish I had a big mobile project right now at work just to use Flutter.

    See more
    Interest over time
    Reviews of NativeScript and React Native
    Avatar of tonyxiao
    Economics
    Review ofReact NativeReact Native

    Native iOS developer here. One of the most important thing React Native managed to accomplish is that it created a better single-platform development experience than the platform owner themselves did. It's faster and easier to develop a react native app than it is to develop an iOS app. And remember that react native is at the end of the day still native. So native views, native components, native modules. You get to pick and choose how much you want to be in JavaScript and how much you want to be in native.

    Review ofNativeScriptNativeScript

    It is using the native components to build the UI and offers the best skills reuse story. All you need to know is JS/TS and CSS. Angular 2 is also supported which leads to even more code reuse across web and mobile.This is also the best way to access the native platform APIs directly.

    Review ofNativeScriptNativeScript

    NativeScript allows you to reuse your JS skills to build Native mobile apps without any sacrifices. It takes a bit to learn about all possible features, but each time you discover a new one you can't help but get more and more excited.

    How developers use NativeScript and React Native
    Avatar of Kurzor, s.r.o.
    Kurzor, s.r.o. uses React NativeReact Native

    React Native is great in that it reduces the overhead of writing native code based on a web app. If written in a good style, Redux part of the app can often just be copied or shared in the Native app - and it just works! What a timesaver.

    Avatar of Ryan VanBelkum
    Ryan VanBelkum uses React NativeReact Native

    The framework used to write the mobile apps in this project. I've chosen this because of the "write once run all" (ios and android) mentality.

    Avatar of AmericanBibleSociety
    AmericanBibleSociety uses React NativeReact Native

    We are not currently using this product but we have very high interest in learning and using this for mobile apps.

    Avatar of JINJA Ltd.
    JINJA Ltd. uses React NativeReact Native

    New features of our app are developed on React Native, so we could maintain a small dev team.

    Avatar of Tana
    Tana uses React NativeReact Native

    100% of our mobile codebase is shared between iOS and Android. Using along with TypeScript.

    How much does NativeScript cost?
    How much does React Native cost?
    Pricing unavailable
    Pricing unavailable