<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=1884263495061875&amp;ev=PageView&amp;noscript=1">

This site uses cookies. By continuing to browse the site, you are agreeing to our use of cookies.

Find out more ›

What is React Native And When to Use It For Your App? (Updated)

Do you have an idea for your next venture?

Let’s talk

    20 July 2021 by Patrycja Paterska

    React Native's popularity is still growing. Learn the pros and cons, and when to use React Native for your mobile app development. 

    What is React Native?

    React Native is an open-source JavaScript framework, designed for building apps on multiple platforms like iOS, Android, and also web applications, utilizing the very same code base. It is based on React, and it brings all its glory to mobile app development.

    Both frameworks: ReactJS (web) and React Native were brought to life by Facebook. React Native was a Hackathon project aiming at solving the company’s biggest pain point - maintaining two code bases for their app. The problem with maintaining two code bases for such a big app? Work duplication and, at times, solving the same problem in two different ways. React Native is a straightforward answer to these problems.

    React Native uses JavaScript to compile the app’s user interface, but using native-OS views. For more complex features, it allows code implementation in OS-native languages (Swift and Objective-C for iOS, and Java and Kotlin for Android).

    React vs React Native

    React is an open-source JavaScript library used on frontend to build fast and reliable User Interfaces for web applications. It’s very much based on reusable components.

    As we mentioned, just like React Native some years later, React was also brought to life by Facebook in 2011 as a direct answer to their scalability problems. It was a time when Facebook ads were growing immensely, and the constant updates to their UI slowed down the platform significantly. React solved this problem, and in 2012, when Instagram was acquired by Facebook, it was also used on the app’s timeline.

    React Native, powered by React and developed by Facebook, was a natural consequence of React. It is a mobile framework allowing to build near-native apps using JavaScript.

    The bottom line? Both frameworks are closely related to each other, but they serve an entirely different purpose. React is used for web development, and React Native (which does not use HTML) is used for mobile development.

    How does React Native work?

    We mentioned React Native utilizes JavaScript to produce the app's interface. Unlike its competitors (e.g. Ionic), React Native does not rely on webviews, but the actual real materials provided by native platforms. It has built-in access to the native views and components, and can utilize native-written code and allow the API access to OS-specific features inside the app. The question is - how does that happen exactly?

    React Native uses the concept of “bridge”, which allows for asynchronous communication between the JavaScript and Native elements - the bridge concept lies at the very heart of React Native’s flexibility. Native and JavaScript elements are completely different technologies, but they are able to communicate.

    This type of architecture offers the benefit of using a lot of OS-native features, but also comes with important challenges; e.g. constant use of bridges inside the app may significantly slow down its performance. If you’re building an app that involves many events, a lot of data, etc. React Native might not be the best option. More on that below.

    Pros of React Native

    Code reusability & faster development

    The effective development for multiple platforms at once is the biggest and strongest advantage of React Native. Utilizing the same code base for different platforms carries other benefits: faster development and time-to-market of your app, easier and cheaper maintenance (you take care of one not multiple code bases), and a smoother onboarding process for new developers joining the project.

    Thanks to the "hot reloading" feature,  React Native enables developers to see the changes in the code in a live preview, without the need to refresh anything. This seemingly small tweak can actually tangibly improve the development process as it provides real-time feedback to anything that has been altered inside the code.  

    Performance 

    Compared to other cross-platform development solutions, React Native’s “bridge” concept can be seen as revolutionary. Since React Native apps allow usage of natively written code it is not as laggy as web-based cross-platform solutions. The official claim is that React Native gives “native-like” performance, but it is not necessarily true, the best way to put it is that it gives “near-native” experience.

    Cost efficiency

    Cost efficiency is the heart and the very reason for cross-platform development. Thanks to reusing code on multiple platforms, you usually need a smaller team to deliver the project. As opposed to native development where you need two separate teams to deliver basically two similar operating products instead of one.

    Growing developer community

    React Native is an open source framework, and as of now its community is thriving and constantly expanding. We can’t forget the involvement of Facebook, as they are constantly working on improvements and elements widening the framework. What this means for you is that even if you encounter a problem that has not yet been solved in React Native you might find a bunch of people eager to help you out as they are concerned with making the framework more comprehensive and stable.

    Cons of React Native

    A relatively young technology (but improving with time)

    React Native is still relatively new, and as we mentioned earlier, definitely has some limitations, glitches, and issues needing to be addressed. Some custom modules do not exist in the framework, which means developers might need more time to build and create their own new ones from scratch. Your partner company or your developers should let you know about this during the app estimation process.

    The need for native mobile developers

    The strongest asset of React Native - implementing native code for better performance means that at times React Native developers might find themselves in need of help from native mobile app developers. Same goes for publishing the app in the AppStore and Google Play Store. Typically, native mobile developers are more familiar with the procedure and necessary documentation for a successful launch.

    This might not be an issue if you’re cooperating with an agency, where there are already native mobile developers that could give the React Native team a hand. But it is definitely something to consider when you’re working solely with your own cross-platform team.

    React Native does not go well with complex designs & interactions

    The React Native’s performance pales when confronted with complicated UI design decisions, complex animations, and heavy interactions. Once again, this is because of the bridge concept - all native modules have to communicate with the JavaScript part of the app, and too many of such interactions may slow down the app significantly, making it laggy and simply giving a bad experience.

    Reliance on Facebook

    Relying on a third-party open-source technology has its cons on its own. If Facebook decides to step down from using the technology it might cause others to move back from it. As of now, nothing suggests this turn of events: Facebook utilizes React Native in their main Facebook app, the Ads Manager app, Facebook Analytics, and Instagram. The framework’s community is constantly expanding and new big companies are jumping into the game.

    Nonetheless, this is something to be mindful of. Native technologies offer much more support and backward compatibility in this respect, compared to any cross-platform solution.

    Near-native performance is still lesser than native

    We’ve discussed the React Native performance as superior to other cross-platform solutions available, but it is still somehow slower compared to the native app development. The React Native’s impact on your app’s performance is best discussed with your development team. For the majority of the apps available, it is a small, almost unnoticeable bump, which can, however, grow if the app is dealing with a lot of data or “bridges”.

    React Native - what is it used for?

    There are no real industry-related constraints on when you can or cannot use React Native. The main point is that it is a good-enough framework for all customer-facing applications that do not rely heavily on OS-specific features and integrations, e.g. AR, VR or do not need complex design or animations to establish competitive advantage. React Native makes them faster to develop and as of now offer enough support and modules to build a stable application. Another advantage is that when your web app is built in React, it is also easier to build a React Native mobile app.

    Numerous big players are actively using React Native in their products, or have just decided to switch.

    Facebook & React Native - social media platform

    The list of companies using React Native would be incomplete without Facebook, its ultimate creator. Their goal was to bring all the joys of web development (quick iterations, one team to develop the product) to mobile. On their blog, the Facebook team explained how they first converted only one element to React Native (the Events tab in their Facebook for iOS app), and they managed to make the startup time twice as fast. Thanks to the fact that the improvements were done at the framework level, the app would automatically benefit when migrating to the latest version of React Native.

    Apart from Facebook's iOS and Android apps, which were adjusted to React Native, Facebook built their Ads Manager from scratch using React Native.

    Instagram & React Native - social media platform

    Facebook apps for iOS and Android are not the only ones relying on React Native. Instagram started exploring React Native in 2016, and in their blog post, they also expressed it allowed their product teams to ship features faster on both platforms, iOS and Android. They also shared the percentage of code shared between the apps which  was directed at improving developer velocity.

    • Post Promote: 99%
    • SMS Captcha Checkpoint: 97%
    • Comment Moderation: 85%
    • Lead Gen Ads: 87%
    • Push Notification Settings: 92%

    (Source: React Native at Instagram, Feb 6, 2017).

    Walmart & React Native - ecommerce

    Walmart is an American multinational retail company operating a chain of supermarkets. Their app offers online shopping, product search, in-store price checking. Currently, 95% of the code utilized in their app is written in React Native.

    walmart-react-native-appImage credit: Walmart

    Some of the biggest React Native benefits mentioned by Walmart are: leveraging the same automation test suite on iOS and Android, the control over the update release dates, and for both platforms at the same time.

    Bloomberg & React Native - content & media

    Bloomberg jumped onto the React Native ship quite early - in 2016, when they shipped the first version of their new app. The Bloomberg app gives users access to content personalized to their location, alongside curated news reflecting a given time of day. This quickly became a company transition with plans to implement React Native also in other Bloomberg apps.

    bloomberg-react-nativeImage credit: Bloomberg

    Tesla & React Native - a companion app

    Tesla does not disclose much information about why they chose React Native. The app serves as an assistant and companion for all Tesla vehicles. The app syncs both Android and iOS devices with the car and allows to control and monitor almost all of the Tesla features; the charger, locks, lights, the panoramic roof or the horn.

    Shopify - ecommerce building platform

    Shopify recently announced that React Native is the future of mobile at the company, stating they will help enhance and better the app experience across iOS and Android platforms. They also partnered up with Facebook, and are sponsoring notable people from the React Native community - all to boost the efforts and help build a comprehensive cross-platform mobile experience.

    Best projects for React Native

    As we mentioned, there are no real industry-specific obstacles in terms of using React Native, it all comes down to establishing your app’s key features and competitive advantage.

    React Native is a perfectly good solution for all consumer-facing apps as it offers just on-point performance, and it is (in most cases) easier and cheaper to build than two separate native apps with the same service or product. Most of the consumer-facing apps do not rely on complex animations and UIs which, again, makes React Native a great and reliable solution for the endeavour.

    See some of the companies in various industries that utilize React Native in their businesses.

    • Social networks - Instagram, Facebook App, Discord, Pinterest
    • Entertainment & Journalism - Vogue, Bloomberg, newonce.net (see full newonce.net case study)
    • B2B solutions - Salesforce, Shopify
    • Services apps - UberEats, Delivery.com
    • Shopping - Walmart

    You can see more apps and case studies here

    Why choose React Native

    TL;DR: Go for React Native if:

    • You need to reach your audience on multiple platforms, and fast.
    • Your app idea is a consumer-facing app with a straightforward use case (or e.g. an MVP).
    • Your competitive advantage does not rely mostly on OS-specific features (background video player, access to utility features) of heavy animations.

    React Native has numerous advantages for most businesses out there. Besides the speed and the cost of the app’s delivery and maintenance, it requires fewer UI sacrifices compared to other cross-platform solutions. The performance is near native, and the number of case studies from companies (big and small) confirms that it seems to check all the boxes for both users and businesses themselves.

    The key React Native challenges to consider are: your app’s scalability plans (dealing with a lot of data may significantly hinder the React Native app’s performance), the user interface design complexity, and the amount of modules that have not yet been developed in React Native (they can take up a lot more time from your development team). To see if your app’s backlog has any, you can consult your software development partner.

    That being said, remember that your app’s success very much depends on the developers’ skills and expertise. When building your cross-platform app, choose a partner who will be able to estimate all the risks and potential opportunities for your app in the given technology. With React Native, it is good if your partner has some experience in building native apps as well.

    Check out also

    Maybe it’s the beginning of a beautiful friendship?

    We’re available for new projects.

    Contact us