React Native vs NativeScript: Comparison
Tags: reactnative, nativescript, mobile
Published: 2020-11-03 09:57:20

<p>Somewhere in the middle of our previous <a href="https://pagepro.co/blog/react-native-vs-xamarin-pros-and-cons/" target="_blank" rel="noreferrer noopener">article about the pros and cons of React Native and Xamarin</a>, I promised to deliver another comparison at the end of the week. And here it is – React Native vs NativeScript comparison.</p>

<h2>What is cross-platform development?</h2>

<p>Cross-platform development is a way to build mobile applications from single codebase instead of creating separate applications for specific operating systems. Applications made that way are native-like and have several advantages over native applications, like:</p>

<ul><li><strong>Availability on every mobile device</strong> – on the contrary to native apps that are built for one specific platform only, cross-platform apps work everywhere.</li><li><strong>Bigger audience</strong> – there is a chance that you have a limited budget so you would have to decide between reaching out solely to Android users or iOS fans. But when you decide to go with the cross-platform app, the necessity to choose disappears.</li><li><strong>Cost-effectiveness</strong> – you can hire one developer instead of two, and changing or fixing the code of one application is also cheaper than maintaining two separate apps.</li><li><strong>Shorten time to market </strong>– TTM means the time from the idea to the working product (like Minimum Viable Product). And while building two separate apps takes a lot of time, cross-platform development is 50% faster than native development. Therefore, you can get your first clients (or at least honest feedback) quickly.</li></ul>

<p>If you want to learn more about the differences between cross-platform apps and native apps, we recommend <a href="https://pagepro.co/blog/cross-platform-apps-vs-native-apps/" target="_blank" rel="noreferrer noopener">our article on this subject</a>.</p>

<h2>Cross-platform development frameworks</h2>

<p>The next step is to choose the proper framework for your mobile application. Among them are:</p>

<ul><li><a href="https://cordova.apache.org/" target="_blank" rel="noreferrer noopener nofollow">Cordova</a></li><li><a href="https://flutter.dev/" target="_blank" rel="noreferrer noopener nofollow">Flutter</a></li><li><a href="https://ionicframework.com/" target="_blank" rel="noreferrer noopener nofollow">Ionic</a></li><li><a href="https://nativescript.org/" target="_blank" rel="noreferrer noopener nofollow">NativeScript</a></li><li><a href="https://pagepro.co/react-native-development.html" target="_blank" rel="noreferrer noopener nofollow">React Native</a></li><li><a href="https://dotnet.microsoft.com/apps/xamarin" target="_blank" rel="noreferrer noopener nofollow">Xamarin</a></li></ul>

<p>Although our first choice is React Native, we want you to make well thought out decisions about the framework. Because of that, we prepared a few comparisons between React Native and other frameworks:</p>

<ul><li><a href="https://pagepro.co/blog/react-native-vs-flutter-which-is-better-for-cross-platform-app/" target="_blank" rel="noreferrer noopener">React Native vs Flutter</a></li><li><a href="https://pagepro.co/blog/react-native-vs-ionic-and-cordova-comparison/" target="_blank" rel="noreferrer noopener">React Native vs Ionic and Cordova</a></li><li><a href="https://pagepro.co/blog/react-native-vs-xamarin-pros-and-cons/" target="_blank" rel="noreferrer noopener">React Native vs Xamarin</a></li></ul>

<h2>What is React Native?</h2>

<p>Facebook created React Native as an open-source framework based on JavaScript. With RN, you can build native mobile applications for both Android and iOS.</p>

<p>If you want to learn more about React Native, we recommend reading our <a href="https://pagepro.co/blog/react-native-guide-2020-top-mobile-framework/" target="_blank" rel="noreferrer noopener">React Native Guide</a>.</p>

<h2>What is NativeScript?</h2>

<p>NativeScript, as same as React Native, is an open-source framework that helps developers build apps on the Android and iOS platforms. NativeScript apps are created with JavaScript or by any other JavaScript-related language like TypeScript. NS also supports frameworks like Angular and Vue.js.</p>

