Choosing React Native For Your Mobile Tech Stack In 2023

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.

Now, how about getting to grips with that statement?

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.

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 base of devices early this year.

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 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:
• Taking full advantage of given platform software, APIs, and features.
• Providing optimal speed and performance.
• 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:
• A peerless speed of delivery, up to 300% faster than with native apps.
• Immediate updates thanks to the hot rolling capabilities.
• New product releases that don’t affect the user experience.
• Faster time-to-market.
• More efficient and affordable teams.
• Easier access to talent
• Significantly lower costs of development.
• 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. Mobile App Development: React Native vs Native (iOS, Android)
2. How To Pick The Right Custom Software Development Company? [Step-By-Step Guide]

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.

Let's roll!

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?

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.

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.

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

6. Pros and cons

Cordova for cross-platform development

Pros of Cordova

• 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 of Cordova

• 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 for cross-platform development

Pros of Ionic

• 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 of Ionic

• 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 for cross-platform development

Pros of Flutter

• 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 realizing custom, brand-driven designs, without the limitations of OEM widget sets.

Cons of Flutter

• 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.
• Limited numbers of libraries.
• Does not support 32-bit iOS devices.

NativeScript for cross-platform development

Pros of NativeScript

• 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 of NativeScript

• 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 cross-platform development

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

Pros of React Native

• 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 of React Native

• 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 for cross-platform development

Pros of Sencha

• 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 of Sencha

• 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 for cross-platform development

Pros of Xamarin

• 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 of Xamarin

• 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 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 contributions, 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. Ionic 2 vs. React Native vs. NativeScript
2. 4 Questions to Ask Before Choosing a JavaScript Framework
3. Why and When Cordova is better than React Native?
4. What are the advantages and disadvantages of using the Ionic framework, compared to native apps?

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 the 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.


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 the 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 time the difference will be insignificant, and won’t impact the user experience.
   
   We will discuss the performance aspect of React Native in more detail 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
2. What are the downsides of using React Native for building iOS apps? Are there any performance costs?
3. React Native Debugging Tools
4. A Guide to Using a Third-Party API with React Native
5. How an Android developer dived into React Native and survived

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.

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 quickly 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.
   
   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. 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?
2. To go or not to go React Native
3. Building An E-commerce Search App with React Native
4. Building a Mobile App in 10 Days with React Native
5. The Crucial Role of E-commerce Mobile Apps for Sales Enhancement

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.

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 the 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 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:
2. Thousand Ways to Navigate in React Native
3. Tips for improving the performance of React Native apps
4. Stats That Prove The Importance Of App Performance Testing
5. 6 Simple ways to speed up your react native app
6. Our React-native experience at Drops (so far)
7. React Native Performance: Major issues and insights on improving your app’s performance

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!

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.

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?
• What is your product for? What user needs it addresses?
• 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.
• 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.
• 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‘
2. ‘Building a Mobile App in 10 Days with React Native’
3. ‘How To Find Top React Native Development Company? The Ultimate Checklist’

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 2020, 70% of all worldwide online traffic was generated through mobile phones.
• 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 development costs by 30-40%.

See Also:
1. 75+ Mobile Marketing Statistics
2. Mobile Marketing and the New B2B Buyer
3. App Download and Usage Statistics
4. The Future of Mobile Growth is Cross-Platform
5. How Much Does it Cost a Small Business to Build an App?

React Basics

If you already know React, skip this part. Otherwise, look at some of the essential information that will help you sink your teeth into React first.

What's React?

React is an open source JavaScript library for building web interfaces, originally developed by Facebook. It’s based on components and follows the principles of declarative programming. One of the crucial features of React is that you only write code once, and deliver it across multiple platforms.

React Native applies React architecture to deliver multi-platform interfaces for mobile devices.

JSX

React doesn’t rely on HTML, but uses JSX instead, which is an XML-like syntax extension to JavaScript. Here’s an example:

