Need advice about which tool to choose?Ask the StackShare community!
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.













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.
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
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.
Pros of NativeScript
- Access to the entire native api73
- Support for native ios and android libraries46
- Support for javascript libraries45
- Angular 2.0 support45
- Native ux and performance43
- Typescript support36
- Backed up by google and telerik34
- Css support29
- Cross-platform declarative ui and code26
- Fully open source under apache 2.0 license24
- Vuejs support11
- 60fps performance8
- Powerful data visualization with native UI5
- VS Code integration5
- Cloud builds as part of Telerik PLatform4
- Angular, typescript and javascript support4
- No need for Mac to build iOS apps in Telerik Platform4
- Extended CLI support4
- On-device debugging3
- Extensibility3
- Truly Object-Oriented with Typescript3
- Easiest of all other frameworks3
- Backed by google3
- 0 day support for new OS updates3
- Publishing modules to NPM3
- Access to entire native api2
- VueJS support2
- Svelte support2
- Powerfull mobile services as part of Telerik Platform2
- Live reload2
- Native ui with angular2
- Easy to learn2
- Vue.js support out of the box2
- Vue support2
- It works with Angular1
- Easy to use, support for almost all npm packages1
- Very small app size1
- Write once, use anywhere1
- Compile to Apple/Google Stores via CloudCompiler1
- HMR via webpack1
- Code reuse with your website1
- Rich ecosystem1
- Has CSS ;-)1
- Playground1
- Hot Reload1
Pros of React Native
- Learn once write everywhere196
- Cross platform158
- Javascript157
- Native ios components114
- Built by facebook65
- Easy to learn59
- Bridges me into ios development43
- No compile39
- It's just react38
- Declarative36
- Fast19
- Livereload12
- Virtual Dom11
- Insanely fast develop / test cycle10
- Backed by Facebook9
- Native android components8
- It is free and open source8
- Easy setup8
- Great community8
- Highly customizable7
- Awesome6
- Scalable6
- Great errors6
- Win win solution of hybrid app6
- Everything component6
- Not dependent on anything such as Angular5
- Simple5
- OTA update4
- Awesome, easy starting from scratch4
- As good as Native without any performance concerns3
- Easy to use3
- Many salary2
- Can be incrementally added to existing native apps2
- Hot reload2
- Over the air update (Flutter lacks)2
- 'It's just react'2
- Web development meets Mobile development2
- Ful0
- Nigger0
Sign up to add or upvote prosMake informed product decisions
Cons of NativeScript
- Lack of promotion5
- Slower Performance compared to competitors1
Cons of React Native
- Javascript22
- Built by facebook17
- Cant use CSS11
- Some compenents not truly native2