<p>NativeScript allows for direct access to all native platform APIs on both iOS and Android. Thanks to it, you can build fully native apps like they were developed in Xcode or Android Studio.</p>

<p>Additionally, NativeScript developers can re-purpose third-party libraries from CocoaPods, Maven, and npm.js without using wrappers.</p>

<h3>Companies using NativeScript</h3>

<ul><li>Deloitte Digital</li><li>Hulu</li><li>PUMA</li><li>Sennheiser</li></ul>

<h2>React Native vs NativeScript: Head-to-head</h2>

<figure class="wp-block-table is-style-regular"><table><tbody><tr><td></td><td><strong>React Native</strong></td><td><strong>NativeScript</strong></td></tr><tr><td><strong>Programming language</strong></td><td>JavaScript</td><td>JavaScript</td></tr><tr><td><strong>Created by</strong></td><td>Facebook</td><td><a href="https://progress.com" target="_blank" rel="noreferrer noopener nofollow">Progress</a></td></tr><tr><td><strong>Supported platforms</strong></td><td>Android, iOS, Web Apps</td><td>Android, iOS</td></tr><tr><td><strong>Hot Reload</strong></td><td>YES</td><td>YES (LiveSync)</td></tr><tr><td><strong>Release date</strong></td><td>2015</td><td>2015</td></tr></tbody></table></figure>

<h2>React Native vs NativeScript: Comparison</h2>

<h3 class="has-vivid-red-color has-text-color">Application size</h3>

<p>If your mobile application will consist of complex business logic, then you should go with React Native, because the application size will be compact. On the contrary, complex mobile apps built with NativeScript are usually of considerable size. And keep in mind that high-speed internet connection isn’t available everywhere, which may cause terrible experience from using such an app.</p>

<h3 class="has-vivid-red-color has-text-color">Code sharing</h3>

<p>The general rule is that the more complex and custom the application is, the smaller the possibility of sharing codebase. However, React Native, and NativeScript applications can share up to 90% of the code.</p>

<p>There is also one crucial factor that influences the code-sharing percentage – the number of used native-platform components. The bigger that number is, the smallest part of the code can be shared.</p>

<h3 class="has-vivid-red-color has-text-color">Community, popularity and support</h3>

<p>If it were a popularity contest, React Native would win indisputably. The main reason is that the Facebook developers are behind RN, and they are wildly popular around the programming world. Just take a look at numbers from GitHub, Google Trends, StackOverflow, and Stackshare.&nbsp;</p>

<figure class="wp-block-table"><table><tbody><tr><td><strong>React Native on GitHub</strong></td><td><strong>NativeScript on GitHub</strong></td></tr><tr><td><img src="https://lh5.googleusercontent.com/4aQ3xT5D-vA_gBO0hglMHBUJklZ-3eFSatYrHAuzkocqzTw2O8rEfQGFCcVMz9czEzXNWvivUQkZvxik2Qb8F8Dsk1c537yFctALu1ItUC-WafofEIbpqolPlAb9mw8Woj2b9d8R" width="299" height="480"></td><td><img src="https://lh3.googleusercontent.com/Z0YBqsfgegsihwRHIQPHB8e3zIv9TS9VKc0ulOdVhPi1UMCZs85nWcBArpq1PV8wnepJ6naCiYijU85ZoPty8BGVdp4y6GxB0ksW3nwKxu_ySaULNAY187mIDJbdXkKDAYxbgpX5" width="298" height="485"></td></tr></tbody></table></figure>

<p class="has-text-align-center"><strong>Google Trends</strong></p>

<figure class="wp-block-image"><img src="https://lh4.googleusercontent.com/KOOcTaxARDZlyx3G0LknUFKv3K9y4tfG8Wx7cYI41wW9yx0GmRNQTulnv8pEeQnXRF1w30C3PCd_WyPLz0J6_YDIf3ggR_sZYvsm67vFPNOBscFLEHH5089tCXWY-nyJln5geLbZ" alt="React Native vs NativeScript: Google trends overview"/></figure>