const element = <h1>Hello, world!</h1>
import React, { Component } from 'react';
import { Text, View } from 'react-native';

class WhyReactNativeIsSoGreat extends Component {
  render() {
    return (
      <View>
        <Text>
          If you like React on the web, you'll like React Native.
        </Text>
        <Text>
          You just use native components like 'View' and 'Text',
          instead of web components like 'div' and 'span'.
        </Text>
      </View>
    );
  }
}
        

JSX produces GUI outcomes in React, as it describes how every component (see the next item) should be 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.

Here's a basic example:

const Dumb = (props) =>  {
  return (
    <div>
      {props.oursProps}
    </div>
  )
}
        

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

Different developers, different views, but here’s what we think is conditional to starting with React Native:

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 Courses by Tyler McGinnis (free and paid)
  
  Namely video courses aimed at basic acquaintance with the React library. The free fundamental course includes 48 lessons (don't worry, this is 287 minutes in total) devoted to the basic principles of working with the library, examining template examples, and solving typical problems.
  
  
• Hacking with React (free)
  
  A free e-book on React to help you dive into the world of web development with little or no knowledge. It starts with setting up the library, introduces you to JSX, and then using Hacking with React you will create your first project. But don't expect to find all the information you need to know about React, much less web development, here. This book is for guidance only. By the way, if you are a fan of reading books outside the home and at work, you can download the stand-alone version of the textbook for an immodest $ 10.
  
  
• The Official React Tutorial (free)
  
  If you need comprehensive information, the only way to find it is to refer to the original source, that is, to the official library page. Why is this tutorial not in the first place on this list? It's simple. The fact is that, in our personal opinion, it is somewhat redundant for a beginner. If you have experience with any other JS framework, then the official presentation is convenient and understandable. If you just learned the basics of programming yesterday, you might want to check back later.
  
  
• Fundamental courses from Egghead (free)
  
  The Egghead platform offers video tutorials, which include a general introduction to JavaScript, as well as lessons on individual frameworks, be it Angular or React. The last course is the third in volume and includes 5 free sections.
  
  Two of them are about general issues of building mobile web applications, two are about getting to know Redux, and another is about routing issues in React. Since the platform publishes free materials exclusively for "seed", you can count on full knowledge only when you pay for a subscription of the Pro category. However, these short tutorials will suffice to get an idea of ​​React and Redux.
  
  
• React and Redux with Cabin (free)
  
  This is a minimal tutorial on how to create an application from scratch. You start by installing React, setting it up, plugging in Redux, working with filters, and you've got a finished product. Here more emphasis is placed on flexibility and functionality. You will also work with photos from Instagram.
  
  
• The React Convention (free)
  
  This is an online magazine for developing apps with React. Due to the specifics, it is better for beginners not to meddle here. But experienced, or rather, "intermediate" developers will find here a lot of useful information both in terms of template design solutions and interesting options for using the library.
  
  In general, for all those who are no longer new to React and Redux, but still have a lot of doubts, be sure to check in periodically, read and remember to check for updates periodically.
• 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 indispensable knowledge about the framework.

Let’s list several popular examples. You will find more in this post. You can also check out the most popular React Native podcasts and Youtube channels.

• 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.

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 is always a useful source of reference.

See Also:
1. Everything You Should Know About React: The Basics You Need to Start Building
2. Getting Started with React – An Overview and Walkthrough
3. Thinking in React
4. React Native Styling Cheat Sheet
5. React Native Tutorial: Building Android Apps with JavaScript
6. Quick Start to React Native
7. What you need to know to start building mobile apps in React Native

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.’

5. Bloomberg – Media Giant Transitions to React Native

Bloomber 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.

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 Airbnb’s case.

See Also:
1. React Native at Airbnb
2. Companies That Use React Native
3. How React Native Enabled Us to Develop a Mobile App in a Third of the Time
4. React Native for Android: How we built the first cross-platform React Native app
5. How Bloomberg Used React Native to Develop its new Consumer App
6. Tal Kol: Building a React Native App for 80 Million Users — ReactNext 2016

Github stats for React Native

Interest in React Native over time

“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 incredible 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

For more info about the state of React Native at the beginning of 2021 check this article.

See Also:
1. State of React Native 2018
2. The State of React Native 2018
3. David Vacca - The state of React Native
4. Here’s what I learned at the world’s biggest React conference

We have already covered multiple aspects of the React Native framework. We’ve talked about the basics, compared RN against native apps and other cross-platform mobile development solutions, and presented some crucial pros and cons of the framework. We know the current state of React Native, but what does the future hold for it?

Considering the development of React Native so far, we believe it’s bound to grow. To substantiate that claim, we’re sharing five reasons why React Native is the way of the future

5 Reasons React Native Is The Future of Mobile App Development

1. A Massive Community of Developers
   
   From day one, RN has gained a solid footing in developers' circles. By now, it’s become a top mobile JS development framework with a thriving community of supporters. Developers acknowledge RN’s coding speed and efficiency, and take advantage of the shared code repository, the unique hot reloading feature, and a wide choice of pre-built components.
   
   The potential for React Native’s further growth is high, as if you’re well versed in JavaScript, you’ll be able to pick up RN quickly.
   
   
2. Quick Progress
   
   Yes, as a relatively recent technology, React Native hasn’t fully matured yet. However, it is developing at a rapid pace. On the one hand, it’s open-source, so everyone can share and contribute their code and provide the missing modules and components. On the other, it enjoys a constant growth under Facebook’s auspices. GitHub commits to the react-native repo are made every few hours.
   
   
3. Business Benefits
   
   From the business perspective, React Native offers a critical advantage over most native and cross-platform solutions: It drastically reduces development times. Thanks to the multi-platform support, live updates, and an abundance of plugins, libraries, and ready modules, it’s an ultimate time-saver that allows you to ship your app faster. If you invest in React Native, you can expect to spend at least 20-30% less on development than in the case of other technologies.
   
   
4. Facebook Backing
   
   React Native is not just a regular open-source project. It started at Facebook and has since been directly supported by the company’s engineering team. Facebook’s developer community is constantly contributing new features and updates, optimizing the framework and setting ambitious goals for the future.
   
   

   One of the items on the 2019 roadmap is a large-scale re-architecture of RN.

   As for the 2020 updates, now we can enjoy:

   • New Getting Started guides.
   • New Testing guide.
   • New Security guide.

   This only proves that the company is serious about its commitment to the framework’s growth.

5. Wide Range of Applications
   
   React Native, like any technology, doesn’t make a great fit for all applications, but the range of projects where it provides major benefits over its competitors is impressive. There are different needs and cases, but for a majority of apps, RN may be the best way to build them.
   
   Examples of React Native’s use include social media, shopping applications, voice & video chats, news app, search engines, and many, many more.

What’s Next for React Native?

The popularity of cross-platform mobile development continues to grow, and React Native is a top framework in its league. The vibrant ecosystem, huge community & commercial support, and a vast range of applications speak in its favor and prove it’s on the right track to becoming one of the leading technologies on the mobile app development market.

See Also:
1. React Native, the Future of Mobile App Development?
2. The Future of React Native with Brent Vatne and Adam Perry
3. React Native is dead, long live React Native
4. React Native status 2018: Looking bright with a re-architecture on the horizon

Is React Native worth a try? It all depends on your project.

Check React Native pros and cons to gauge its benefits in the context of your app.

See how it ranks against other cross-platform solutions.

Go back to the section about when to use RN (and when not to).

If you’re a developer, review what’s needed to learn RN.

If you’re still unable to decide whether React Native is right for you, have a look at the summary below. It should help you make up your mind

Startups

Whether you are looking to accelerate the development of an existing app, or need to build a complete product from start to finish, React Native will probably make a perfect fit for your startup business.

Chances are you can’t afford a huge developer team with specialists well versed in both, Android and iOS apps. You may have two or three software specialists at your disposal, and your chief goal is to develop a high-quality, stable app and ship it ASAP to the market.

If that’s the case, you will take advantage of the following RN’s benefits:

Up to 100% code reuse between iOS and Android. React Native allows developers to share the same code in different environments (iOS, Android, web). Realistically, some platform-specific customization may be required, but various companies report 80-90% code sharing for their apps. This will help you save an enormous amount of time on development.

Cross-platform teams. If you want to ship your app to all devices, you’ll have a hard time finding a multi-platform software expert. The overlap of developers who are excellent on all mobile platforms is insignificant. On the other hand, RN is based on the ‘learn once, write everywhere’ approach. What this ultimately means is that with the framework you don’t need to maintain separate teams to release a product on several OSs. As Discord's case demonstrates, with RN it takes only two people to build powerful apps with RN and deploy them on all devices.

Easy code maintenance. One code, one team, two products. React Native enables a single JavaScript code base for different platforms. That makes it easier to maintain and reuse the code, and again, allows you to deliver impressive results with small teams.

Quick feature delivery. Thanks to the unique RN features such as hot reloading and CodePush, your team can update and improve your software dynamically, without reloading the entire code and stopping the app. This way, you’re saving plenty of development time and provide for immediate fixes and feature upgrades. All of it without impacting the end user.

No fees involved. Last but not least, unlike most of its competitors, RN is a 100% free solution, officially run by Facebook but benefitting from a massive community contribution. You can kick off your project immediately, without having to worry about exorbitant subscription fees and license restrictions.

Business owners/C-Levels/Managers

Mobile apps account for nearly half of the global Internet traffic, and apparently, there are more smartphone owners in the world than toothbrush owners.

With over 200 billion apps downloaded in 2018 (a growth by 11% compared to the last year), mobile applications market is booming, and there’s no stopping it.

React Native owes its immense popularity among the developers to a number of factors, including:

• Rich ecosystem of libraries and plugins
• Native look & feel of the apps
• Detailed, regularly updated documentation
• Powerful tooling
• Easy learning curve (even Android developers admit it: “React Native is just easier [than native development]”)
• Elegant patterns

If at least one of the following statements apply to you, consider switching to React Native:

• You already know React. Conceptually, RN is very similar to ReactJS. In both, you use the same component lifecycle, props and states, JSX syntax, and Redux. If you’re already familiar with the latter, you’ll get the hang of the former pretty quick. Check the official RN documentation, go through a couple of tutorials, and you’re all set!
• You are a die-hard JavaScript fan. React Native is written in JavaScript and based on ReactJS libraries. Although there are enough reasons to be skeptical towards JS, it’s still the most popular programming language in the world. It’s estimated that 95% of all websites use it. It’s highly probable that as a mobile developer you already know it. In that case, learning RN will be relatively easy for you.
• You’re impatient. With RN, you can take advantage of the ultra-rich library of resources and components to speed up development. What’s more, in 2016, Facebook introduced one of the most praised features of RN, hot reloading, which basically allows you to apply and display your changes runtime, and reload the app on save. This power of fast deployment is particularly compelling for developers who’d like to immediately see the outcome of their work.
• You can’t decide whether to learn Java, Object-C, or Kotlin. To start with React Native, you don’t need any of them. RN allows you to use the same fundamental building blocks as Android and iOS apps to create an app that is indistinguishable from software built with app-specific languages. You only need JS and React essentials to kick off.
• You love open source. As opposed to the majority of native and cross-platform development solutions, RN is 100% open source. Although it’s growth is driven by Facebook, it’s also one of the most popular and best-evaluated repositories on GitHub. With RN, you can take advantage of knowledge-sharing and contribute your own code to the community.

Conclusion

See Also:
1. Five reasons why web developers love React Native
2. Seven reasons why a Rails 5, Redux, React, and React Native stack is fantastic for new startups
3. React Native as seen by an Android developer