Before we compare both technologies, we must understand the problems both uniquely solve and both their visions.
What is NativeScript and React Native?
Community support is one of the most important factors to consider when choosing the right framework. It may seem surprising, but NativeScript has been around longer than React Native. NativeScript’s initial release was in 2014, while React Native was initially released on March 26, 2015.
While the difference of one year may seem like an advantage, the growth and adoption rate of React Native is much higher than NativeScript. As of this publish date, React Native records around 533k weekly downloads on npm, while NativeScript records just under 7k weekly downloads.
When it comes to contributors, React Native handily wins with over 2,200 contributors on GitHub while NativeScript has 208 contributors. And, NativeScript is used by over 3.5k developers while React Native is used by just under 720k developers on GitHub.
This wide margin showcases the developer community’s wide adoption of React Native and impacts the number of third-party libraries, bug fixes, and answers on StackOverflow.
Community support is also important because it determines the number of resources available to learn about each framework, such as blog posts, paid and free courses, ebooks, and YouTube videos.
When it comes to community support, React Native takes the win as most popular.
Setting up a React Native project
Getting started and setting up a React Native project can be challenging for web developers who are new to mobile development. However, thanks to Expo, getting started with React Native is a breeze.
While Expo does have some limitations, these limitations don’t affect most apps built using Expo.
Developers can also use Expo Go, a mobile app built by the Expo team to run React Native on a physical Android and iOS device by scanning the QR code to install an app on a physical device.
Setting up a NativeScript project
Getting started with NativeScript is fairly easy with the official templates when bootstrapping a NativeScript app. You can initialize a NativeScript app with a side drawer already setup by running the following command in the terminal:
create myNsApp --template @nativescript/template-drawer-navigation
However, NativeScript syncs best with Angular more than any other framework because the NativeScript team works with Google to ensure both tools work seamlessly when building mobile apps.
By using the NativeScript Playground app, you can run your apps on a physical Android and iOS device, just like Expo Go.
Overall, the Expo Go app gives a better developer experience than NativeScript playground, so that’s a plus for developers looking for a simpler setup experience.
The hot reload feature is very important in mobile app development because it drastically improves developer productivity. No developer wants to wait longer than a minute to see every little change injected into their mobile app during the development phase.
In this section, we’ll see how both React Native and NativeScript handle hot reload.
React Native fast refresh
In version 0.61 of React Native, the team announced a feature called fast refresh. Fast refresh unified the already existing live reloading feature and hot reloading features in previous React Native versions.
With fast refresh enabled, you can make changes to your app and see the changes almost instantaneously. By default, this feature preserves local state in functional components but not in class components.
More great articles from LogRocket:
- Don't miss a moment with The Replay, a curated newsletter from LogRocket
- Learn how LogRocket's Galileo cuts through the noise to proactively resolve issues in your app
- Use React's useEffect to optimize your application's performance
- Switch between multiple versions of Node
- Discover how to animate your React app with AnimXYZ
- Explore Tauri, a new framework for building binaries
- Compare NestJS vs. Express.js
You can also call fast refresh manually using the
// @refresh reset directive in your React Native component, forcing the component to remount.
NativeScript Hot Module Replacement
NativeScript’s Hot Module Replacement (HMR) feature was released in NativeScript 5.3. It supports Visual Studio Code debugging, letting developers use the debugger even while the HMR feature is still running.
It also has full support for SASS files, which means when you make changes in a
.sass file in your app, they reflect in your app during development; HMR then works when adding or deleting a file from your NativeScript app directory.
There’s support for script changes in a
.vue file as well, but it has a limitation when working with TypeScript in Vue, and there’s full HMR support in out-of-the-box NativeScript Angular projects with no extra configs needed!
Both the HMR and fast refresh perform similarly, and both have smartly built features like debugging for Visual Studio Code in NativeScript and error resilience in React Native.
React Native APIs
React Native comes with some basic out-of-the-box modules, but there are cases where you may need native capabilities that React Native does not have a corresponding module for yet. In such cases, you must write native modules to communicate with Native APIs.
Achieving this requires special bridges, which require some level of expertise in native development. However, with the size of React Native’s ecosystem, you will likely find an existing native module on GitHub or npm.
React Native and NativeScript performance
NativeScript apps are usually slower because the framework employs a single-threaded approach to access native device APIs.
React Native also offers faster UI rendering because it uses the virtual DOM to update app UIs, similar to React.
NativeScript and React Native documentation
NativeScript’s documentation is easy to understand and it has some really great illustrations on how to implement things like animations, gestures, HTTP requests, and code sharing.
And, with specific use cases of NativeScript with Svelte and Vue, there is separate documentation. But most of the time, developers must learn how things work in the NativeScript ecosystem outside the official docs.
React Native has a more mature ecosystem than NativeScript, and with that comes the expectation that the documentation is explicit because it is accessed by both beginners and experts in cross-platform mobile app development.
However, while the documentation is approachable, it lacks details, which may make some concepts unclear to beginners.
Building React Native apps with Expo and using the Expo docs simplifies working with React Native docs as a beginner building a functional React Native app.
Neither has the best documentation, and developers using both frameworks must usually go beyond the official documentation to learn all aspects of the frameworks.
Companies using NativeScript and React Native
React Native is currently used in production by top brands and companies like Facebook, Bloomberg, Coinbase, Discord, Tesla, and more. This proves how big and popular React Native has become.
Facebook marketplace is also built with React Native, proving that if you have an existing mobile app written in a native language, you can adopt React Native progressively to build different parts of your mobile application.
Even though React Native takes the spotlight here, it does not imply that NativeScript cannot solve the business problems that React Native does for the companies using it. Looking at the awesome apps here built with NativeScript shows it can build production-ready mobile apps.
From the above perspectives, you should be able to make informed decisions when choosing a cross-platform mobile application framework for your next project.
Feel free to drop a comment to let me know what you thought of this article. You can also find me on Twitter and LinkedIn. Thank you for reading!
LogRocket: Instantly recreate issues in your React Native apps.
LogRocket is a React Native monitoring solution that helps you reproduce issues instantly, prioritize bugs, and understand performance in your React Native apps.
LogRocket also helps you increase conversion rates and product usage by showing you exactly how users are interacting with your app. LogRocket's product analytics features surface the reasons why users don't complete a particular flow or don't adopt a new feature.
Start proactively monitoring your React Native apps — try LogRocket for free.