React Native Development
Subscribe to this collection and be first to get notified when new content arrives.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Subscribe to this collection and be first to get notified when new content arrives.
This guide, in a nutshell, will help you discover everything you need to know about React Native development from a business perspective.
ARTICLES IN THIS COLLECTION
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:
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 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:
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.
As said before, React Native, like every other technology, has its limitations.
These include:
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).
Hybrid apps created with frameworks like Cordova in their essence are Webview apps with access to hardware features.
React Native displays components as native ones operating on a scripting language level. The application’s logic is implemented in JavaScript.
React Native provides lots of benefits, both from developers and business perspectives.
Frequently mentioned advantages include:
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.
If your app requires a lot of interactions, a high level of customization, and a lot of background processes – it may be better to go native. JavaScript allows for building smooth apps, but it may not be the best for those resource-intensive.
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 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 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.
NativeScript was first released in 2014 by Progress Software Corporation as an open-source framework for building truly native mobile apps with Angular, Vue.js, TypeScript, or JavaScript.
Both React Native and NativeScript are JavaScript mobile frameworks, and they both are fairly easy to learn for developers with experience in JS.
React Native’s biggest advantage over NativeScript is the multi-threaded architecture. This feature allows JavaScript processing to not interfere with UI rendering.
On the other hand, UIs of NativeScript apps can get stuck when processor-intensive JavaScript code is executed.
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.
The most important difference between these two technologies is the programming language they use. In the case of Xamarin, it’s C#, and in React Native it’s JavaScript. So your choice highly depends on the experience of your development team.
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.
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.
The React Native’s team current priority is making the library more lightweight by reducing API surface area and, as a consequence, improving the apps’ speed. Hermes, a JavaScript engine that should improve performance on Android is also under construction.
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.
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.
Enjoy!
Get smarter in engineering and leadership in less than 60 seconds.
Join 300+ founders and engineering leaders, and get a weekly newsletter that takes our CEO 5-6 hours to prepare.
