“Learn once, write anywhere” — this motto has been on everyone’s lips since Facebook open-sourced React Native in 2015. The idea behind the technology — to reach as many users as possible with one codebase — was not something new. But for the first time, the native experience was taken into serious consideration. Simply put, RN mobile apps preserve the user interface and behavior typical of the platform they run on.
The ability to bring native look and feel is an important, yet not the only reason why React Native has become a framework of choice for millions of companies, from startups to tech giants like Instagram, Skype, Uber, Walmart, Coinbase, and, of course, Facebook.
In this article, we’ll explore other advantages of the framework, point out some of its pitfalls, and make a brief comparison with other technologies for cross-platform development.
What is React Native? The failure behind the great success
React Native, the one of the most wanted open-source frameworks, enables developers to write an app in JavaScript and render it with native UI elements. As a result, you can reuse a larger part of the codebase across platforms — mainly, Android and iOS.
The successful technology was born out of what Mark Zuckerberg named “the biggest mistake we made as a company.” He meant their first attempt to go mobile in 2010. While other firms were building separate native versions for Android, iOS, Nokia, and BlackBerry phones, Facebook decided “to bet on HTML.” And gambled away. The app deserved a one-star rating on the App Store because it was crashing all the time.
The first mobile Facebook app, built with HTML5, was clumsy, slow and buggy. Source: Mobile Venue
This failure forced the Facebook team to rethink their mobile strategy. In the end, a new framework — React Native — came into existence. It combined the concepts of its elder sibling, web development library React, and capacities of native SDKs. The first RN app was designed for iOS, and the Android version was not long in coming.
Currently, React Native also supports Windows 10 (check React Native for Windows repository) and macOS (RN for macOS apps), allowing for desktop software development. There is even a React Native for Web library that lets you run mobile apps in a browser. Yet, above all else, RN is beneficial for what it was meant initially — parallel designing of iOS and Android projects.
React vs React Native
React Native has the same syntax and development mindset as React. Specifically, the two representatives of the JavaScript family share such basic concepts as
reusable components that allow for rapid app building,
syntax extension JSX to write declarative UI elements inside JavaScript,
properties or props to configure components, and
states to keep track of changes in component data.
Though much alike, they are not utter twins. React is a lean library that requires the involvement of third-party technologies in development. React Native, however, is a fully-fledged framework that has all the modules you need to create a mobile app, while not excluding the ability to use external libraries.
Other major differences stem from the targeted platforms: web browsers in one instance and mobile devices in another.
There is no HTML and CSS in React Native.
RN builds UI with native components instead of web components in React.
To render the views, React uses virtual DOM, while RN relies on native APIs.
You can learn about a virtual DOM and other pros and cons of React in our dedicated article. Below, we’ll examine the advantages and disadvantages of its younger sibling.
Benefits of React Native
Naturally, React Native inherits some of its selling points from React, but it also has a lot to boast of on its own. Let’s see what makes RN so wanted by developers and businesses.
JavaScript at the core: access to a wide talent pool and easy switch from web to mobile
Similar to React, RN is based on JavaScript, the most popular programming language for the eighth year in a row. The estimated 12.4 million developers actively use it worldwide, with React leading the pack as the most common JavaScript tool for front-end.
For businesses, these rates mean a wide pool of specialists to choose from. Engineers with a background in JS and especially in React Native can relatively quickly grasp RN essentials and switch from web to mobile development.
Familiar ecosystem and concepts: a mild learning curve for JS developers
While React Native has its own challenges, the learning curve for those comfortable with JS and React will be mild. Depending on the previous experience, it takes two to several weeks to start building the first RN apps.
More often than not, no additional investment in training courses is required to dig into specific RN topics. All documentation to get started is available for free and you can always seek advice from a large community of RN developers.
One codebase for two platforms: savings in time and money
“React Native isn’t perfect but the benefits of a single codebase are huge,” this is what the majority of companies opting for RN admit.
The framework allows you to share the logic layer of the app between iOS and Android. If you plan to launch your project on both mobile platforms, you don’t need two separate development teams: one to write with Java or Kotlin for Android and other to work with Objective-C or Swift for iOS.
Theoretically, you’ll get the job done almost twice as fast and as cheap as in native development for Android and iOS. In practice, time and money savings are more modest, but still, up to 90 percent of the code can be reused between platforms.
Ready-to-use components: great development speed
React Native offers a set of ready-to-apply components to save you time on designing common blocks from scratch. But the Facebook team doesn’t limit you to the core collection. You can choose from hundreds of libraries created by RN contributors and published on GitHub. Popular examples are
React Native Maps to integrate maps into RN apps (412 contributors, used by 116,000+ developers),
React Native Elements to share UI elements between RN and React web apps (316 contributors, used by 95,200+ developers),
NativeBase to choose from a vast collection of customizable UI elements (196 contributors, used 55,800+ developers), and
Lottie for React Native to create and ship animations (91 contributors, used by 80,100+ developers).
The wealth of prebuilt elements allows you to create MVPs (Minimum Viable Products) to test your idea and unique, production-ready apps at an unprecedented speed.
Native APIs and views: rich and fluid user interface
Unlike other cross-platform frameworks and progressive web app techniques, React Native recognizes and reflects differences between iOS and Android. It relies on native APIs and native visual elements like buttons, menus, status bars, and more. Consequently, the same views will look a bit differently on Apple and Android devices and be updated in sync with the targeted operating system.
React Native covers all essential UI building blocks. But if you need more advanced features, you can fill the gap with plugins provided by the community. Another option is to build a native module within your JS code and get access to native APIs, not supported by default. This relates to such functions as Apple and Google Pay.
Hermes engine: better runtime for Android and iOS
Hermes is an open-source JavaScript engine built by Facebook to improve performance of RN apps and make them run as fast as possible. Its use entails better start-up time, reduced memory usage, and smaller download size for RN projects.
For quite a long time, the feature was available for Android only. But the latest 0.64 version of React finally comes with support for Hermes on iOS, making iOS apps start 40 percent faster. The upgrade brings one more benefit: Having the same engine for both platforms simplifies cross-platform app development.
Fast Refresh and Flipper: better debugging experience
Not long ago, debugging was a sore spot with RN developers. But after introducing the Fast Refresh feature and out-of-the box support for mobile app debugger Flipper, things started looking up.
When enabled in the RN developer menu, Fast Refresh makes all edits to the code visible on the screen instantly. If there are any errors, the browser view will provide details on what is going wrong. This speeds up both building new features and fixing bugs.
With Fast Refresh enabled, the browser view on the left reflects all errors and details on them while you are editing the code.
Flipper, for its part, contains a range of tools and allows for remote debugging — when your app is executed in the environment as close to production as possible.
Growing community: answers to any problem
React Native lags behind React in terms of community and ecosystem sizes. However, the number of RN developers is constantly growing, and the chances are you’ll get instant help with any development problem should it arise.
Below is the list of resources to look for support from RN engineers.
React Native repository on GitHub has over 660,000 users and enjoys the backing of nearly 2,300 contributors.
StackOverflow contains nearly 99, 500 questions with a react-native tag, so you can find ready answers or describe your unique problem .
React Twitter account embraces both React and React Native, boasting over 480,000 followers. But there is also a separate RN Twitter account with over 110,000 followers, where you can get the latest news related to RN and answers from RN engineers.
Reactiflux on Discord is a massive community using React. Here, you can share your concerns with other developers in Need Help chats and ask questions about tools, libraries, and more in dedicated threads.
React Native subsection on Dev.to boasts over 1,800 published posts in which developers share their experience with different aspects of RN.
React Native Community on Facebook shares video tips and tutorials on how to master React and make your mobile projects better.
React Native drawbacks
Nothing is perfect but we truly believe that almost all RN disadvantages are temporary. The Facebook team and RN community deliver constant improvements, making the framework more mature year by year. Here, we’ll touch on the most discussed RN drawbacks and how they are expected to be solved.
Performance issues
While RN apps are fast enough, they still can’t beat the performance of native solutions. The bottleneck lies in the React Native architecture itself.
How React Native works.
A React Native app combines JavaScript and native code parts, which are executed in two separate threads.
The JavaScript thread runs the app’s business logic. It dictates which APIs to call, which views to display, and how to do it.
The UI or main thread manipulates UI components, renders views, and "listens" to user actions — like taps, swipes, and so on.
These two threads communicate via the React Native bridge also called the shadow thread. It sits between JS and native worlds, allowing them to exchange data in the form of serialized JSON objects. Among other things, the shadow thread calculates the layout defined on the JS side and passes results to the native side, which generates the view accordingly.
While JS and UI threads may demonstrate amazing performance, the bridge creates "traffic jams" known as "the RN greatest limitation." The performance pitfalls become especially obvious when building animations and touchscreen interactions.
What is being done about it? Currently, Facebook is working on an improved architecture that will enable the JS thread to communicate with the UI thread via a lightweight layer called the JavaScript Interface (JSI.)
While waiting for the new architecture, developers can use different libraries created by contributors to address performance issues. For example, React Native Reanimated allows you to write animation and touch screen events as tiny pieces of pure JS and run them directly in the main UI thread, thus escaping "the bridge problem."
Upgrading complexities
As judged by the comments of developers, moving from one version to another is one of the most challenging things about React Native. The question is: Why bother to upgrade at all? There are several big reasons, namely
getting performance increases, bug fixes, and security patches;
accessing new features and APIs;
adding compatibility between JS and native side; and
keeping up with the breaking changes.
So, it’s strongly recommended to upgrade RN apps to the latest available release. Yet, the process takes much effort and one to many hours, depending on the changelog. Keep in mind that accidental missing of just one step may result in hours of debugging. But the experience is not that bad if you are only one version behind.
What is being done about it? The Facebook team keeps abreast of the issue. However, they can’t promise that the problem will be entirely solved anytime soon, as it relates to “breaking changes, native modules, and template changes, that are hard to understand.”
Meanwhile, the RN community launched the Upgrade Helper tool to facilitate moving to newer versions. It shows differences between current and targeted releases, so you can see changes to be made.
React Native Upgrade Helper shows what to be changed in the targeted version.
The lack of out-of-the-box support for native components
React Native is often advertised as the way to built "two apps for the price of one, using JS only," but this is not quite accurate. The framework doesn’t offer built-in support for all functionality you may need. To incorporate some advanced features or build them from scratch, you will need experts in native languages. Potentially, you may end up in managing three codebases — JavaScript, Java/Kotlin, and Objective-C/Swift.
What is being done about it? With the growth of the community, more and more open-source libraries with native features are becoming available. However, their implementation still requires knowledge of a particular platform.
How to get started with React Native
Before jumping to RN development, you should get familiar with JavaScript fundamentals and, in the perfect scenario, with basic concepts of React.
A good entry point to React Native is the Getting Started section of the framework’s official website. It introduces the framework essentials and provides a list of useful resources for further learning.
The Environment Setup section instructs on how to launch your first React Native project. There are two officially recommended ways to start building an RN app:
Expo, a suite of tools and services to develop React Native projects and deploy them on Android and iOS. This platform is the best option for beginners in mobile development. All you need to start using Expo is the latest version of Node.js on your computer and a smartphone or device emulator to test your app.
React Native CLI, a command line interface shipped with React Native. Besides Node.js., you have to install native development tools — Apple’s Xcode or Android Studio.
To speed up development, the React Native team also suggests trying Ignite CLI, a starter kit with RN boilerplates. This promises to save two to four weeks on building an RN project, be it a proof-of-concept, demo or production app.
React Native vs other mobile technologies: which one to choose for your project?
With all its existing benefits and upcoming improvements, RN is not a clear choice for any project. Read our article with detailed cross-platform mobile frameworks comparison or look through a quick overview below to pick sides.
Flutter vs React Native
Google’s Flutter is the most popular cross-platform alternative to Facebook’s React Native. Unlike RN, it doesn’t employ any native APIs and UI elements. It creates views with the Skia graphics library, following platform-specific design, and renders them with its C++ engine.
Instead of JavaScript, Flutter uses the Dart language that compiles directly to native libraries, without any bridge. This ensures faster start-up time and better performance.
On the downside, Flutter doesn’t provide an easy switch from web to mobile development, has a smaller communit, and fewer third-party libraries to choose from.
Xamarin vs React Native
Backed by Microsoft, Xamarin delivers a set of tools to write cross-platform apps with C# and .NET framework. Similar to RN, it boasts "almost-native’" performance and lets you share up to 90 percent of the codebase between iOS and Android. But with RN, developers can select among code editors, while Xamarin is tied to Visual Studio.
Anyway, Xamarin is a natural choice for those working in the Microsoft environment and writing in C#.
Ionic vs React Native
Unlike all above-mentioned alternatives, Ionic takes a hybrid approach to mobile development. It enables you to build mobile apps with web technologies only, including HTML, CSS, and a JavaScript UI framework , be it Angular, React, or Vue.js. To render the code, Ionic uses WebViews — embedded browsers to run web content on native platforms.
The best part of Ionic is that it doesn’t require any expertise in native languages. It’s really the cheapest way to create two apps simultaneously. However, the hybrid project loses out to RN in terms of performance and UI/UX design.
React Native vs native development
Neither React Native, nor any other cross-platform technology can achieve the performance and speed ensured by native app development. Also, all they have limited capabilities for using Android- or iOS-specific features.
The serious reasons to opt for native development are as follows:
you plan to build an Android-only or iOS-only app;
you create a resource-intensive app — say, with augmented or virtual reality (AR/VR), heavy animations, etc.;
you need access to all the native perks related to hardware, sensors, platform-specific functionality, and SDKs; and
you want to support new mobile features as soon as they are released.
However, in the case of simpler projects, the difference in speed between RN and native apps will be imperceptible for users. And tremendous savings of time and cost can turn out to be the governing factor. RN is the default option if
your team has a strong JS and React background;
you have to get by with limited resources; or
you build an MVP, demo, proof-of-concept, or a simple app that doesn’t require extensive processing.
Yet, nine times out of ten, many more details will impact the final choice. If you have any doubts, it makes sense to consult tech experts before investing in a particular technology — even the highly-praised React Native.
This post is a part of our “The Good and the Bad” series. For more information about the pros and cons of the most popular technologies, see our other articles:
