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

NativeScript

480
916
+ 1
496
React Native

18.6K
15.6K
+ 1
1.1K
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.

Decisions about NativeScript and React Native

Our stack roughly divides into three major components, the front-end, back-end and the data storage.

For the front-end, we have decided to go with React Native via Expo. This allows us to target both Android and iOS with a single codebase. Expo provides "managed workflows" and an SDK that will simplify development and deployment.

For the back-end, we have decided to use Python. Python is the language of choice for machine learning (ML). It has extensive support for traditional ML algorithms (e.g. random forests) via Scikit-Learn and the SciPy ecosystem. On top of this, our industry partner has provided us their current solution written in Python. We decided to expose the back-end as a REST API using FastAPI. This allows us to nicely separate concerns from the rest of the codebase. FastAPIs use of static type hints, validation with Pydantic, and automated documentation allows us to build better APIs faster.

For data storage we decided to use a MongoDB Atlas, a NoSQL database. We decided to use a NoSQL database because we need to store large amounts of data (e.g data from the wearable IMUs). Moreover, due to the ever changing nature of a startup we require flexibility. NoSQL databases are schema-free which enables us to modify our schema as we see fit.

We plan on using GitHub Actions (GA) to orchestrate our CI/CD. Given GAs broad support of languages and workflows, it's hard to go wrong with this decision. We will also be using GitHub for version control and project management, so having everything in one place is convenient.

The major components of our CI/CD for the backend will consist of black for autoformatting, flake8 for linting, pytest for unit-testing, and mypy for static type checking and codecov for coverage reporting. We plan to use separate Docker containers to package the back-end and front-end components and use Docker Compose to launch the app. This allows us to better separate concerns, manage dependencies, and ensure our app is deployable anywhere.

See more
Julie Quintero
Machine learning/ software engineer · | 3 upvotes · 7.6K views

We will use Flutter for our athlete-facing mobile app. Flutter is a cross-platform app development framework, which boasts native performance and allows for creating beautiful, fluid user interfaces.

React Native may sound like a more appropriate option given our choice of frontend technologies, but we foresee little to no feature overlap in the web dashboard and mobile app. Ease of use, performance, good user experiences are key to encouraging athletes to use our app, something which React Native makes difficult, and is where Flutter excels.

We will use the test and flutter_test packages to test our Flutter app

See more
Christopher Chow
Software Developer at University of Toronto · | 4 upvotes · 7.8K views

We chose Flutter since we are developing a mobile application that needs to be performant (to handle displaying large amounts of data and video uploading) and would cover both Android and iOS systems. Since we want the app to be cross-platform, two frameworks comes in to mind: Flutter and React Native. As shown below, Flutter's performance and out-of-the-box support impressed us to pick it as our framework for our mobile app.

React Native has been a dominant force in cross-platform app development since its launch by Facebook. The ability to write React-like code and have it compile to both iOS and Android makes developing mobile apps much easier. However, the overhead done to bridge Javascript code into native code means React Native apps might not be as performant. Moreover, React Native, much like React, is an unopinionated framework that covers minimal functionality out-of-the-box. This means that most functionalities would have to be relied on third-party libraries or developers would have to write their own native code.

Flutter, on the other hand, is a much newer framework developed by Google. While Flutter uses Dart, a relatively new language compared to JS, syntax-wise it is similar enough to that a JS developer should be able to pick it up in no time. The Flutter engine also compiles directly into native code, making it more performant when compared with React Native. Flutter is also an opinionated framework, with a much large stack of Widgets to choose from out-of-the-box. The Widgets are also designed according to Material design principles, making styling easier.

See more
Pros of NativeScript
Pros of React Native
  • 73
    Access to the entire native api
  • 46
    Support for native ios and android libraries
  • 45
    Support for javascript libraries
  • 45
    Angular 2.0 support
  • 43
    Native ux and performance
  • 36
    Typescript support
  • 34
    Backed up by google and telerik
  • 29
    Css support
  • 26
    Cross-platform declarative ui and code
  • 24
    Fully open source under apache 2.0 license
  • 11
    Vuejs support
  • 8
    60fps performance
  • 5
    Powerful data visualization with native UI
  • 5
    VS Code integration
  • 4
    Cloud builds as part of Telerik PLatform
  • 4
    Angular, typescript and javascript support
  • 4
    No need for Mac to build iOS apps in Telerik Platform
  • 4
    Extended CLI support
  • 3
    On-device debugging
  • 3
    Extensibility
  • 3
    Truly Object-Oriented with Typescript
  • 3
    Easiest of all other frameworks
  • 3
    Backed by google
  • 3
    0 day support for new OS updates
  • 3
    Publishing modules to NPM
  • 2
    Access to entire native api
  • 2
    VueJS support
  • 2
    Svelte support
  • 2
    Powerfull mobile services as part of Telerik Platform
  • 2
    Live reload
  • 2
    Native ui with angular
  • 2
    Easy to learn
  • 2
    Vue.js support out of the box
  • 2
    Vue support
  • 1
    It works with Angular
  • 1
    Easy to use, support for almost all npm packages
  • 1
    Very small app size
  • 1
    Write once, use anywhere
  • 1
    Compile to Apple/Google Stores via CloudCompiler
  • 1
    HMR via webpack
  • 1
    Code reuse with your website
  • 1
    Rich ecosystem
  • 1
    Has CSS ;-)
  • 1
    Playground
  • 1
    Hot Reload
  • 196
    Learn once write everywhere
  • 158
    Cross platform
  • 157
    Javascript
  • 114
    Native ios components
  • 65
    Built by facebook
  • 59
    Easy to learn
  • 43
    Bridges me into ios development
  • 39
    No compile
  • 38
    It's just react
  • 36
    Declarative
  • 19
    Fast
  • 12
    Livereload
  • 11
    Virtual Dom
  • 10
    Insanely fast develop / test cycle
  • 9
    Backed by Facebook
  • 8
    Native android components
  • 8
    It is free and open source
  • 8
    Easy setup
  • 8
    Great community
  • 7
    Highly customizable
  • 6
    Awesome
  • 6
    Scalable
  • 6
    Great errors
  • 6
    Win win solution of hybrid app
  • 6
    Everything component
  • 5
    Not dependent on anything such as Angular
  • 5
    Simple
  • 4
    OTA update
  • 4
    Awesome, easy starting from scratch
  • 3
    As good as Native without any performance concerns
  • 3
    Easy to use
  • 2
    Many salary
  • 2
    Can be incrementally added to existing native apps
  • 2
    Hot reload
  • 2
    Over the air update (Flutter lacks)
  • 2
    'It's just react'
  • 2
    Web development meets Mobile development
  • 0
    Ful
  • 0
    Nigger

Sign up to add or upvote prosMake informed product decisions

Cons of NativeScript
Cons of React Native
  • 5
    Lack of promotion
  • 1
    Slower Performance compared to competitors
  • 22
    Javascript
  • 17
    Built by facebook
  • 11
    Cant use CSS
  • 2
    Some compenents not truly native

Sign up to add or upvote consMake informed product decisions

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.

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

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

Blog Posts

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.
Vue Native
Vue Native is a mobile framework to build truly native mobile app using Vue.js. Its is designed to connect React Native and Vue.js. Vue Native is a wrapper around React Native APIs, which allows you to use Vue.js and compose rich mobile User Interface.
Flutter
Flutter is a mobile app SDK to help developers and designers build modern mobile apps for iOS and Android.
See all alternatives
Interest over time