I’m Sneh Pandya and here’re my reasons why I decided to move from native platforms to React Native.
The recent exponential growth in the adoption of mobile apps can be attributed to the increasing popularity of the iOS and Android platforms. However, developing and maintaining an efficient app is a complicated process and requires the investment of a significant amount of time and money. Improvements, periodic updates and fixes are critical for the overall success of an app in the long run.
React Native: What is it?
React Native is written primarily in JavaScript and is classified as a hybrid framework, meaning that it’s platform independent. This separates it from traditional apps written in native languages, such as Java or Kotlin for Android and Swift or Objective-C for Apple. Instead, hybrid apps have a single codebase that produces an app that will run on both Android and iOS devices. The benefit to this is obvious: less code and related logistics when compared to writing a pair of native apps using different languages. The drawbacks of hybrid apps are that they aren’t as performant as their native equivalents, and they sometimes lack the ability to make full use of a device’s resources.
Most hybrid frameworks that you may be familiar with, such as Ionic, Cordova, and PhoneGap, rely on what’s known as a web view to accomplish their cross-platform capabilities. Essentially, they embed a webpage inside a native app and hook into it to integrate with the underlying device. The problem with this is that web views run into performance issues and have other limitations, especially when hosting complicated apps.
React Native vs. native platforms: The differences
If React Native feels almost native, how exactly is it different from a platform-specific native framework?
A native app is made with platform-specific code in a language dedicated to a given mobile OS. Typically, these are Java and Kotlin for Android or Swift and Objective-C for iOS. To develop a native app, programmers work in an integrated development environment (IDE) specific to a given operating system.
React Native does things a little differently. It doesn’t use web views but rather a system that allows it to render native components (hence the name) from its base JavaScript code. There’s a common misconception that React Native compiles JavaScript down to native languages, such as Swift or Java, but that isn’t the case. When Facebook developers first introduced ReactJS to the world at the 2013 JSConf event, they could hardly predict how this announcement would impact the mobile and web development space. Today, in 2021, with nearly 2,300 contributors and more than 21.5 K commits in 74 branches, React Native (RN) is one of the most popular GitHub repositories.
React Native over native platforms: The benefits
Cross platform: React Native can run on both Android and iOS, targeting both platforms with the output of a single development team and codebase. This makes it easier to prepare the logistics, planning, development, testing, and deployment. This translates into a lower cost and time to market compared to native development, making it the primary benefit of the technology.
Compatibility with and support for native modules: Native modules can be used to supplement a React Native app to help address performance issues or provide support for platform-specific functionality. This gives developers the capability to leverage (at least some of) the best of both worlds.
Interoperability with native code: React Native view acts as a native view, and you can combine native views with React Native views. This allows for a gradual transition where you choose which parts of the application you want to migrate to React Native first.
Hot reload: React Native supports both hot reloading and live reloading, which means that developers are able to quickly see and test changes as they’re made. The ability to do this without having to manually reload an app and lose the present state is a great productivity boost during development.
Ease of learning: React Native carries forward the fundamentals of JavaScript and is easy to learn and understand. Moreover, the developer community has also made it possible to generate and access a bunch of resources and tutorials, which eases the learning curve.
Coding conventions: React Native is based on a declarative programming paradigm, which focuses on specifying the intended results instead of providing guidelines on how to achieve them. This is considered an opposition to imperative programming, which provides commands to a computer to perform. The advantage is that declarative programming clearly results in more understandable and easily scalable code. Hence, React Native is highly readable and easier to learn, especially for less experienced programmers.
Cost effective: React Native allows different app components to be easily reused for both platforms and hence cuts down costs significantly.
Community driven: React Native is not only open source; it is also actively maintained by a strong community that is consistently active and growing. The react-Native GitHub repository is one of the most active repositories. This makes the platform popular, and it receives bleeding-edge updates.
Reusable components between React and React Native: The React architecture powers both the mobile and web UI, which creates additional potential for code reuse. These reusable parts include APIs, state management, and utility methods implemented in JavaScript between React and React Native apps.
Native-like experience: React Native communicates with native UI components via a JavaScript bridge. There’s no web views trickery, which is why the look and feel of React Native applications is head and shoulders above hybrid HTML5/JS apps. React Native also has well-known solutions for 60 fps animations and dynamic interactions that can challenge those of a true native application.
Third-party libraries: Given how huge the developer ecosystem is, there is a vast variety of third-party solutions and libraries for React Native. This can help developers build apps with reusable code and create unique experiences while speeding up the overall development.
Release without hassle: Mobile apps built using React Native get accepted as easily as native ones as long as you stick to the essential programming guidelines.
React Native over native platforms: The drawbacks
Non-standard components: The majority of apps consist of the same UI components, such as app bars, buttons, cards, navigation, etc. If your app relies on unconventional UI elements, implementing them in native code might be a better idea than using React Native.
Native module and API accessibility: All of the device’s different APIs, as well as its inbuilt functionalities, can easily be integrated with the native environment compared to the React Native framework. This puts native development ahead of React Native in cases where there is a need to access the device’s native elements, such as the sound recorder.
Performance: When it comes to performance, native development has the upper hand. React Native apps can perform fine if they are not filled with complex technologies, like IoT or AR/VR. Native development can provide simpler implementation of tech components and improved performance. React Native is for moderately complex applications, while native development is for complex apps with high performance requirements.
Backward compatibility and legacy support: From a long-term perspective, native development can have a few advantages. Android and iOS products are known to have maximum backward compatibility, so upgrading to the latest version won’t decrease the app’s usability. Frameworks like React.js and React Native are used by Netflix, Skype, Tesla, Instagram, etc., so it is safe to assume that updates would not be a problem.
Update issues: It is hard to keep an app updated with the latest React Native version. Updating React Native versions is usually a complicated process.
If you are new to React Native, then check this step-by-step tutorial where we will show you how to create a React Native project from installing all the needed software and dependencies to ensuring the quality of your React Native app.
React Native: Who is using it?
React Native is an extremely popular framework, and its popularity has been growing since its inception back in 2015. React Native is widely used to develop B2B applications, apps containing forms and dynamic images, software used by companies for internal purposes, education platforms, social media, etc.
The number of businesses using React Native for the development of their apps is remarkable. The framework is used by Facebook, Instagram, Skype, Shopify, Walmart, SoundCloud, Microsoft, Uber, LinkedIn and many other companies.
Bloomberg is a company that provides finance-related tools and applications. The Bloomberg app is built using React Native. With React Native, Bloomberg was able to introduce automated code-refreshes, meaning users will always get the latest updates once the app is launched.
Wix is a cloud platform for developing websites. They started with React Native back in 2015. Although the shift came with some challenges, Wix developers feel they have grown from overcoming them.
Walmart has made it possible to share 95% of their codebase between Android and iOS thanks to React Native.
Salesforce is a CRM platform geared toward sales teams. Businesses use Salesforce for marketing, sales, eCommerce, and service. Einstein, a Salesforce app-building platform, is built on top of React Native.
Pinterest, a social network-like platform, uses React Native because of the framework’s capacity to share code from one platform to another.
React Native: When to choose it
Mobile apps have become an essential part of business for most organizations. Hence, the bigger picture and implications that come together must be considered when you are deciding whether to use React Native or traditional native development as your foundation going forward.
Below are the reasons why you should choose React Native as your primary mobile application development framework:
To build a cross-platform app with a fairly straightforward use case.
To quickly make a prototype or MVP from an idea and test its potential.
To maintain a single codebase and speed up the development process.
To utilize live and hot reloading, drastically reducing build times.
It is better to go with React Native when you have a strong team of JavaScript professionals who ideally have some experience with web programming.
When it is difficult to afford a big team of developers, it is wise to choose React Native.
React Native is preferable when you want to maintain consistent branding across multiple platforms.
React Native: Case studies
Khan Academy
In 2017, Khan Academy started using React Native to build their mobile apps. Currently, Khan Academy apps are 100% React Native. The design of their iOS and Android apps were nearly identical, and their mobile development team was small and didn’t require an extreme level of coordination. Below are the takeaways from Khan Academy:
They use React Native for the contents of a screen and native code for the navigation between those screens.
The majority of the business logic is in the screen’s content.
The navigation bars and navigation controllers are native to maintain a realistic look and feel.
When Khan Academy started using React Native back in 2017, the rule was that the app had to still feel native.
From 2015 to 2019, the localization grew from six languages to 19! Khan Academy has a homemade infrastructure for maintaining strings and locales.
Developer tooling is excellent with React Native, and the skills required for developing for individual platforms are not a hindrance.
They still have native code in the app, and the app sizes have reduced significantly.
Walmart
Walmart’s decision to migrate to React Native came from their dissatisfaction with their hybrid web-view-based mobile app. According to Walmart Labs, web views delivered a poor user experience, even on high-end smartphones. React Native proved to be the optimal solution that Walmart chose. Below are the takeaways from Walmart:
The migration to React Native was from a hybrid web-view-focused app.
Developer productivity was one of the primary reasons for choosing React Native over native development.
Simplifying the App Store review process was another major motivation for choosing React Native over true native implementation.
The overall performance of the React Native app, including graphics as well as RAM and CPU usage, was comparable to or better than the original hybrid app.
Apart from these advantages, the team faced a few pitfalls too. The use of two different JavaScript engines for live and debug mode impeded debugging. Also, in the early stages, some of the React Native features were exclusive to individual native platforms, which made development more difficult and limited cross-platform potential.
Airbnb
In 2016, Airbnb started adding React Native on top of its native stack. However, the strategy proved to be unsuccessful, leading Airbnb to discontinue developing apps with React Native. Here are the takeaways from Airbnb:
The development team needed to maintain three separate codebases despite having introduced cross-platform development.
The app required specific features that led to inconsistencies between iOS and Android while using React Native.
The apps were not built from the ground up. Instead, React Native was added to the existing iOS and Android codebases.
In 2016, the Android version of JavaScriptCore was so outdated that Airbnb had to implement a custom solution instead, which was another deal-breaker.
Some of the third-party libraries back then didn’t work well with either Android or iOS.
The above reasons led Airbnb to drop React Native from their roadmap and continue with Native frameworks.
Discord
For the developers at Discord, porting the logic to a proof-of-concept of an Android app only took two days. That being said, the concerns caused by the fragmentation of the Android ecosystem prevented the Discord team from moving beyond the PoC phase. Here are the takeaways from Discord:
Discord migrated 98% of its UI logic to React Native.
Version 1.0 of the app for the iOS was built in just two weeks, mostly by a single developer.
Porting iOS to an Android PoC only took two days, but Discord doesn’t use React Native for Android yet.
Conclusion
Choices can often seem intimidating, especially when they involve important business decisions. Choosing which path to follow for building your app is definitely such a choice, and it involves many parameters. However, choices are easier when you are armed with knowledge, and hopefully, this post has provided you with information that can make your task less daunting. Moreover, Codemagic CI/CD pipelines make builds and deployment of React Native apps faster and easier.
In case you are not a Codemagic user yet, you can sign up here:
With React Native, in most cases, you get the best of both worlds: less effort, lower associated costs and speedy time to market while still producing a robust and performant app. React Native is often the clear choice for rapid prototyping and the production of MVPs to evaluate whether or not the technology meets the long-term requirements of the project. These benefits make React Native a strong support system, even for large organizations.
Can success be achieved without React Native? 🤔 Let us know HERE.
Useful links and resources
Here’s an article on why Android developers should pay attention to React Native in 2021.
Here’s an article that lists 9 reasons to use Codemagic CI/CD tool for React Native apps in 2021.
Here’s an article on how to improve the performance of a React Native app.
Here’s an article on choosing the right database for your React Native app.
Here’s a practical guide on Continuous Integration and Delivery for React Native apps.
Here’s an article on end-to-end testing of your React Native apps.
Here’s an article on testing React Native apps with Jest and Codemagic.
Here’s an article on React Native Detox tests on Codemagic.
Here’s an article on Appium Mobile testing for React Native.
For discussions, learning and support, join the Codemagic Slack community.
Sneh is a Senior Product Manager based in Baroda. He is a community organizer at Google Developers Group and co-host of NinjaTalks podcast. His passion for building meaningful products inspires him to write blogs, speak at conferences and mentor different talents. You can reach out to him over Twitter (@SnehPandya18) or via email (sneh.pandya1@gmail.com).
