Choosing React Native for Your Mobile Tech Stack

CHOOSING REACT NATIVE FOR YOUR MOBILE TECH STACK

The all-in-one guide for CEOs and Product Owners

When Facebook developers first introduced ReactJS to the world at the 2013 JSConf event, they could hardly predict how this announcement would impact web app development. Two years later, inspired by the library’s impressive growth, the company made another in-house project, React Native, available to the public by releasing it on GitHub. 26th March, the day when React Native joined the open-source domain, set a milestone for the development of mobile applications.

Today, with nearly 1,800 contributors and more than 15K commits in 89 branches, React Native (RN) is one of the most popular GitHub repositories.

What exactly is React Native? Who can benefit from it? How to develop your first mobile app with RN? These are just some of the questions we will answer in this all-in-one guide to the React Native framework.

Why did we create Who should read our this page? guide?

Are you considering React Native Blog posts, YouTube tutorials, for your next project? Would you development forums, workshops, code like to learn RN? repositories… If you’re a startup, product owner, There are so many resources to go C-level professional or a marketer, through when you are looking for a this guide will help you get the comprehensive and reliable hang of React Native without information about React Native. reaching the bottom of Google.

Who has the time to browse them all? It also aids developers who want to learn to code in React Native.

This is your single reliable resource Finally, it is simply meant for that gathers all RN knowledge in one anyone interested in mobile app place. No more searching. development.

TABLE OF CONTENTS:

1. What Is React Native? 2. React Native vs. Native Apps 3. React Native vs. Other Cross-Platform Solutions 4. Pros and Cons of React Native 5. When to Use React Native? 6. React Native Performance 7. React Native App Development Process 8. The Economy of React Native 9. Mastering React Native 10. Examples of React Native In a Wild 11. React Native Today - the Current State of React Native 12. The Future of React Native 13. Summary — To React or Not to React?

1. WHAT IS REACT NATIVE?

React Native definitions can get cryptic. To help you understand if it is the right technology for you, we will start by decoding one of them:

React Native is a JavaScript framework for building mobile applications with native look and feel in iOS and Android. Now, how about getting to grips with that statement?

THE NAME – REACT NATIVE

The name of the framework is a combo of React + native.

Why ‘React’?

React, an open source JavaScript library for building interactive user interfaces (UI) on the web, was first created in 2011 by Jordan Walke, and deployed at Facebook a year later, it quickly gained popularity thanks to its adaptability, ease of use, and high performance.

React Native is a JavaScript framework used for building native mobile applications for iOS, Android, and UWP. Facebook introduced RN two years after the official React release to enable the cross-platform functionality in mobile development. React Native uses React (also called ReactJS) to build app components. It also follows the same design principles, allowing for the creation of rich mobile UI

Both, React Native and ReactJS are maintained by Facebook.