<figure class="wp-block-table aligncenter"><table><tbody><tr><td class="has-text-align-center" data-align="center"><strong>React Native and NativeScript on Stackshare</strong></td></tr><tr><td class="has-text-align-center" data-align="center"><img src="https://lh3.googleusercontent.com/WE45UkYQy78PzX4H2OIIR5awYhARUVjr_1DnpKmhG3HgID0lwTcKhaS_L4QFXVzmyE_QTz8D_aqr9rQFI6EKFpeYwFdxaYM1Y7tfSTH89-QmcYwRfiMLWydd2lGddSUbzET16gG-" width="610" height="364"></td></tr></tbody></table></figure>

<p class="has-text-align-center"><strong><a href="https://insights.stackoverflow.com/survey/2020#technology-most-loved-dreaded-and-wanted-other-frameworks-libraries-and-tools" target="_blank" rel="noreferrer noopener nofollow">2020 Developer Survey by Stack Overflow</a>. (NativeScript isn’t even mentioned.)</strong></p>

<figure class="wp-block-image size-large"><img src="https://pagepro.co/blog/wp-content/uploads/2020/08/other-frameworks-stack-overflow-1024x648.png" alt="React Native vs NativeScript: Stack Overflow screenshot" class="wp-image-4206"/></figure>

<figure class="wp-block-image size-large"><img src="https://pagepro.co/blog/wp-content/uploads/2020/08/most-loved-frameworks-stack-overflow-1024x651.png" alt="React Native vs NativeScript: Stack Overflow screenshot" class="wp-image-4207"/></figure>

<p>All these numbers mean that if you choose React Native to build a mobile app, it will be easier to:</p>

<ul><li>Get unconditional help from the online community.</li><li>Find and hire developers.&nbsp;</li><li>Find components or learning resources.</li></ul>

<h3 class="has-vivid-red-color has-text-color">Developer environment and tools</h3>

<p>There is no IDE (integrated development environment) explicitly created for React Native development. Because of that, you can use your favourite code editor. And while it’s great news, you should remember that you are on your own when it comes to setting up everything.&nbsp;</p>

<p>NativeScript makes it easy to set up the environment – everything you need is a single line of code. Moreover, there is a special debugging plugin for those who use Visual Studio Code. As a developer, you can use it for variable inspection, breakpoints and other everyday tasks.</p>

<p>Both frameworks, however, allow developers to use Chrome Developer Tools for debugging.</p>

<h3 class="has-vivid-red-color has-text-color">Learning curve</h3>

<p>Both platforms take advantage of JavaScript, so it’s a piece of excellent news for frontend developers. And both are perceived as relatively easy to learn.</p>

<p>However, there are some differences.</p>

<p>On the one hand, choosing React Native means that all you need is JavaScript. And on the other hand, NativeScript gives you more freedom by supporting the declarative coding style. It means that if you are not happy with a specific feature in one framework, you can use any other JavaScript framework, including Angular, TypeScript, and Vue.js.</p>

<h3 class="has-vivid-red-color has-text-color">Native APIs integration</h3>

<h4>NativeScript</h4>

<p>Developers using NativeScript have direct access to native APIs both for Android and iOS without writing code in Kotlin/Java (for Android) or Objective-C/Swift (for iOS) languages.</p>

<h4>React Native</h4>

<p>While React Native connects with native APIs like NativeScript, it needs the help of special bridges. And that’s the reason why you may need some native language knowledge. Integrating such bridges – even though there are some readymade bridges provided by developers – still requires some amount of effort.</p>

<h3 class="has-vivid-red-color has-text-color">Performance</h3>

<p>NativeScript offers slow rendering and In the world where every second count, it’s something hard to accept. And that’s where React Native enters the stage. Rendering dynamic elements, which looks like rendering in apps using native SDKs, is possible thanks to the Virtual DOM. DOM makes React Native performant and helps overhaul NativeScript in this case.</p>

<h3 class="has-vivid-red-color has-text-color">Third-party plugins</h3>

<p>NativeScript offers <a href="https://market.nativescript.org/">Marketplace</a> where you can find any plugins you may need. Because of that, third-party solutions aren’t required. On the other side, React Native relies on third-party plugins, but there are many resources available, and generally, it isn’t a problem to find what you need.</p>