React Native: what is it and when should you use it?

1. What is React Native?
2. What skills are required to develop a React Native app?
3. What are the advantages of React Native?
4. What are the disadvantages of React Native?
5. In which scenarios would you recommend using React Native?
6. In which scenarios would you advise against using React Native?
7. Explore the Mobile App Technology Report

There have been numerous solutions that have helped web developers create mobile apps without the need to write native code. React Native is another one of those solutions.

It was developed by Facebook as a reaction to the struggles that it had with its own approach to mobile. Before React Native was open-sourced in 2015, Zuckerberg acknowledged that the “...biggest mistake we made as a company is betting too much on HTML5 as opposed to native.”

One of the main draw-cards of React Native is that apps are written in JavaScript, making it more accessible to the wider web community. The latest Stack Overflow developer survey listed JavaScript as still the most commonly used programming language. Although React Native apps are written with predominantly web-based technology, the major benefit that they have over other web-based solutions is that React Native actually renders UI components natively.

Since it was open-sourced, the React Native community has grown strong, with literally hundreds of official community-driven, open-source libraries to help developers create mobile apps faster and make them more reliable.

It’s not only the development community that has adopted React Native; many other extremely popular apps, such as Skype, Instagram, Pinterest, Discord, Words With Friends, Walmart, and Uber Eats, have also adopted it. It doesn’t suit all situations, however, Airbnb has written at length about issues it’s had with React Native.

React Native is based on React, one of the most popular JavaScript frameworks in the world, so knowledge of JavaScript is essential. Whilst knowledge of native development isn’t required, a familiarity with the fundamental differences between iOS and Android platforms would certainly be beneficial. As a minimum, a developer should feel comfortable enough with the build tooling required to produce native apps.

Speed of development: Being a cross-platform solution, speed of development is often seen as a major advantage of React Native. It means you only have to “learn once, write anywhere” should you want both iOS and Android apps written in their native languages, instead of learning and developing with two separate sets of technologies. 

It’s also built on the most popular language (for the 8th year running), which helps greatly when it comes to flattening the learning curve. This also helps for casting and managing team workloads, as developers can move between your web and mobile teams and are able to get up to speed relatively quickly. 

It can also be integrated into an existing native app, reducing development time for new features. Not only that, but your React Native codebase can also be used with your web app, meaning there is a possibility of three channels from the one codebase.

Maturity: React Native has been around for a while now, and since being open-sourced in 2015, the large number of community libraries and starter templates helps to reduce development time even further. 

Developer experience: Most web apps these days are compiled, but another benefit of using React Native is that they won’t have to support web browsers. This means the latest JavaScript syntax can be used, encouraging modern techniques and approaches. 

Another great benefit is fast refresh, which is a feature not available to native developers. Of course, you can also make use of TypeScript to allow you to develop in the JavaScript ecosystem with greater confidence around type safety, and most of the libraries have published their type definitions or come bundled with them.

Based on the advantages, it sounds like choosing to build your app with React Native is a no-brainer. However, there are also some limitations to React Native, so it’s important to take these into consideration before making your decision. The main things to watch out for are:

Animations: If your app requires a decent amount of smooth animation, then React Native may not be the best choice. By ‘a decent amount’, I’m not referring to something like Angry Birds, but subtle things like Spotify’s transition of the tab-bar/compact player to the large player. Your designers may not always be able to get the animation that they desire, so it’s important to explore whether or not the designed animation affects the performance too much.

Lists: If you have large lists, especially those that include images or video (think Instagram), then scroll performance may quickly become an issue that you’ll need to tackle. A good example of this is Discord. Whilst it still chooses React Native, the team needed to invest a large amount of time and effort into improving performance (even having to develop native modules to achieve this).

E2E testing: There’s no built-in default End-to-End (E2E) testing library for React Native. There are solutions such as Detox, but these aren’t as performant or reliable as the in-built E2E solutions that come as standard with Xcode and Android Studio. 

Why is E2E testing important? It allows automation of critical user flows, helping to stop any bugs from making their way into your production app.

Performance: Since React Native is based on JavaScript, it needs to ‘bridge’ across to the native platform in order to do things like rendering the UI, or communicating with the native elements, such as camera or audio. 

If you’re not careful, bottlenecks can occur, resulting in laggy user interactions, especially on older Android devices. In saying that, there is an open proposal within the React Native community that looks to improve this, so it’s something to keep an eye on.

User experience: Because of its cross-platform nature, it can be very easy to make unintentional compromises in user experience and flows when building apps with React Native. Whilst writing once for both platforms is a major benefit, there are subtle differences between platforms that ideally should be respected; for example, navigation, search experience, date pickers, and typography. 

Tech debt: JavaScript evolves at a far greater rate than native languages. Because of this, it’s important to stay on top of React Native and dependency updates; otherwise, tech debt is likely to increase quite quickly.

One of the major benefits of React Native is that it’s written in JavaScript, making it far more accessible to your existing web team. If you have a small team with predominantly web experience, then you should certainly consider React Native, keeping in mind the disadvantages discussed above.

Some good candidates for a React Native app are:

Messaging apps: Discord, a major player in this field, uses React Native, which says enough. Whether it’s creating your own messaging app, or integrating live support into your existing app, React Native could be a good choice.

Service apps: Apps that mainly display data with limited user input would be a good choice for React Native. This could range from health insurance to fitness trackers, or even your local coffee shop.

News apps: Typically, these apps are limited in terms of animation so are ideal candidates for React Native. They’re very data-driven, but can also include audio and video. News apps can vary greatly (e.g. Apple News vs FlipBook), so whether or not React Native is best suited for your app will depend heavily on the design and user experience required within these kinds of apps.

Utility and productivity apps: Whether or not React Native is best suited for utility and productivity apps depends heavily on the design and user experience required. However, some good use cases could be fitness trackers, timers, converters, weather apps, calculators, and to-do lists.

Fin-tech apps: Typically these won’t have much in terms of animation and will also be quite data-driven. If you have a look at some of the financial apps on your phone, there’s generally nothing special about them, so they could be a good candidate for a React Native build.

Experimental features: Let’s not forget that React Native can be integrated into an existing native app. This extra benefit means you can quickly and relatively easily build and test new features and/or workflows inside your existing native app.

As touched on previously, React Native may not be the best solution for anything that involves a decent amount of animation or visual editing; both image/video editors and games that require animation certainly fit within this category.

I’d also suggest that a native solution is a better choice for any app that requires heavy user interaction and a high level of performance; good examples of these are Google Sheets or Notion.

Even though the Skype and Discord apps have either been built with or include React Native, I’d recommend that an app that’s more involved, such as Spotify, should be built natively. The main reason for this is user interaction and expected behavior with native controls, the image-heavy lists, and the current state of community libraries.

If your app needs integration with Apple Watch, or even to display widgets, then you’ll need to write native code. React Native doesn’t cover these scenarios, but these can be added to your React Native app. That does mean, however, that you’ll most likely have very similar code (or even duplicate code) in both the native and React Native environments, which isn’t ideal.

Discover the ways in which you might be able to get more from mobile in our 2022 report on choosing the right technology. Whether you want to pursue React Native as your first choice or you’re still undecided, we can help you on your mobile journey.

Get in touch today if you’d like to discuss React Native or any other technologies and be sure to stay tuned for the rest of our mobile app series…