[Source: h ttps://facebook.github.io/react-native/]

Why ‘native’?

According to Facebook: “With React Native, you don't build a "mobile web app", an "HTML5 app", or a "hybrid app". You build a real mobile app that's indistinguishable from an app built using Objective-C or Java. React Native uses the same fundamental UI building blocks as regular iOS and Android apps. You just put those building blocks together using JavaScript and React.”

[Source: https://facebook.github.io/react-native/]

In mobile application development, a native app is a software created for a specific platform or device. Native applications are developed in a programming language dedicated to a particular operating system, for example, Swift/Objective-C for iOS, or Java/Kotlin for Android. They provide a

high level of reliability and performance and deliver a superior user experience. However, there are some downsides to their use, too. Since each OS must be supported by a discrete version of an app, written in a dedicated language, companies need at least twice the time and resources to launch their products on all mobile devices. And developers have to be proficient in multiple programming languages, frameworks, and tools.

Is React Native ‘native’?

While React Native is NOT purely native, it uses the same building blocks as iOS and Android apps, offering an equivalent user experience and almost as good a performance. What’s more, with RN, developers only have to write their code once to create software that is practically indistinguishable from the one built specifically for a given system. React Native allows you to develop *a cross-platform mobile app with native look and feel, hence the second part of its name, ‘native’. Also, with RN, you can build hybrid apps, which combine native and RN code.  To explore the topic of mobile native applications in greater detail, go to section REACT NATIVE VS. NATIVE APPS.

* Cross-platform mobile development refers to the development of mobile applications that are supported by multiple mobile operating systems. Despite some limitations, this approach has many advantages over native development, where a separate app must be built for every single mobile platform, which requires a broader programming skill set and takes more time.

“With React Native, you don't build a "mobile web app", an "HTML5 app", or a "hybrid app". You build a real mobile app that's indistinguishable from an app built using Objective-C or Java. React Native uses the same fundamental UI building blocks as regular iOS and Android apps. You just put those building blocks together using JavaScript and React.”

WHAT DOES JAVASCRIPT HAVE TO DO WITH THAT?

React Native is a JavaScript framework. In order to build apps with RN, you need to know this language and have a good understanding of React programming. As RN is based on JavaScript, it does not use HTML or CSS for the UI. However, it implements the JSX syntax, so it’s good to become familiar with it as well.

WHAT EXACTLY IS A FRAMEWORK?

In software programming, a framework is a piece of code that delivers a standardized frame for the developed applications. It dictates the architecture for a software project by providing such functions, modules, APIs, and libraries.

Developers use frameworks to simplify app development and decrease the number of manual tasks as they program. React Native is a framework for the creation of mobile applications utilizing JavaScript language and React libraries.

Who uses React Native?

React Native is an extremely popular and influential framework, and it has multiple uses: B2B applications, apps that contain forms and dynamic images, software used internally by companies, education platforms, etc.

The number of household businesses using RN for the development of their apps is remarkable. The framework is used, among others, by Facebook, Instagram, Google, Microsoft, Uber, LinkedIn, and Walmart. See also section WHEN TO USE REACT NATIVE?

 To learn more about React Native’s benefits (and drawbacks), go to section PROS AND CONS OF REACT NATIVE.

Key Takeaways

● React Native is a JavaScript framework used by developers to build cross-platform mobile applications. ● Its name is a compound of two crucial elements; React, as RN builds on React libraries, and native, as a reference to the native look & feel that RN produces. ● React Native is immensely popular among developers who value it for its code clarity, efficiency, and superb user experience.

See Also

1. The official React page: https://reactjs.org/ 2. The official React Native page: https://facebook.github.io/react-native/ 3. RN GitHub project: https://github.com/facebook/react-native 4. ‘What is React Native?’: https://www.quora.com/What-is-React-Native 5. ‘8 Amazing Examples of React Web Development’: https://ideamotive.co/blog/8-amazing-examples-of-react-web-develop ment/ 6. ‘What are the main differences between ReactJS and React-Native?’: https://medium.com/@alexmngn/from-reactjs-to-react-native-what-ar e-the-main-differences-between-both-d6e8e88ebf24

2. REACT NATIVE VS. NATIVE APPS

As we explained in the previous section, React Native is a JavaScript framework based on React libraries that enables development of cross-platform mobile applications which look and feel native. If RN feels ‘almost’ native, how exactly is it different from platform-specific tools?

Let’s dive into that subject by defining native apps first.

Why Invest in Mobile Applications? As of 2018, Android controls over 85% of the world’s mobile devices, with more than 2 billion active users of the system. Apple, on the other hand, claims to have passed the milestone of 1.3 billion active installed base of devices early this year. “Over one-fifth of millennials (21%) say they open any app more than 50 times a day”

[Source: Mobile App Usage Statistics 2018]

These numbers denote a massive market and enormous revenue potential for companies who reach out to their customers on mobile.

What Are Native Apps?

The most common way of delivering mobile applications is through native platforms.

A native app uses a platform-specific code in the language dedicated to a given mobile OS. Typically, these are Java and Kotlin for Android or Swift and Objective-C for iOS. To develop a native app, programmers work on an Integrated Development Environment (IDE) specific for a given operating system.

Native apps offer ultra-fast performance, easy access to all device APIs and functionalities, and optimal responsiveness. Because they are tailored for a given platform and don’t rely on multiple browsers, languages, and development tools, they also provide a high level of security and reliability.

If there are so many evident benefits of native apps, that raises a question: Why do mobile developers use React Native for mobile development instead of going fully native?

Top Reasons to Choose React Native Over Native Apps

1. Shorter Development Time

With React Native, developers only need to create their code once to use it on different mobile OSs. They also don’t waste their time on code recompilation and app restart, thanks to the unique hot reloading feature that lets them apply changes on the fly. That’s why one of the most apparent advantages of React Native over native apps is the incredible speed of development. Companies report that the cross-platform capabilities of RN help them accelerate the development time up to 300%!! This benefit is of prime value, as rapid code delivery allows businesses to gain a competitive edge by shipping innovative products first to the market.

2. Quicker Product Updates and Feature Extensions

While testing and updating an app with React Native, the dev team also perform all tasks only once, which results in further time savings. What’s more, with native development, once your app is up and running, you’ll need to go through the entire build process and upload the new version to the Apple App Store or Android Play. The stores must approve all modifications, and only then the updates become available to the end users, who still need to install them manually on their devices. React Native greatly simplifies this process and makes updates fully transparent from the user’s perspective. It usually runs locally, using JavaScript files embedded in the app. But it can also store JavaScript files remotely on a server, and fetch the latest version. As a result, when you’re ready with all updates, you simply publish the new features and extensions, and they will be applied on each user’s device next time when the app is not running.

3. One Team for All Platforms

There’s no denying that smaller teams deliver better results. In a small team, each person assumes responsibility for their work, which motivates them and increases their engagement. The immediate, direct communication within the team leads to faster development and issue resolution. Smaller teams are also much easier to manage. With React Native, you only need to build one team to deliver results for all mobile platforms. Most of the coding is based on JavaScript and React and the popularity of both makes it easier to find the right people for your project. This stands in opposition to native apps, which generate more HR issues. Fist, you have to look for developers with platform-specific skills. Second, at least twice as many people are required to launch your app, which doubles the cost of delivery. Finally, in a native project to make sure both teams work hand in hand, developing a consistent product and keeping deadlines, you must provide for reliable communication between them and keep a closer eye on their management. This further increases the costs of implementation and impacts the product delivery times.

4. Lower Costs

All the above factors contribute to a critical business advantage of React Native over native development - the significantly lower overall cost of building an app. React Native allows you to accomplish the same results as native faster, with smaller teams, and lower HR & admin costs. The framework streamlines not only the coding part but also product updates and delivery to the end user. This generates further cost reductions. Furthermore, RN is fully open-sourced, easily accessible to anyone, and does not require platform-specific IDE, as do native solutions. That saves you the hassle of license fees and grants an easier (and free!) access to development tools and libraries. These efficiencies apply both to in-house app development and outsourcing. So even if you want to leave React Native development to an external software house, the cost of product delivery will be significantly lower than in the case of native apps.

5. Easier Debugging

In terms of debugging, the cross-platform approach tends to be more efficient than native apps. With React Native you deliver the same app for multiple mobile platforms, which dramatically reduces the time and effort required to spot and remove errors. A single fix eliminates bugs on all OSs at once, which provides for consistent behavior across all systems. You get rid of an error once, and you can rest assured that it’s gone from Android and iOS alike. Another crucial difference is that if you are developing a native mobile app, your team will need to use an individual platform’s IDE and learn the ins and outs of the relevant debugger. To fix errors in React Native, they can benefit from some basic, free tools, such as browser dev tools, console.log, or Facebook’s plug-in, Nuclide. Finally, it’s impossible to ignore React Native's hot reloading feature in this context. In the case of native apps, developers have to stop the system to commit bug fixes and then restart it again, which impacts the end user. React Native allows them to perform changes, including error handling, at runtime,

and immediately see the results of their work on the running app. Updates can be later deployed without affecting the user of the app.

Key Takeaways

● Native apps are applications developed for mobile devices (smartphones, tablets, mobile gear, etc.), using a specific programming language and IDEs for each mobile platform (e.g., iOS, Android, Windows mobile). ● Benefits of native applications include: o Taking full advantage of a given platform software, APIs and features. o Providing optimal speed and performance. o Delivering an increased level of security. ● React Native provides a native-like experience, but its code is created and maintained by a single team and deployed to all mobile platforms at once. ● The most obvious advantages of developing with React Native versus native technologies include: o A peerless speed of delivery, up to 300% faster than with native apps. o Immediate updates thanks to the hot rolling capabilities. o New product releases that don’t affect the user experience. o Faster time-to-market. o More efficient and affordable teams. o Easier access to talent. o Significantly lower costs of development. o Easier debugging. ● RN is free and fully open-sourced, it enjoys the support of a vast developers’ community and the backing from the world’s most innovative companies, and it’s based on the most popular programming language in the world.

See Also

1. ‘Top 5 React Native Advantages Over Native App Development’: https://ideamotive.co/blog/react-native-development-advantages/ 2. ‘Mobile App Development: React Native vs Native (iOS, Android)’ https://medium.com/mop-developers/mobile-app-development-react-n ative-vs-native-ios-android-49c5c168045b 3. ‘How To Pick The Right Custom Software Development Company? [Step-By-Step Guide]’: https://ideamotive.co/blog/pick-custom-software-development-compan y/ 4. ‘Comparing the Performance between Native iOS (Swift) and React-Native’: https://medium.com/the-react-native-log/comparing-the-performance- between-native-ios-swift-and-react-native-7b5490d363e2

3. REACT NATIVE VS. OTHER CROSS-PLATFORM SOLUTIONS

In the previous section, we spelled out the main differences between React Native and native apps. As companies increasingly recognize the undeniable advantages of programming apps only once for various mobile systems, the number of tools for cross-platform development is also constantly growing. To help you understand how they differ, we will examine React Native in the opposition to several other frameworks for building multi-platform applications.

The Best = Optimal for You

A word of caution before we dive in. In the same way, as there’s no answer to: “Which one is better? React Native or native apps?”, we cannot rule out one cross-platform solution in favor of another. To each his own. Every company

operates within a unique business context and has various resources at disposal.

It’s not our goal to advocate React Native, but rather to show you all viable options and help you decide which one makes the best fit for your product.

Tools and Criteria

There are dozens of potential alternatives to React Native. Some of them, like NativeScript or Sencha, are quite common. Others are more niche. We will focus on the former, more mature, with a range of use, and strong community support. To create a reliable comparison, we defined a set of criteria for the evaluation:

1. Portability - which mobile devices does a given tool support? 2. Cost - is a particular solution free/open-source or licensed? 3. Documentation - does a given framework offer comprehensive documentation and support? It is crucial especially when you kick off your first project, without any prior knowledge of a tool. 4. Community recognition - we will compare the popularity and maturity of each technology based on the backing from the dev community. 5. Popularity - which companies use a given solution in their apps? 6. Pros & Cons - what are the main advantages and disadvantages of each tool?

Let’s meet our contenders:

Apache Cordova

Apache Cordova started back in 2009 as PhoneGap at an iPhoneDevCamp event in San Francisco. Originally created by a software house Nitobi, the solution changed into Cordova two years later, following the company’s acquisition by Adobe Systems. The new owner also released the code as open source.

Since then, Cordova has become a popular tool for building applications for mobile. It uses CSS3, HTML5 and JavaScript to leverage native functions. Apart from the core functionalities, the framework provides for swift integration with other mobile UI frameworks and external APIs, such as Sencha Touch, Dojo Mobile or jQuery Mobile.

Ionic

Ionic was created in 2013 on top of AngularJS and Apache Cordova mentioned above. It is an open-source SDK for hybrid mobile app development.

The framework allows developers to build their apps using a collection of over 120 native components. Many more can be added thanks to Cordova plugins and TypeScript extensions. Custom components can be created with Angular.

For more information about Ionic check our blog post:  React Native vs. Ionic – Which Hybrid App Development Framework Should You Pick?

Flutter

Flutter is the youngest contender here. It is an open-source software development kit created by Google which came out of beta version in December 2018. The software is used to build native apps in Android and iOS and is a primary tool to be used in designing software for Google Fuchsia, the operating system designed operating on Zircon microkernel instead of Linux monolithic core. Building apps with Flutter will basically feed Google’s new operating system with apps.

Flutter includes a modern react-style framework, a 2D rendering engine, ready-to-use widgets and development tools. These components work together to help you design, build, test, and debug apps. In result Flutter allows to deliver high-performance apps that feel natural on different platforms.

For more information about Flutter check our blog posts:  Is Flutter the Next Big Thing in Cross-Platform Mobile Development?

 React Native vs. Flutter – which Cross-Platform Solution To Choose?

NativeScript

Another free and open-source tool on the list, NativeScript, is mainly using JavaScript for the application logic, with an option to develop any language that compiles to JS, e.g., TypeScript. The framework also fully integrates with Angular and exploits HTML-like syntax for the UI development.

Additionally, NativeScript makes it possible to re-purpose third-party libraries from CocoaPods, Android Arsenal, Maven, and npm.js, without any wrappers. It uses runtime to call APIs in the Android and iOS frameworks with JavaScript code.

Sencha Touch

Just like Cordova, this is an oldie on our list, with the first beta release going back to 2010.

Sencha (or Sencha Touch) fuses web development and mobile app development with an HTML5 framework using JavaScript or Java. The platform includes a number of popular frameworks such as ExtJS or GXT, and it is based on web standards, mainly HTML5 and CSS3. Sencha is a powerful tool, which provides not only for the creation of mobile apps but web applications alike.

Xamarin

Last but not least, Xamarin. As opposed to other technologies listed here, Xamarin does not build on JavaScript but uses the C# language and the .NET framework. To create apps supported by Android, iOS, and Windows, the developers use a single shared .NET codebase and Xamarin dev tools, such as Visual Studio.

Which Tool Is Best for Your Needs?

Once again, there is no ‘number one mobile cross-development tool’, which outdoes the rest by far. The proliferation of these technologies speaks for itself. Each of them, including React Native, has its unique advantages that come with a number of deficiencies. Have a look at our comparison, and think about your requirements and resources. Compare all factors, evaluate them against your business goals and dev capabilities, and take an educated decision.

1. Portability

Cordova iOS, Android, OS X (very limited support), Windows Phone

Ionic iOS, Android

Flutter iOS, Android, Google Fuchsia

NativeScript iOS, Android

React Native iOS, Android, Windows Phone

Sencha Android, iOS, Windows Phone, Microsoft Surface Pro and RT, and BlackBerry devices

Xamarin iOS, Android, Windows, MacOS

2. Cost

Cordova Free & open source, however, some of the tools that leverage Cordova (e.g., Onsen.io mobile app framework or Visual Studio) are paid.

Ionic The pricing depends on the available features.

The minimum package is free (it includes personal account, access to the community forum, and a dedicated dev tool).

Cloud native builds and a greater number of live update deploys can be purchased for $29 per month.

The next pricing plan starts at $120 per month. There’s also a custom package available.

All packages and prices are listed on this website.

Flutter Free & open source.

NativeScript Free and open source for 100 cloud builds/user/month.

Above that tier, it offers two ready-made plans for small and large companies, $19 p/month and $249 p/month, respectively, plus custom pricing.

For NativeScript pricing models visit this page.

React Native Free and open source.

Sencha Sencha’s pricing model can get confusing. The prices of particular packages vary, and depend, among others, on the number of developer and additional features.

The Pro package (up to 5 developers) for ExtJS costs $6,280, with the Enterprise package price at $9,190. The GXT licenses are roughly the same.

Individual developer licenses (1 year) start at $960 for the standard package.

See the full pricing here: https://www.sencha.com/pricing/.

Xamarin Xamarin pricing models are almost equally complex.

Xamarin Studio Community (up to five developers) is free of charge, but reported to be buggy and unstable.

Visual Studio Professional, which makes the best fit for small to medium companies, starts at $539 per year/per user in the cloud deployment. The standard version costs ca. 50% more.

For the lowest Visual Studio Enterprise package, suitable for large-scale projects, you will have to pay $2,569 per year/per user.

Check out the detailed pricing here.

3. Documentation

Cordova

Apache provides quite an extensive documentation for Cordova. It includes instructions on how to develop code for each supported platform, guidelines for creating your first project, directions on building plugins, as well as a library of resources and APIs. The blog provides recent updates about platform releases, fixes and new components.

Ionic

Ionic’s documentation is neatly divided into several useful sections including getting started guidelines, UI and components, APIs, or FAQ. Additionally, developers using the tool may share their thoughts and experiences on the forum, or discover the latest insights by visiting the framework’s blog.

Flutter

Flutter has a great documentation, possibly the best in this comparison - there are plenty of tutorials and samples for users to dig into. It also makes preparing the documentation for the software as easy as possible - it has a well developed Integrated Development Environment for designing, testing and modifying the software. Compatible with Visual Studio Code, Android Studio and IntelliJ.

NativeScript

In its documentation, NativeScript provides detailed direction as how to start with the core development, combine NS with Angular, and build cross-platform components with Vue.JS. Plenty of support is available, especially for those developers who have just started with the tool. They can use the Playground feature to build code and view the results live, display a catalog of sample projects, and browse all available plugins, APIs, and components.

React Native

The React Native documentation is maintained and regularly updated by Facebook. There’s no shortage of reference guides and discussion forums to learn from.

Additionally, Facebook shares a tutorial to help newbies easily kick off their first RN project. All new features and updates are published on the framework’s blog. Developers can also easily access the rich library of components and APIs.

Sencha

For each of its frameworks, Sencha Touch offers separate documentation and ‘Get Started’ guides. These resources are comprehensive and feature, among others, the list of latest updates and changes, basic tutorials, the architecture description, examples, and core concepts. Sencha is also running a blog featuring company news, product insights, and additional resources, and provides the users with a discussion forum.

Xamarin

Xamarin provides a detailed, step-by-step documentation conveniently arranged in component/feature-specific topics, such as App Fundamentals, UI, XAML, and many other. All subjects are covered in-depth and explained in a very user-friendly manner. From the documentation page, developers can also access, e.g., feature samples and example apps, and join the Xamarin University, which is a library of online courses led by Xamarin experts. To use that last resource to the fullest extent, a paid subscription plan is required.

4. Recognition Community

All of the featured mobile cross-platform development tools can boast a large community of users who continuously add to their development. While the sole number of users and contributors to a particular platform should not dictate the choice of technology for your project, it is an important factor for evaluation.

Developer GitHub Stars Number of Other Community Repos (additional)

Cordova Used by ca. 2,500 72 with 4K The most 11% of commits ‘dreaded’ mobile mobile developers development tool by developers.

Ionic 5 million 36,000 202 with 9K 100+ Meetup developers commits Groups

Flutter Fast 52,000 30 - growing popularity, especially on eastern markets (China, India)

NativeScript Estimated 15,500 187 with 5K - at 1.15 commits million in December 2017

React Native React is 71,500 15K commits - no.1 tool for all

developers, loved by 70% of them, and the 4th most commonly used technology

Sencha More than 2 N/A 66K commits - million

Xamarin 1.4 million N/A 147 -

5. Popularity

And how about popularity among business? Let’s go through each of the tools and see which companies use them.

Cordova

Cordova can’t really claim any household names among its users. The platform is mostly used by local startups, SMEs, and open source organizations, which may suggest that it is more appropriate for building simple, low-cost apps. The most popular names among the companies using Cordova include BetRocket, FoodIT, Gweepi, Toucan Toco, or DocEngage.

Ionic

The Ionic portfolio features some well-recognized companies: Untappd (Tinder of the beer world), Nationwide, Sworkit, McDonald’s, or Diesel. For a broader list of apps built with Ionic, go to this site.

Flutter

Flutter is still a new technology, that is fighting for its presence among users. Due to Google’s backup and general versatility and convenience of the technology, the client base is rising, yet there are great brands to come. The fast-growing popularity do Flutter in China and India is worth noticing.

NativeScript

NativeScript has built quite a portfolio of Success Stories. Some high-profile companies who have employed the framework to create their apps include Bosch, Samsung, InfoSys, Target, Zurich, or Volvo, but the list just goes on and on...

React Native

There are tons of companies who use RN. Let’s mention the MVPs, such as Facebook (of course), Instagram, Walmart, SoundCloud, UberEats, Bloomberg, Pinterest, or Skype. This stellar lineup proves that RN performs particularly well in the world of social media and e-commerce.

Sencha

Sencha boasts over 10,000 enterprise customers “including 60% of the Fortune 100.” This corroborates the platform’s reliability and a wide range of applications but bearing in mind its costs, quality comes with a hefty price tag.

Companies using Sencha frameworks include: AT&T, Apple, Associated Press, Canon, Cisco, Deloitte, EMC, Fujitsu, Honda,... and the list continues up to Z.

Xamarin

Xamarin is another tool with an impressive collection of customers. Aviva, Coca-Cola, Cognizant, Fox Sports, Freelancer, JetBlue, Mars, Microsoft, Pearson, to name just a few. A comprehensive list of companies who use Xamarin can be found here.

6. Pros and cons Cordova

PROS

● A wide catalog of plugins. ● Familiar programming languages (JavaScript, CSS and HTML5). ● Integration with various UI frameworks like Sencha Touch, Dojo Mobile or jQuery Mobile. ● The lack of a license fee. CONS

● Some features are only supported on selected devices. ● Notorious performance glitches. Reports of Cordova being too slow, which may be due to a large number of graphics and the architecture complexity. ● Not suitable for large, sophisticated projects .

Ionic

PROS

● Can be used with any IDE or code editor that supports JavaScript or TypeScript. ● Provides a large number of plugins to access native APIs. ● Simple to start with - it only requires the knowledge of JavaScript, HTML, and CSS (and optionally, Angular).

● Plenty of UI components available. ● Very well-documented. ● An affordable option for smaller teams who can leverage the free version. CONS

● As Ionic is using Cordova, it has equally prone performance issues, especially on older devices. ● The frequency of updates is not great, which may create the need to develop custom modules and result in bugs. ● Limited native functionality, which requires custom coding. ● It’s not well-suited for high-end graphics and ultra-fast gaming apps.

Flutter

PROS

● A single codebase for iOS AND Android

● Allows to prototype and iterate easily

● Have the support of tech giant, Google

● Hot reload - developers can see changes in the code in real-time

● State-of-the-art documentation

● Benefits from a rich set of Material Design and Cupertino (iOS-flavor) widgets built using Flutter’s own framework

● Access to native features: Flutter allows to reuse your existing Java, Swift, and Objective-C code to access native features and SDKs on iOS and Android.

● Allows to realize custom, brand-driven designs, without the limitations of OEM widget sets. CONS

● Based on a less popular Dart which has never gained serious community traction like Kotlin or Java

● Lack of community around the framework

● Limited numbers of libraries

● Does not support 32-bit iOS devices

NativeScript

PROS

● A high percentage of code sharing (up to 90%) across iOS, Android and Angular-based apps. ● A free version available with limited cloud builds. ● Because of its embedded support for Angular.js and TypeScript, it’s a framework to consider when transitioning web apps from Angular and Vue.JS to mobile. ● Direct access to the native APIs together with full access to numerous development libraries. ● Runtime code compilation. ● Near-native performance, similar to React Native. CONS

● Poor debugging features. ● Considerable differences between the quality of particular plugins, which may lead to reliability issues and require extra programming work. ● Large app size compared, e.g., to React Native or Ionic, which may create issues in the case of poor connectivity.

React Native For a more in-depth analysis of RN’s advantages and drawbacks, go to  PROS AND CONS OF REACT NATIVE. PROS

● Easy transition for JavaScript developers. ● Near-native performance thanks to the direct access to native APIs ● Excellent user experience thanks to the interaction with native controllers. ● A large number of out-of-the-box features, components, and modules. ● Code reuse reaching 80-90%. ● Hot reloading, which makes it possible to receive live feedback on the changes made. ● A single code base. ● Enormous community backing. ● Completely free and open-source, with Facebook’s support. ● A significantly faster speed of development and app delivery than with some other tools. CONS

● Lack of support for all APIs, which may require custom coding. ● Poor interaction with some native elements. ● May generate performance drops for CPU-heavy apps. ● As it was originally created for iOS, Android features may require some work.

Sencha

PROS

● Built-in native-looking themes for every major platform. ● Support for a wide range of mobile devices thanks to the HTML5 approach. ● Possible PhoneGap/Cordova integration for native API access and packaging. ● Capable of building and maintaining large business applications. CONS

● The last stable released shipped… in July 2015. ● Expensive, with a licensing model that is somehow confusing. ● A limited number of native themes, resulting in custom coding. ● Geared toward enterprise clients, which impacts smaller companies. ● Steep learning curve requires the knowledge of object-oriented programming and several frameworks.

Xamarin

PROS

● Up to 80% code shared across various platforms. ● Performance metrics close to those of Java and Objective-C or Swift for native mobile app development. ● An extensive library of learning/support resources, which enable quick and easy onboarding. ● Support for functionality testing and QA for multiple devices. ● The use of popular programming technologies. ● A complete development ecosystem, with its own IDE and distribution and analytics modules. ● Backed by Microsoft. CONS

● Compatibility issues with many open-source libraries. ● Delayed support for updates, which must be deployed internally. ● A very limited access to open source libraries in favor of proprietary components. ● Requires at least a basic understanding of native languages. ● The free version is insufficient for most commercial projects. ● It ranks among the least popular tools for mobile app development.

Key Takeaways

● There aren’t any winners here. All of the presented frameworks and tools are a perfect fit for some projects but could become a massive overkill in others. ● Most of the above tools except Xamarin are based on JavaScript with HTML5 and CSS styling. React Native requires no HTML, but its own components + JSX. ● All the mentioned frameworks enable simultaneous development for iOS and Android, with some of them offering support for Windows Phone and other mobile devices. ● React Native and Cordova (+Ionic to some extent) are the only completely free tools on our list, regardless of the number of developers and features. For a commercial use of the remaining platforms, you will need to fork out from $250 to even $9K per user per year. ● All of the tools provide extensive, feature-specific documentation with plenty of guidelines, articles, community contribution, and Getting Started manuals. Xamarin adds an extra value with its Xamarin University, a library of online courses. ● Community recognition and customers greatly vary. From startups, through medium-size online shopping and social media businesses, to multinational giants like Walmart and Facebook. Each of the discussed tools caters to a specific group of clients.

See Also

1. ‘React Native vs. Ionic – Which Hybrid App Development Framework Should You Pick?’ https://ideamotive.co/blog/react-native-vs-ionic/ 2. ‘React Native vs. Flutter – which Cross-Platform Solution To Choose?’ https://ideamotive.co/blog/react-native-vs-flutter/ 3. ‘12 Best React Native Companies & Startups Mobile Apps [2019 Overview]‘: https://ideamotive.co/blog/react-native-companies-mobile-apps/

4. ‘Ionic 2 vs React Native vs NativeScript’: http://www.discoversdk.com/blog/ionic-2-vs-reactnative-vs-nativ escript 5. ‘4 Questions to Ask Before Choosing a JavaScript Framework’: https://www.sencha.com/blog/4-questions-to-ask-before-choosin g-a-javascript-framework/ 6. ‘Why and When Cordova is better then React Native?’: https://codeburst.io/why-and-when-cordova-is-better-then-react -native-2519852ae06a 7. ‘What are the advantages and disadvantages of using the Ionic framework, compared to native apps?’: https://www.quora.com/What-are-the-advantages-and-disadvant ages-of-using-Ionic-framework-compared-to-native-apps

4. PROS AND CONS OF REACT NATIVE

Almost 70% of developers know JavaScript. \

[Source: Stack Overflow]

As for React, it is in the top three of the most commonly used libraries. The popularity of JavaScript and React accounts for the fact that React Native ranks among developers’ favorite frameworks. But it doesn’t only benefit programmers. Because of the simplified development and reduced code delivery times, React Native provides numerous advantages to business owners and project managers. In this section, we will look closely at what makes RN so widespread, and investigate some of its downsides, too.

React Native Advantages

1. Faster Development

From a business perspective, this is the primary reason why so many companies are turning to React Native. Since the framework allows up to 90% code reuse between different mobile platforms, the development time and time-to-market for apps become dramatically shorter.

In addition, RN provides numerous pre-built components that further expedite the development process. Facebook keeps releasing new updates and the project community gets growing, which also adds to the efficiency of coding.

2. Brand Consistency

With RN, developers build only one app and deploy the code to multiple mobile operating systems. This translates to delivering a consistent product across all platforms, which is crucial from a business perspective, as 63% of consumers expect brands to deliver a consistent experience.

3. Small Teams

By delivering cross-development capabilities, React Native allows companies to downsize their teams. Where native development requires two separate

groups of designers, programmers, Q&A specialists, and so on, RN only needs one.

Smaller engineering teams usually outperform large ones, allowing companies to decrease the overall cost of development and accelerate product delivery. They also tend to be more involved in the project and display a greater potential for innovation.

4. Large Pool of Developers to Choose From

JavaScript is one of the most widely used programming languages. Its vast range of applications, popularity, and maturity allow programmers to quickly learn the language.

As React Native uses JS, the pool of specialists who can build React Native apps is constantly growing. For that reason, if you need to kick off an RN project, you won’t struggle with finding developers with the right set of skills.

5. Truly Native Look & Feel

Although React Native is a cross-platform development tool, one of its greatest assets is the native experience it offers. Its components map 1:1 with native development artifacts, which results in a genuine, native look & feel, indistinguishable from that of native apps. This benefits the users with an exceptional user experience and rich, interactive UI.

RN is also compatible with native software and can seamlessly integrate with the existing code. This makes it perfect not only for new app development but also for adding quick extensions to native applications that are already in place.

6. Integration with 3rd Party Apps

The collaborative potential of RN is another factor that adds to the efficiency of development of the framework. Instead of building some features from scratch, developers may look for an existing API that delivers the desired functionality, and reuse it with the React Native code by making calls to the Web API endpoints. That’s another huge time saver, which clearly demonstrates the framework’s potential.

7. Automatic Updates

React Native allows changes in the code to be applied on the fly, without the need to recompile and restart an app. This feature, known as ‘hot reloading’ is probably one of the most favored by developers.

With hot reloading, a developer can work on a new app version or apply UI tweaks without interruptions. All changes will take an immediate effect. What’s more, the functionality prevents developers from losing the state of an app while injecting changes. Hot reloading not only saves programmers’ time but also boosts their productivity by eliminating waiting time and app downtime.

8. Intelligent Debugging

As Grab’s Aijin Yuan stated in his talk at one of React.js/React Native meetups, “A great software developer must be a great debugger.” With React Native, debugging gets easier, as the framework lets developers take advantage of intelligent tools and error reporting.

RN offers several debugging methods, including easy-peasy debugging with Chrome DevTools. In some cases not supported by Chrome, console logs can be traced and used to eradicate errors. Since there are no code branches, but a common database, developers benefit from shorter debugging time. Hot reloading additionally streamlines the bug fixing process as errors are corrected at runtime.

9. Code Readability

React Native applies the declarative programming paradigm, which focuses on specifying the intended results instead of providing guidelines as to how to achieve them. This stands in an opposition to imperative programming, which provides commands to a computer to perform.

One advantage of this approach is a more understandable and easily-scalable code. React Native is highly readable, which makes it easier to learn, especially in the case of less experienced programmers.

Source: https://facebook.github.io/react-native/

10. Expanding Community

Last but not least, thanks to the fact that React Native provides a positive coding experience, it enjoys massive support from the developers’ community. The number of programmers who turn to RN is continuously on the rise, and since its launch a few years ago, the framework has become one of the most frequently used tools for mobile app development.

RN is open-sourced, which means anyone can contribute with code enhancements, documentation, and new components. What’s more, the

project receives constant support from Facebook so that it’s continuously improving.

React Native Disadvantages

There are no ideal tools and frameworks, and React Native is no exception. Let’s analyze some of its drawbacks:

1. Lack of Support for all iOS & Android Features

While React Native allows developers to build mobile apps that work on iOS and Android, it does not support ALL features developed for these platforms. There are some modules missing, which require custom development. Other features may be underdeveloped or obsolete, so developers need to build them from scratch.

2. Lower Performance than Native Apps

Although React Native delivers numerous advantages of JavaScript, it inherits some of its deficiencies. JavaScript is an interpreted language with a notoriously sluggish performance, which impacts RN, too.

However, as JS is running on the client’s, not server’s side, in a browser, its speed greatly depends on the hardware and software where it is running, as well as on the code quality. A notable amount of optimization can be achieved through skillful programming. Finally, while cross-platform apps’ performance will be always inferior to the speed of native apps, most of the times the difference will be insignificant, and won’t impact the user experience.

 We will discuss the performance aspect of React Native in more details in section REACT NATIVE PERFORMANCE.

3. Owned by Facebook

Some companies voice their concern over Facebook’s control of React Native. Although the social media giant invests significant resources to keep the framework up and running, the ownership may pose a threat to RN, as Fb may want to kill it any time.

Although some developers still believe this works to RN’s disadvantage, currently over 60% of React Native code comes from open source contribution from independent developers. So it seems like this con is losing its impact.

4. Some Level of Customization Involved

React is as close to the native experience as one can get, but it’s not a native technology. Some level of code customization to deliver a uniform user experience across platforms will be always needed.

Some native features and components cannot be developed using RN alone, and require a detailed understanding of each platform. This particularly applies to Android apps and 3rd party components integration. As the latter are external, they might include bugs and glitches or fail to deliver the exact functionality required. Although RN allows for smaller teams of software specialists, these need to be highly-qualified, versatile experts who won’t shy away from the pains of customization.

Key Takeaways

Why Developers Love React Native:

● Highly-readable ● Easy to learn ● No code recompilation and app restart ● Broad community support ● One code, one repo for multiple platforms

Why Companies Love React Native: ● Reduces time-to-market ● Cuts down development costs ● Smaller, more efficient teams ● Extraordinary user experience ● Consistent brand across multiple platforms What to Improve?

● Catch up with some native modules and features ● Strive to enhance performance ● Increase the quality and reliability of 3rd party components

See Also

1. ‘React Native Development Advantages’: https://ideamotive.co/blog/react-native-development-advantages/ 2. ‘What are the downsides of using React Native for building iOS apps? Are there any performance costs?’: https://www.quora.com/What-are-the-downsides-of-using-React-Native -for-building-iOS-apps-Are-there-any-performance-costs 3. ‘React Native Debugging Tools’: https://codeburst.io/react-native-debugging-tools-3a24e4e40e4 4. ‘A Guide to Using a Third Party API with React Native’: https://medium.com/@sharonyun/a-dummys-guide-to-using-a-third-p arty-api-with-a-react-native-app-76b537190fd6 5. ‘How an Android developer dived into React Native and survived’: https://proandroiddev.com/how-an-android-developer-dived-into-react -native-and-survived-cc6531d327d4

5. WHEN TO USE REACT NATIVE?

Software developers can choose from dozens of programming languages and paradigms, and a myriad of development frameworks and tools. They all exist for a good reason. In software projects, there’s no ‘one-size-fits-all’ solution. React Native is no different. Despite rapid development, platform agnosticism, and other unique benefits it delivers, there will be applications where it’s not the most preferable framework.

What to Consider When Choosing a Technology Stack?

In mid-2018, the news broke that shook the entire mobile software development world. Airbnb, an online hospitality giant, decided to sunset React Native in their projects. The decision behind the company’s move involved a variety of factors, but in the end, Airbnb resolved that React Native was not suitable for their unique needs. Despite this staggering announcement, the vast majority of Airbnb developers were satisfied with the framework and would consider it for a new project. The Airbnb case proves that even the most efficient programming tools can sometimes fail to deliver on a particular business promise.

That’s why when making a decision about technology stack, it’s crucial to examine a number of perspectives to ensure there’s no mismatch between the company’s goals and resources and technological challenges and opportunities.

Let’s see what factors you should consider when choosing the right tools for your project:

● What chief benefits do you hope to achieve? Is it delivering the ultimate user experience, spending less on the project, shipping your product ultra-fast? List all factors that are of utmost importance from the business perspective, and evaluate how a given technology performs for each. ● How well-versed is your team in the programming paradigm? Note that this is a question of paradigm, not language. As long as you are staying within the same paradigm, learning a new language or framework is not that challenging, though, of course, it will require some time. Do you have existing resources who can pull the project off with your technology of choice? Or will you need to outsource or hire? ● How big is the developers’ community that uses the language/framework? Is it a new technology? Does it have a solid community support? This is an important aspect of your choice, as your dev team may struggle to develop

code for an immature technology. Without a large catalog of libraries, ready-made modules, and documentation, the development will drag on and the end product may turn out buggy and flaky. ● How many companies have used the technology so far? How many companies deliver their apps using the tools of your choice? Are those innovative businesses? The widespread use of a language or framework in the industry is an indicator of a trend, but also a validation of the technology’s maturity and reliability. See your competitors and industry leaders and check what technologies they employ.

When to Use React Native?

Let’s have a look at some use cases where React Native is a strong candidate for the implementation. This list is, by no means, exhaustive, and it only presents some examples of applications that make the best fit for RN.

1. E-commerce Mobile users in the USA spend over 3.5 hours on their devices daily. Apps make 90% of that time, and e-commerce applications are in the lead when it comes to mobile usage. They are of prime importance for retailers. It’s enough to mention that in 2017, mobile apps accounted for 44% of their total mobile revenue. Some of the reasons behind the effectiveness of mobile apps in Internet sales include 24/7 availability, highly-personalized experience, user-friendly interface, and time efficiencies. React Native is a perfect choice to deliver these benefits. Thanks to React Native, e-commerce outlets can build responsive apps with easy navigation fast, provide quick updates, and maintain brand consistency across different devices.

2. Social Media

This is another great use case for React Native application. When 95% of Facebook users access their feed on mobile, mobile apps are the way to go for social media networks. Be it Facebook (of course), Instagram, Pinterest or Tencent QQ, social media apps should provide an impeccable user experience, and be fast, responsive, and easily scalable. RN offers all of these features. The cross-platform development capability is the crucial success factor here. Bearing in mind the fierce competition between Android and iOS, a social media app has to cater to the needs of both, without any lags between versions for one vendor and another.

3. JavaScript Based Apps JavaScript is the native language for web browsers, which enjoys a massive following from the developers’ community. It’s quite easy to learn, simple to implement and supports client-side processing. Furthermore, it is a powerful and mature language. There’s a high chance that you already have a bunch of developers who can code in JS. If you would like to use these resources, React Native is the framework of choice to capitalize on that expertise in mobile app development. If you expect to develop an app in JavaScript, consider RN.

4. Integration with Native Code One of the greatest assets of React Native is that it can be fully-embedded into the native code. So you may still want to develop the core app in Objective-C, Java, or Kotlin, but integrate RN to implement the About page, FAQ, or a single screen. The advantage? Again, shorter time to deliver the feature, without the need to code twice and compromising on the native flow. 5. Rapid Development in Short Iterations Wherever time is of concern, and you need to ship your product quick to all platforms, React Native outperforms native development. It is well-suited to develop compact projects in small, nimble teams, where it significantly improves the speed of delivery. Because of its ability to commit changes ‘live’, with no code recompilation, React Native is quite powerful when your app requires frequent updates in short iterations. Thanks to RN, they won’t affect the user.

When Not to Use React Native?

How about examples of apps where React Native might not be the best choice?

1. Complex Gaming and Visualization Because RN requires some updates to catch up with its native counterparts, employing it in complex, feature-heavy projects may not be the best solution. Sophisticated mobile games and apps with extensive visualization features illustrate such a case. They provide a massive amount of features, involve substantial user interaction, and require a high level of customization. On top of that, they are calculation-intensive. For apps of this kind, native languages and frameworks work best. However, React Native is catching on. Let’s mention Discovery VR, a virtual reality headset integrated with an app that transports the users to the most exciting places on the globe. This product with complex features including 3D technology and rich visualization has been developed with RN.

2. Platform-specific Apps Of course, if your app is only (or mainly) to be distributed on a single platform, there’s no reason to resign from native development. Use frameworks that are purpose-built and develop a highly-performant, native code. Using React Native in such a context would be unreasonable. Remember, though, that even with a platform-specific project, you may still be able to incorporate React Native modules into it, to speed up the development and ship new features quicker. 3. Always-on Applications When building messengers or rich multimedia apps that have a multitude of processes running in the background, you may be better-off with native development. React Native is still in its infancy, despite the broad community support and Facebook’s continuous investment in the technology.This may result in code inconsistencies and the lack of ready-made modules, and create the need for costly workarounds and customization. Small, dynamic apps are seldom affected, as they usually use fewer components. However, for larger projects

with a ton of background processes, these inefficacies of RN may create a bottleneck. Again, this is not always the case. This year, Microsoft released a new, improved Skype… built on React Native. The motivation behind that step was “to bring customers the best experience possible.”

Key Takeaways

● React Native is a perfect tool for building e-commerce and social media apps that rely on the speed of delivery, efficient interface, and powerful design. ● When planning the development of a mobile app in JavaScript, React Native is the way to go. ● RN outperforms native development in the delivery of less complex, agile apps in short iterations. It is particularly effective when you don’t want the user to be affected by frequent updates that enforce app restart. ● Native apps can incorporate React Native components to accelerate development while providing a seamless user experience and robust performance. ● The applications where React Native may not be the optimal choice include feature-heavy gaming and multimedia apps with a lot of background processing, applications designed for a single platform, and apps that are always running. ● Even if your app is fairly complex, but you’d like to tap into the existing skills on your team and accelerate a project kick off, React Native may still be a viable option. Experienced and highly-qualified developers will be able to resolve the framework’s deficiencies and build powerful solutions with RN. See Also

1. ‘Why I should not use React Native?’: https://www.quora.com/Why-should-I-not-use-React-Native 2. ‘To go or not to go React Native’: ‘https://hackernoon.com/to-go-or-not-to-go-react-native-e6f712739701

3. ‘ Building An E-commerce Search App with React Native’: https://hackernoon.com/building-an-e-commerce-search-app-with-rea ct-native-2c87760a2315 4. ‘ Building a Mobile App in 10 Days with React Native’: https://medium.com/@austinhale/building-a-mobile-app-in-10-days-wi th-react-native-c2a7a524c6b4 5. ‘The Crucial Role of E-commerce Mobile Apps for Sales Enhancement’: https://www.ecommerce-nation.com/crucial-role-e-commerce-mobile- apps-sales-enhancement/

6. REACT NATIVE PERFORMANCE

Mobile application performance can make or break every product, whatever the app’s purpose. It’s enough to mention that about a half of all mobile app users exit an app when a single image doesn’t load fast enough! When your users get affected by poor performance, they will not only abandon the product but switch to a competitor. Therefore, app stability and seamless performance are essential for a positive user experience and have a direct impact on revenue.

86% of marketers believe that improvements in mobile app and site performance drive an increase in customer satisfaction.

[Source: Think with Google]

In this section, we will investigate React Native performance and see how to improve end-user experience by optimizing the code.

How to Gauge a Mobile App Performance?

There are various metrics that you can use to track and improve your app performance. Some of the most crucial include:

● Time to First Byte. Time to First Byte (also TTFB) defines how fast an app is able to launch and obtain the first response from the server. 0.1-0.5 seconds is a decent result, anything over can already annoy the users. ● Load time. This is the time that elapses between the moment when users launch an app and start interacting with it. Anything above 1-1.5 second will be considered sluggish by modern users. ● The number of simultaneous requests. Specifies how many transactions or requests can be handled by an app at once, without degrading the performance and affecting the user experience.

● Crash rate. This metric is used to define the average number of times when an app crashes per the number of loads. Ideally, you should be aiming at 1-2% rate. ● Resource consumption. How much device horsepower does your app need to work without any glitches? This category includes elements such as memory consumption, CPU usage or battery wear.

What Can Go Wrong with React Native?

As discussed earlier, cross-platform performance will always be second to that of native apps. However, as most mobile devices today have multi-core CPUs with plenty of RAM, that discrepancy becomes negligible to the user, especially with React Native, since it directly talks to native APIs.

Yet the framework still comes with a lot of deficiencies in the performance area:

1. Navigation between app screens.

At times, it can get pretty clunky and lead to app crashes due to the inconsistencies between RN and native navigation elements. This issue especially refers to state-heavy screens with background state updates. When a user invokes a complex screen with multiple components, network calls, and animations, RN apps may suffer a substantial delay as compared to native apps.

How to fix that?

Currently, RN developers can take advantage of dozens of solutions to improve navigation by designing the optimal navigation logic, the sequence of nested screens, and mitigate some of the issues.

2. Memory leakage, especially on Android.

Leaks are mostly triggered by a large number of complex background processes. Another cause may be a data queue on the bridge between native and RN components. Sadly, React Native apps may leak memory even in simple utility applications.

How to fix that?

By diagnosing the source of the problem and addressing it. You can use profiling tools on Android Studio and Xcode to trace memory consumption runtime. Then, see how much memory is allocated to the heap and identify the cause. Look here to see this process in a real-life application.

3. Application size.

Finally, React Native can bloat the application size as it utilizes numerous APIs, third-party libraries, and native components. They speed up development, but an overload of these elements may leave an app heavy and cumbersome.

How to fix that?

There are a number of ways to make your React Native app more nimble. Compress images and graphics, optimize native libraries, or convert JSON data into static object IDs. This will already make a difference.

9 Steps to Optimize Your React Native App Performance

1. Take out redundant features.

Simplicity for the win! Display only data and components essential for the user to take a given action. Bells and whistles can become an aggravation as they lag React Native performance and drag out the load time.

2. Reduce the load on the bridge.

To communicate with the native components, React Native uses a bridge. If you are sending a lot of data to it, the UI may freeze. Custom animations, bulky files, maps – they can negatively impact your app performance.

Monitor traffic over the bridge with MessageQueue. If possible, try to relocate heavy components from the JS thread (where RN offloads complex functions by default) to the main thread. This should keep the UI running even when the JavaScript thread is busy.

3. Simplify JSON data.

When communication is passed through the bridge in React Native, it’s retrieved in the JSON format and needs to be serialized and deserialized every time. This may result in heavy CPU usage when native and JS scripts are synching. That, in turn, causes a major delay in the app performance.

There are ways to bypass the performance challenges related to JSON. Aim at optimization of the fetched data and avoid storing raw JSON data locally. You

may convert JSON data schemas into more scalable and performant object IDs using third-party libraries.

4. Optimize rendering.

Beware of wasteful re-renders. React Native re-renders every child component each time the parent is updated. You want to avoid excess renders as they create bottlenecks on the bridge and may ultimately freeze the UI.

You can measure how many times your components are rendering by adding a console.count call to your rendering method. The React.PureComponent and shouldComponentUpdate methods will help you get rid of some of the unwanted re-rendering.

5. Use image caching.

Working with images in React Native requires a little bit of optimization. Reduce image size and compress them. Allow cache to accelerate image download (note that image caching is only supported on iOS as of now). Use react-native-cacheable-image or react-native-cached-image to implement that feature. To avoid memory leaks and performance lags, convert .jpg and .png formats to WebP. This can speed up your image loading time up to 28%.

6. Reduce app size.

Performance efficiencies can be obtained by simply reducing the size of our app. How? Use only stable third-party libraries and components that are absolutely essential for the app. Compress any graphic elements. Get rid of JSON data by converting it into static object IDs. Finally, optimize native libraries for performance.

7. Avoid console.log statements

Console.logs are useful for debugging, but storing these statements in large numbers will impede your app’s performance. Before you release your code to production, clear all of them. You can use babel-plugin-transform-remove-console to easily do that.

8. Use simple selectors

Avoid heavy calculations that can slow down the general app performance. One of the easiest ways to do that is to use simple selectors whenever it’s possible.

Perform calculations on your back-end response in a service, and call that service on the response. Use the Reselect library to memorize the response from a selector if the result hasn’t changed. This will help you prevent running complex calculations that have already been processed.

9. Resolve multi-threading issues.

React Native faces major challenges when it comes to multi-threading. It can only process one component at a time, therefore it’s not an ideal solution to implement apps running parallel processes (e.g., video streaming and a live chat). To tackle that issue, you can write custom code for native extension (in Java, Objective-C, or Swift), but still great caution is advised, otherwise, the app may crash.

Key Takeaways

● Mobile app performance directly affects user experience, which makes it critical for the success of your app. ● There are various metrics to gauge the performance of your app. Some of the most common include Time to First Byte, load time or resource consumption. ● React Native offers a native-like performance, but it comes with numerous limitations, too. Developers complain about defective navigation between screens, memory leaks, and large application size. ● The framework is constantly being improved with new updates, components, and libraries. Experienced developers can mitigate or eliminate practically every issue. ● Data compression and conversion, image caching, feature optimization – these are straightforward fixes that will immediately help improve RN performance. Some issues (like navigation or multi-threading) may require custom code.

See Also

1. Official React Native documentation: https://facebook.github.io/react-native/docs/performance 2. ‘Thousand Ways to Navigate in React Native’: https://medium.com/the-react-native-log/thousand-ways-to-navigate-i n-react-native-f7a1e311a0e8 3. ‘Tips for improving performance of React Native apps’: https://www.bram.us/2018/06/14/tips-for-improving-performance-of-r eact-native-apps/ 4. ‘Stats That Prove The Importance Of App Performance Testing’: http://info.localytics.com/blog/3-stats-that-prove-the-importance-of-ap p-performance-testing

5. ‘6 Simple ways to speed up your react native app.’: https://codeburst.io/6-simple-ways-to-speed-up-your-react-native-app- d5b775ab3f16

6. ‘Our React-native experience at Drops (so far)’: https://itnext.io/our-react-native-experience-603e3343730 7. ‘React Native Performance: Major issues and insights on improving your app’s performance’: https://www.simform.com/react-native-app-performance/

7. REACT NATIVE APP DEVELOPMENT PROCESS

You have an idea, a vision of your new mobile app, or a tangible business requirement. Now, how do you move on with the actual development towards the end product? Probably, there are various ways of delivering a React Native project. We believe that it should be implemented with Agile Methodology.

Why Agile?

Your time is precious, and you would like to see the result of our work as soon as possible. Time-to-market is critical here! At the same time, however, you expect high-quality results and maintaining some level of control over your product. With Agile, you’ll get the entire package!

In Agile, a project is divided into small, manageable chunks, with defined milestones, so that you can easily track its progress, provide regular feedback, and contribute to the final outcome.

To streamline the exchange of information and provide you with a high level of engagement, you are welcome to participate in internal meetings and communication. As agile promotes full project transparency, even if you don’t have time to get involved at some stage, you can review the results any time. What’s more, with the continuous development, new updates and improvements are steadily applied in your app, so that you understand what you’re paying for!

We think it makes perfect sense, do you?

Stages of React Native Development

Depending on the scope of work, and your requirements, a typical React Native project can last from a few days to several months. Whatever the case, there are always certain stages of the process that remain consistent. We will explore them in this section.

This section provides you with a high-level sequence of steps for a mobile app development project. But quality app development process is more sophisticated.

Download our whitepaper to view the details of each stage, learn more about Agile, and see what tools are used for time tracking, budget monitoring, and product documentation.

1. Choosing the Right Company for Your React Native Project

Assuming you don’t have the relevant resources to create your app in-house, you will either have to hire a dev team or outsource the work. Here’s how best to approach this step: 1. Make sure you understand the software development process, even if your business has nothing to do with programming. This is important so that you know what results to expect, what roles are involved in app delivery, and who’s responsible for which task. 2. Specify your budget and timeline. In order to look for a company who will implement your app, you should know how much you can afford. 3. Begin the search. Some recommended resources to look for React Native companies are Clutch.io, Wadline, or Crunchbase. Check each company’s technology stack and compare customer reviews. 4. Create a shortlist. Choose 5-8 companies who seem the most trustworthy. 5. Verify each selection. Go to their websites, check the case studies and testimonials, explore social media channels. See who best corresponds with your goal and resources. 6. Contact them. When you’ve reduced your choice to two or three, call each of them, discuss your project, and ask for an evaluation.

7. Make the final choice. And move to the next step.

2.Understanding the Context. First Meeting

Once you’ve selected the development provider, it’s time to get to know each other. The company should propose a free-of-charge meeting or a discovery call to make sure you understand each other and make the right fit. During the meeting/call, expect to hear some of the following questions (and more!): ● Tell us about your business and industry. ● What is your product for? What user needs it addresses? ● What is your experience with software? ● What product assets (brief, sketches, mock-ups) have you got at this stage? ● What is the estimated budget and timeline for the project? Be involved in the discussion and specify as many details as possible. The more input you provide, the faster the implementation. What outcome can you expect from such a call? The company should prepare a general action plan with an outline of the next steps. From a business perspective, this is also the moment when you should already have a Non-Disclosure Agreement in place. Ready for the next step?

3.Straight to the Point. Project Estimation

You have shared project details with the outsourcing partner during your first interaction. It’s time to talk numbers now. In the next stage, you meet in person or remotely to discuss the project evaluation. To estimate your project accordingly, you should go through 1-3 meetings/calls where you work on the following aspects of your product: ● What’s the main purpose of your app, and the possible use cases? ● Which functionalities are critical, and which are secondary? ● What technical, legal, or marketing issues can we foresee at this stage, and how we can mitigate them? ● What will be the best system architecture and technology to deliver your features?

These and other questions should result in a clear-cut product specification and estimation of the project delivery time and costs. When both sides are happy with the results, it’s time to sign the contract and kick off the delivery!

4.Getting Things Done. Development

The development phase in an agile project typically involves a lot of interaction between you and the supplier. There are three main types of meetings throughout the Project Development phase: ● Scoping Sessions ○ These meetings are devoted to discussing a particular feature of your app. ○ They usually occur every 1-3 months throughout the development phase, but this can vary. ○ During each session, the current state of work is presented. ○ Some of the roles present at each session include developer, designer, and project manager from the dev team and the product owner on your end. ● Roadmap Planning ○ This meeting also happens once every 1-3 months. ○ The aim is to review and plan all tasks required to complete a major milestone and come up with a detailed action for the following weeks. ○ During the Roadmap Planning, next steps are prioritized and scheduled. ○ Your participation is crucial so that you can maintain control over the project delivery. ● Weekly Sprint Meetings ○ The development work is delivered in weekly iterations, called sprints. At the end of each sprint, there’s a summarizing meeting. ○ At the meeting, the team provides an update on the progress of development and makes a detailed plan for the next sprint. ○ Weekly Sprint Meetings are a chance to review the technical aspects of the project, as well as to evaluate the workflow and communication between the parties.

5. Delivery

Your product is ready to ship! But it’s not the end of the development story. Users will come back with some feedback and they may request new functionalities and features to be included. You may also need that there’s time to optimize the solution at some point. A well-designed app will make it easy to implement updates. Thanks to React Native’s unique features, you can ask the development team to work on optimizations any time in the way that does not affect the end user experience.

Key Takeaways

● When evaluating the company to develop your product, make sure they work in Agile. ● Remember that your involvement and assistance with the development decreases the time & cost of implementation. ● Your understanding of the software development process streamlines the communication between you and your services supplier and helps attain optimal results. ● The more questions a company asks, the better. This proves their experience and readiness to take your app to the next level.

See Also

1. ‘Ideamotive’s Development Process Explained’: [LINK TO THE WHITEPAPER] 2. ‘Building a Mobile App in 10 Days with React Native’: https://medium.com/@austinhale/building-a-mobile-app-in-10-days-wi th-react-native-c2a7a524c6b4 3. ‘How To Find Top React Native Development Company? The Ultimate Checklist’: https://ideamotive.co/blog/how-to-find-react-native-development-com pany-checklist/

8. THE ECONOMY OF REACT NATIVE

Let’s face it. Mobile apps are made by businesses whose main goal is to generate profit. Time and costs savings are among the main drivers behind the React Native adoption, so in this section, we will look at some of the statistics that exemplify the framework’s efficiency.

MOBILE APP USAGE ● Smartphone users spend 89% of their time using mobile apps. ● Men spend 29:32 hours per month on mobile apps alone. For women, the number is even higher, at 30:58. ● In 2018, 52.2% of all worldwide online traffic was generated through mobile phones, up from 50.3% in the previous year. ● In 2017, 95.1% of Facebook’s users accessed their accounts on mobile. For Twitter, this number was 85%, and for LinkedIn - 60%. ● According to Google, over 40% of online transactions are made on mobile. ● The most popular categories for mobile app among the users are Tools, Communications, and Video Players and Editors for Android, and Games, Business, and Education for iOS. ● 35% of people who browsed products on their phone spent more than they expected in the store.

MOBILE APP REVENUE

● In H1 2018, App Store and Google Play users spent a combined $34.4 billion, a growth by 27.8% as compared to H1 2017. ● App Store Revenue in the first half of 2018 reached $22.6 Billion. ● The mobile app market is expecting a 385% growth rate through 2021. ● Before 2021, mobile e-commerce sales may reach $3.5 trillion. ● Mobile accounts for 87% of Facebook’s advertising revenue. ● 350 billion mobile downloads are expected in 2021. A growth from 197 billion in 2017. ● As Google reports, nearly 60% of smartphone users are more likely to buy from companies whose apps customize information to their location.

REACT NATIVE FACTS

● Cross-platform users spend 2.2 times more than single-platform users. ● JavaScript is the most commonly used programming language, the sixth year in a row. ● Almost 30% of developers worldwide use React. Only Node.js and Angular are more common. ● React is the number one framework developers say they most want to work with. ● It is estimated that over 828,000 websites globally have been built using React Native so far. ● The React Native repository has over 15k commits and over 71k stars. ● React Native can help companies reduce the development cost by 30-40%.

Hello, world!

; import React, { Component } from 'react'; import { Text, View } from 'react-native'; class WhyReactNativeIsSoGreat extends Component { render() { return ( If you like React on the web, you'll like React Native. You just use native components like 'View' and 'Text', instead of web components like 'div' and 'span'. ); } } JSX produces GUI outcomes in React, as it describes how every component (see the next item) should like, what size it has, where it’s placed, etc. JSX is object-oriented and statically-typed language. Although it is optional for creating React code, it provides speed and optimization. To start with JSX, visit this page.

COMPONENTS

The basic React building block, a component is a single element of the Graphical User Interface. Every element you can see in the GUI (button, text block, image, etc.) is a component. The component logic is written in JavaScript, without using any templates. Read more about React components here.

STATE

Components are governed by two properties: state and props. While props remain constant throughout a component lifecycle, state controls stateful components that can be updated and removed. Here’s a basic example:

class App extends Component { state = { characters: [ { 'name': 'John', // the rest of the data ] };

Learn how to use state from the official React documentation.

PROPS

Props are parameters (‘properties’) used to customize your components. The primary application of props is to pass custom data to a component (using a naming convention quite similar to HTML tag attributes) and trigger state changes. Props are read-only. const Dumb = (props) => { return (

{props.oursProps}

) } More extensive information about props is available here.

START WITH REACT

● If you’re an absolute beginner to React, check out this page that will help you kick off your first React project in no time. ● This article is another helpful resource that will help you build components in React. ● You can also learn more from the official documentation and tutorial. ● Thinking in React is a well-known and valuable resource.

How to Learn React Native?

Assuming that you understand the basic principles of React, we can discuss a step-by-step approach to mastering React Native. There are countless methods and pace of learning depends on a ton of factors: your current knowledge of frameworks, languages, and tools, your individual learning style, the time you can spend on learning, etc. Treat our tips as suggestions and see what works best for you. Good luck!

PREREQUISITES

Different developers, different views, but here’s what we think is conditional to starting with React Native: ● Basic understanding of React. ● Fundamental knowledge of JavaScript and programming. ● Familiarity with the Document Object Model. ● General understanding of HTML & CSS. ● Understanding of mobile development and its basic principles.

THE LEARNING PROCESS

1. Install React Native on your machine. RN’s Getting Started documentation will guide you through the process. 2. Study several React Native apps. Analyze the code closely and look for patterns. This page is a good source of different applications that you may use for this purpose. You may also use a React Native UI toolkit, such as React Native Elements. 3. Read through a couple of tutorials to understand app creation step-by-step. You can start with raywenderlich.com. Another good source is React Native Express. 4. Collect your tools. You’ll need several basic modules and utilities to kick off: ○ Redux - Redux is a JS library for managing application states, which will help you create stable apps and run them in all environments (client, server, native). ○ Selectors - Selectors take Redux state as an argument and return data to pass to the component. Download reselect, which is a selector and memorization library for Redux. ○ Test tools - for testing, Facebook uses Jest, but there are other testing libraries out there as well. ○ Utilities - as per utilities, think about components you may need for your sample app. For a basic app, these may be splash screens, radio buttons, page views, and lists. Browse GitHub and retrieve all necessary tools. More useful developer tools that will help you speed up the delivery of React Native components and tackle navigation issues are provided in this article.

5. Start your first project. As terrifying as it may sound, it’s high time to write some code! To make this task easier, use some boilerplate project, such as this one, and start building your own. 6. Learn, learn, learn. The Internet is chock-full of valuable videos, posts, and guides to grow your React Native skills. Use them to make your job easier and stay up to date. Here’s a great collection of resources to start with.

LIBRARY OF RESOURCES

In this section, we have listed some more resources that will help you further improve your React Native skills.

ONLINE COURSES ● React Native Beginner Course, Lynda.com (paid) ○ This hands-on, total beginner source follows a pure React Native approach to help you get acquainted with the framework. No React is covered here. ● The Complete React Native and Redux Course, Udemy.com (paid) ○ The course provides the core information about React Native and Redux for complete beginners. With over 80 K students enrolled, it offers a good value for money and promises to help you build your mobile apps ridiculously fast. ● React Native Katas, Github (free) ○ This item is slightly different. Not a course, but an interactive, practical course for learning design and styling in React Native. Might be better suited for developers who have already developed some React Native code. ● React Native Crash Course, YouTube (free) ○ YouTube is a mine of information and resources on React Native. This crash course goes through the framework basics, structure, and essential components in 90 minutes. ● Multiplatform Mobile App Development with React Native, Coursera (paid) ○ By completing this course, you will actually get a credit from the Hong Kong University of Science and Technology. Tailored for developers at an intermediate level, the course focuses on React Native as a multi-platform development framework. ● From React to React Native, Udemy (paid) ○ That’s the right choice for all developers who have already mastered React and would like to brush up on their React Native knowledge.

BLOGS React Native enjoys a large community of supporters around the world. As a result, there’s an abundance of blogs and websites that provide you with the indispensable knowledge about the framework.

Let’s list several popular examples. You will find more in this post.

● Facebook’s React Native Blog - when you develop in React Native, you mustn’t miss this one. Latest releases, updates,

tons of useful tips, tricks, and workarounds. This blog is your essential developing resource for RN. ● Ray Wenderlich - we have already mentioned this site named after its creator, Ray Wenderlich, who is well-known to everyone in the software development space. On this website, Ray shares over 3,000 tutorials for developers who would like to get the knack of various languages and frameworks, including React Native. ● Gosha Arinich - Gosha is a freelance developer who focuses solely on React and React Native. His articles include practical tips, real-life examples, and other valuable information all from an insider’s perspective. ● Made with React - it’s not a blog per se, but a collection of articles, resources, and applications that use React or RN. It’s worth checking in on this site from time to time.

BOOKS ● The Road to learn React: Your journey to master plain yet pragmatic React.js - if you’re a complete React beginner, consider this book. It will teach you the absolute fundamentals of the language and help you build your first React applications.

● Learning React: Functional Web Development with React and Redux - this is a primer on building effective user interfaces with React JS, mostly focusing on developing powerful components. It’s recommended if you already understand some basic React concepts.

● React Design Patterns and Best Practices - another guide for intermediate React users, it explores React components and patterns. By providing easy to follow examples, it allows you to polish your React coding skills to build beautifully designed, performant apps. ● React Native Tutorial: How to Start with React Native. Beginners Guide Book - as a guide for complete novices, this book walks you through all stages of RN development, from installation to animations.

● Learning React Native: Building Native Mobile Apps with JavaScript - this book has already become an RN classic. It is a hands-on, step-by-step guide for absolute beginners, and provides plenty of sample code and examples to prime you on React Native development.

● React Native by Examples - if you already feel more at ease with RN, refer to this book. It contains examples of three React Native projects of increasing complexity, which you can build as you go. A great practical approach to plunge into RN.

Key Takeaways

● Development in React Native requires some basic knowledge of React, HTML & CSS, and mobile app development principles. ● The basic React concepts that you must understand before moving to React Native include components, props, and state.

● There are hundreds of valuable resources for React Native beginners on the Internet, including tutorials, getting started guides, starter toolkits, and blogs. A variety of free and paid online courses are also available. ● The official React documentation (https://facebook.github.io/react-native/docs/getting-started) is always a useful source of reference.

See Also

1. ‘Everything You Should Know About React: The Basics You Need to Start Building’: https://www.taniarascia.com/getting-started-with-react/ 2. ‘Getting Started with React – An Overview and Walkthrough’: https://medium.freecodecamp.org/everything-you-need-to-know-about -react-eaedf53238c4 3. ‘Thinking in React’: https://reactjs.org/docs/thinking-in-react.html 4. ‘React Native Styling Cheat Sheet’: https://github.com/vhpoet/react-native-styling-cheat-sheet#image 5. ‘React Native Tutorial: Building Android Apps with JavaScript’: https://www.raywenderlich.com/247-react-native-tutorial-building-and roid-apps-with-javascript 6. ‘Quick Start to React Native’: http://www.reactnativeexpress.com/quick_start 7. ‘What you need to know to start building mobile apps in React Native’: https://medium.freecodecamp.org/what-you-need-to-know-to-start-bui lding-mobile-apps-in-react-native-dded951277b7 8. ‘11 Best Open Source React Developer Tools and Apps’: https://ideamotive.co/blog/11-best-open-source-react-developer-tools- and-apps/ 9. ‘17 Best React Native Experts & Blogs To Follow In 2018’: https://ideamotive.co/blog/best-react-native-experts-blogs/

10. EXAMPLES OF USING REACT NATIVE IN THE WILD

As already mentioned, the choice of a relevant technology for your business is a challenging one. There are a number of essential criteria that you must consider to determine if a given stack is right for you. One of the factors to include in the evaluation is a technology’s popularity and range of applications. Below, we’re presenting some examples of world-famous companies who are already leveraging React Native in their projects. Go through them and you will see how the framework has helped them attain different business goals.

Remember that’s not to say that whatever worked for them, will work for you. Each company has its unique goals and challenges, with a specific skill set, resources, and capabilities. But having such household businesses in its portfolio makes a strong case for React Native.

Go back to section WHEN TO USE REACT NATIVE? to find out what projects make the best match for RN.

1. Facebook – Where React Native Began

It all started at Facebook when one of the company’s dev teams created React Native to expedite the development of the social media mobile app. The intention was to enable fast delivery of new features and downsize the resources needed to ship them. In the beginning, Fb developers created the iOS version of the app; shortly after, they followed with Android support. Since then, the king of social media has constantly invested in the optimization of the framework by releasing new updates. Apart from tapping into the business benefits, Facebook has recorded tangible efficiency and scheduling improvements, such as faster application startup.

2. Walmart – The Fortune 500 Leader Cannot Be Wrong With over 500M $ revenue last year, Walmart tops the Fortune 500 list of the biggest corporations in the world. One of the reasons behind the company’s massive success is that it always prioritizes customer experience. Walmart’s application is a perfect example of how the retailer makes life easier for its customers. The app allows users to browse products, check prices in-store, order shopping, or pay for their purchase via Walmart’s Pay system. Because of the multitude of features and their complexity, Walmart would normally have to maintain two enormous dev teams to keep the app going on all devices. Instead, they decided to take advantage of cross-platform development with React Native. This seems like a smart move. The staggering 95% of the Walmart’s codebase is shared between iOS and Android apps. The dev team is developing for both platforms in parallel, which reduces the costs of labor by half! As they say, ‘follow in the footsteps of giants.’

“Initial development, as well as the development of incremental features, is very quick and therefore you can satisfy your customers’ needs faster than your competition. As icing on the cake, applications written in React Native

generally speaking have comparable or even potentially superior performance to those written as native applications.”

Keertimaan Tenneti, Senior Engineering Manager @ WalmartLabs

3. Discovery VR – Virtual Reality on Steroids Discovery Channel needs no introduction. The company’s mission is to allow people to explore the world in the comfort of their homes, and take them to places beyond their reach. Well-established as a documentary television channel, the company has decided to take the user experience to the next level with a VR set. The set allows users to travel to the most distant parts of our planet. Thanks to the accompanying application, the viewers can immerse in a wide variety of landscapes and explore various activities, such as hiking, skiing or base jumping. To assure the flawless VR experience, Discovery has developed the entire User Interface in React Native. What’s more, thanks to the framework, the set can seamlessly integrate with external APIs, including Oculus Rift, HTC Vive, or Google Cardboard. And the results are stunning! 4. Wix – 3x Faster Development for 80 Million Users Wix (GitHub: https://github.com/wix/react-native-navigation) is a free website builder that allows everyone to create powerful websites with drag & drop, without any knowledge of HTML. To deliver the web building and hosting capabilities on mobile to its 80 million users, Wix resolved to use React Native. This turned out to be the right move. Thanks to React Native, the Wix dev team managed to go from zero to stores in six months with the speed of development 300% faster than usual. In the words of Tal Kol, Head of Mobile Engineering in Wix:

“React Native has a lot of appeal as the stack of choice for modern mobile apps. The major advantage this framework offers is a dramatic increase in productivity. Simply put, you develop apps much faster — partly due to the fact you can finally share code between platforms.”

5. Bloomberg – Media Giant Transitions to React Native

Bloomberg is best-known as a media enterprise covering the economy and financial markets, but the company also provides software solutions for these industries. In their mission to support businesses worldwide with access to market data, stock & currency ratings, and finance news, Bloomberg created a mobile app. Because of the high-profile audience and the turbulent nature of the financial sector, the application had to deliver sophisticated personalization and speed. To address these requirements, Bloomberg chose React Native for the implementation.

The company had to transition the entire team to React Native to rebuild consumer mobile application for iOS and Android. The timing was also of concern. However, the efforts paid off. Thanks to React Native, the application provides the users with a personalized, interactive experience, while offering advanced features such as live TV access and continual updates. More importantly, Bloomberg team managed to create the entire app from scratch in 5 months. Without the framework, this endeavor would have taken at least twice as long.

React Native is the best out there. Expect it to appear in other Bloomberg mobile apps in the future.

Gabriel Lew, Senior Software Engineer @ Bloomberg There’s More!

Tesla, Adidas GLITCH, Instagram, Skype, Baidu mobile, whym translation app,... there are many more companies that have recognized React Native’s advantages and deployed it in their projects to save time, streamline development and produce better results. You can check out more examples of successful RN applications in this blog post. Although RN doesn’t make sense in every single context, multiple examples of its use by the world’s most innovative businesses make a strong case for the framework.

Key Takeaways

● Since its launch, numerous industry leaders and champions of innovation have decided to go with React Native. ● The unparalleled speed of development, ultimate code reusability, and incredible user experience are some of the main reasons for choosing React Native.

● Global enterprises switch to React Native to ship their products first to the market and deliver unique features. ● React Native is also a perfect match for smaller companies that need to expedite development without expanding their dev teams. ● Despite React Native’s incredible UI capabilities, time and development efficiencies, and huge support from developers, there are some projects where it’s not a good fit, as in the Airbnb’s case.

See Also

1. ‘12 Best React Native Companies & Startups Mobile Apps [2018 Overview]’: https://ideamotive.co/blog/react-native-companies-mobile-apps/ 2. ‘Companies That Use React Native’: https://stackshare.io/react-native 3. ‘React Native at Airbnb’: https://medium.com/airbnb-engineering/react-native-at-airbnb-f95aa4 60be1c 4. ‘How React Native Enabled Us to Develop a Mobile App in a Third of the Time’: https://www.brightspot.com/blog/react-native-mobile-app-developmen t 5. ‘React Native for Android: How we built the first cross-platform React Native app’: https://code.fb.com/developer-tools/react-native-for-android-how-we-b uilt-the-first-cross-platform-react-native-app/ 6. ‘How Bloomberg Used React Native to Develop its new Consumer App’: https://www.techatbloomberg.com/blog/bloomberg-used-react-native-d evelop-new-consumer-app/ 7. ‘Tal Kol: Building a React Native App for 80 Million Users — ReactNext 2016’: https://www.youtube.com/watch?v=abSNo2P9mMM

11. REACT NATIVE TODAY - THE CURRENT STATE OF REACT NATIVE

React Native has been around since 2013. How’s it doing now? Who uses it? Who is contributing? Let’s take a deep dive into some exciting numbers!

TOP APPS USING REACT NATIVE (by the no. of monthly users)

Messenger > 1,200,000,000 Pinterest >250,000,000

Skype > 1,000,000,000 Soundcloud >175,000,000

Instagram > 800,000,000 Wix >110,000,000

78% of JavaScript developers heard of React Native and would like to learn more about it. 92% of those who have used it before would do it again.

[Source: http://2016.stateofjs.com/2016/mobile/]

GITHUB STATS FOR REACT NATIVE ● More than 71K stars ● Over 15K commits ● Nearly 290 releases ● > 1800 contributors

45K Twitter followers | 47K Facebook likes | 19K Instagram #reactnative posts | 107,000,000 Google results

INTEREST IN REACT NATIVE OVER TIME From Dec 8th, 2015 to Dec 8th, 2018 (United States)

378 React Native Meetups | 222 Cities | 56 Countries

Over 30 ReactJS/React Native conferences worldwide in April 2018 alone!

“With React Native, you can do all the work with one person. Because all the knowledge that you need is pretty much JavaScript.”

-- Tal Kol, Ex Head of Engineering at Wix

“React Native is a great framework that bridges the gap between web and mobile. At Discord it has brought us incredibly efficiency. It allows us to write reusable code, learn from each other, and move fast with a two-person team.”

-- Fanghao (Robin) Chen, Senior Software Engineer at Discord

“We were able to ship Facebook’s first fully React Native app on two platforms, with native look and feel, built by the same team of JavaScript engineers. Not all of the engineers were familiar with React when they joined the team, yet they built an iOS app with native look and feel in just five months.”

-- Philipp von Weitershausen and Daniel Witte, Facebook engineers

“Using React Native, the initial implementation on iOS took about 10 days, including bootstrapping all the integrations into our existing infrastructure. We were then able to port the screen over to Android in two days with 100 percent shared UI code between the platforms, saving more than a week of implementation time.”

-- Vivian Qu | Pinterest engineer, Growth

“I love React Native. It’s not perfect, but it’s very damn good. One of the most impressive pieces of software I’ve encountered in 9+ years of mobile and full stack development. I do all my projects in RN now, and I believe it gives me a 2-3x iteration speed advantage over my competitors [...] and the ability to be on all platforms.”

-- Arman Dezfuli-Arjomandi, a solo entrepreneur and creator of Slide, Falcross, and Jake and Amir for iOS