In this guide, you’ll learn:
Is React Native scalable, secure, and well-performing?
What are its pros and cons?
Which third-party libraries can it be paired with?
Which well-known companies are using React Native?
How does React Native compare to its alternatives?
React Native, like every other technology, has its pros and cons. It won’t be a perfect solution for every project.
How can you tell if it’s perfect for yours?
In this handbook, we will help you investigate it by sharing our:
- positive and negative lessons learned,
- best technology stacks that we’ve tested,
- recommendations of useful libraries,
- comparisons to similar technologies,
- and more…
In this particular article, we’re offering you a compact version of those findings = everything you need to know about React Native development in a nutshell.
Note: if you stand before a big decision you need details, we’re perfectly aware of that fact, that’s why everything we say here will be extended with time.
We’re aimed at creating a whole handbook about React Native app development.
If you want to get notified about upcoming chapters, consider subscribing for handbook updates.
React Native development – Overview
React Native is a mobile app development framework that allows developers to create multi-platform Android and iOS apps using native UI elements.
It started in 2013 as Facebook’s internal hackathon project.
Facebook’s goal was to bring all the advantages of web development, like quick iterations and having one team to develop the whole product, to mobile.
They released React Native’s first public preview in January of 2015 at Reactjs Conference. The framework has been put available on GitHub since 2015.
React Native apps’ performance is lower than native apps’.
A cross-platform app’s speed is always a little slower than native apps. However, most of the time it won’t impact the user experience. Most often the differences are unnoticeable.
What’s more, as the JS runs on the client’s, not the server’s side, the performance highly depends on hardware, software, and code quality.
There are two types of issues developers complain about:
- Application size – React Native uses numerous APIs, third-party libraries, and native components. The advantage is speeding up the development. But a lot of these elements make the app heavy. To reduce an app’s size, optimize native libraries, compress images, and convert JSON data into static object IDs.
- Memory leaks – it often happens because of a lot of complex processes in the background or queues on the bridge, especially on Android. Use profiling tools on Android Studio or Xcode to trace memory consumption runtime and identify the cause of memory leaks.
React Native’s scalability is limited and sometimes may cause problems (more on that topic in the upcoming chapter).
Luckily, the React Native team constantly works on improvements, and newer versions allow for more and more, as can be seen in the examples of Facebook, Instagram, and Walmart later in this article.
But the scalability of your app is not only the matter of React Native itself but more importantly the architecture: you can successfully structure the modules of your app for scale.
Security becomes a little inconvenient if you are using React Native to create an app that requires type A security (like mobile banking apps).
In such cases, developers need to pay extra attention to malicious code snippets, especially in case of using any 3rd-party add-ons.
With React Native, frontend web developers can become mobile developers without the need for learning Swift or Java.
Does it require much additional learning?
We can’t promise that developers who know React.js will switch to React Native development frictionlessly. They will need some knowledge about native UI elements.
It’s important to note that mobile applications’ structure, integration with built-in components (camera, GPS, microphone, push notifications, Android/iOS operating systems), and application’s context are completely different than in web apps.
Key take-away: for developers familiar with React.js but inexperienced in mobile development, getting to know React Native won’t be completely frictionless. They will have to learn about native UI elements and mobile programming concepts.
In web applications context is provided by the browser (device-specific); in mobile applications context is most often provided by Android and iOS operating systems. Knowledge of these two systems and the differences between them is essential to properly develop mobile applications in React Native.
On the upside, most of the components written in React Native are suitable for both platforms. It is rare to write your own native components in Android and iOS.
React Native brings agility and speed into development. Why can we say so? The reason is: you will need one team instead of two to create your mobile app as most React Native components can be reused between iOS and Android.
Limitations of React Native
As said before, React Native, like every other technology, has its limitations.
- Lack of support for some iOS and Android features.
- The need to use native developers’ knowledge – especially if you put heavy computational operations into your app.
- Some components may behave differently on iOS and Android.
- Dependency on third-party libraries.
- Slightly lower performance.
- Possible issues with updating React Native versions.
React Native app development myths
With React Native you develop one app instead of two
You still need to develop a dedicated app for each platform – Android apps must meet different requirements than iOS apps. The advantage of cross-platform is that you use one technology instead of two, so you only need one team.
It’s easy to work agile, and the whole process is faster especially if you share most of the code. But you still work on these apps separately. Also, that is why cross-platform development doesn’t decrease the cost by 50% (another myth).
With React Native you create hybrid apps
Hybrid apps created with frameworks like Cordova in their essence are Webview apps with access to hardware features.
Benefits of React Native
React Native provides lots of benefits, both from developers and business perspectives.
Frequently mentioned advantages include:
- Development speed – developers can reuse and recycle components created by them and the whole community.
- Faster time-to-market – you can appear on the market faster to test your MVP.
- Easy to work with – time-saving and robust tools make React Native development pleasant.
- Code reusability – it depends on the specific project, but with React Native teams can usually easily reuse 50-90% of the code. Developers can also use the web app’s code written in React to create a mobile app.
- Lots of pre-developed components – they accelerate your team’s work.
- Easy changes preview – just by hitting “Command+R”, without the need to rebuild each time.
When do you not want to use React Native?
Extensive visualization features, high level of customization, substantial user interactions – for heavy games better choose native development.
In this case, native development is faster than writing native wrappers. Battery monitors, brightness controllers, media players, or antivirus software – they always use native features and platforms’ APIs. It’s easier to write them using native languages.
Apps with complex User Interfaces
React Native app examples
Nowadays many well-known companies are using React Native for their mobile apps. Among them, you can find such brands as Walmart, Facebook, Instagram, Blomberg, and SoundCloud.
Walmart’s app allows users to browse products, check their prices, order them, and pay for the purchase. The team cared about productivity and time-to-market, so they turned to React Native development.
What were the results? They were able to share 95% of the code between iOS and Android, and achieved a nearly native performance.
Facebook Ads was the first React Native app for Android and the first app that was completely based on this technology. Facebook’s engineering team used React Native to provide clean, intuitive UX, and simple navigation.
What was the key result? A lightning-fast performance they needed.
Instagram chose to integrate React Native to their existing native app, beginning with the push notifications view. The team says that they were able to share 85-99% of code between Android and iOS.
React Native libraries
React Native Elements
React Native Elements is a UI toolkit that puts together great open source UI components created by developers. It includes components like pricing, overlay, divider, platform-specific search bars. They can be easily customized. The toolkit has 17,000 stars on Github.
React Native Vector Icons
React Native Vector Icons is a library of 3,000+ icons, possible to customize and style – a perfect fit for buttons and navbars. The library supports TabBar and Toolbar Android. It has almost 12,000 stars on Github.
Ignite CLI is a CLI of boilerplates, plugins, generators, and more, that helps you to save weeks or even months of work while starting with React Native. It’s a solid starter kit. The CLI has over 11,000 stars on Github.
React Native vs NativeScript
React Native vs Xamarin
Xamarin was developed by Microsoft and released in May 2011. To build a Xamarin app, developers need to code in C#.
Both React Native and Xamarin provide a near-native performance, both are used by well-known brands, and both provide great community support.
React Native vs Flutter
Flutter was created by Google in 2017. To create an app with Flutter, you need to learn a programming language named Dart, however, developers claim that is fairly easy to learn, and development is fun.
Although it’s the newest framework of the bunch, it has already become popular among developers. According to Stackoverflow’s developers’ survey from 2020, Flutter is more loved than React Native.
With React Native, a considerable part of the code can be reused. From time to time, you need a component or a set of components suitable for the platform you’re running.
With Flutter, everything is a widget, and the code is more reusable. You define one widget tree and reuse this logic.
Flutter pros and cons
- It is based on an object-oriented programming language named Dart, which developers need to learn (it’s considered relatively easy).
- It supports faster bug fixing.
- Its architecture depends on reactive programming.
- It is not supported by Continuous Integration.
- It’s not in a mature state yet.
- There aren’t many third-party libraries available so far, so developers need to build them themselves.
The future of React Native development
React Native is still supported by Facebook. Some companies are concerned about this dependency, because it may pose a threat of killing it any time. However, the good news is: currently over 60% of React Native code comes from independent developers’ contributions.
The threat appears to be even less serious as Facebook still heavily invests in React Native and it grows steadily. Community suggestions are quickly addressed and solutions to problems are provided in regular releases.
Key take-away: React Native grows steadily thanks to community contributions, as well as Facebook’s investments, regular updates, and releases.
The architecture of React Native is constantly modernized. There are plans to completely change the architecture of React Native to cover native modules, new renderer, and initialization improvements.
Bonus: Using OpenCV with React Native for image processing
OpenCV allows React Native developers to process images on mobile devices. In this bonus chapter, we present a tutorial, where we build an example tool that processes camera pictures with native code, using OpenCV and React Native – step by step.
This is only the beginning, much more can be said about React Native development.
If you want to investigate this framework further feel welcome to explore available chapters now or subscribe for handbook updates to get notified about new resources before they’re made accessible for the public.
This was an introduction to Handbook:
React Native Development: A Quick Guide
More chapters are coming!
New content will land on this handbook soon.
Should we notify you?
More chapters are coming!Notify me