Guide to Cross-Platform Development Using React Native
Contents
Let's start with the basics. What is a cross-platform development? It's a development that doesn't require native code knowledge and allows developers to create two applications simultaneously. "Wow! Cool!" - any entrepreneur will say, realizing they can save a lot. But is it really that simple? Let's figure it out.
About 7 years ago, our tech lead saw tremendous potential in the newly emerged React Native (RN). Therefore, with his guidance, we started building cross-platform applications on it before it became mainstream.
Since then, the framework has proven itself to be one of the most promising development tools. It was created by Facebook (Meta) for writing native mobile applications for iOS and Android using JavaScript.
To not just talk about its popularity, let's boast some names: Facebook, Instagram, Bloomberg, Airbnb, Tesla, SoundCloud Pulse, UberEATS, and Shopify are all written in React Native. So, what are its strong points?
Advantages of Using React Native
One code for two applications
RN allows you to create applications for both iOS and Android using the same codebase. This significantly reduces development time and costs since there's no need to develop the application and new features separately for each platform.
Real-time updates
Development in RN enables us to utilize "hot reloading." This feature allows developers to see changes in the code in real time without stopping the application. Thus, you won't lose the application's state, which is particularly useful when editing the user interface. It accelerates the development process and makes it more iterative.
Large community
RN has an active community of developers worldwide, resulting in a wealth of libraries, tools, and resources that can assist developers in creating their applications and solving complex tasks. Additionally, Meta allows and encourages contributions and support for native technologies within React Native itself.
For example, in one of our applications, we needed functionality to add a loyalty card to Apple Wallet and found that libraries with all the necessary features we required were not available. In another application, we had phone number registration functionality with a large number of supported countries, and we wanted to immediately provide the correct mask for the user based on their region (without querying their geolocation!).
So, we created and released our libraries for the public use.
Library №1 allows obtaining device location settings without using a GPS tracker or through telephony (SIM card) (only for Android).
Library №2 provides certain Apple Wallet functionalities, such as adding passes, removing passes, and checking the existence of cards and tickets.
Low entry barrier
React Native is built on the React framework, which is a simple and popular technology. This means that developers experienced with React will find it easy to start working with RN. React Native allows developers to use a set of UI components for quick compilation and deployment of applications for iOS and Android.
Disadvantages of Using React Native
We are not inclined towards idealization, and over the years of our work, we have identified and accepted the drawbacks of the chosen framework. Let's discuss them.
Limited Access to Native Features
RN does not support all the features available on iOS and Android platforms. This means that developers may need to write native code to implement some functionalities.
Performance
RN applications may not be as performant as native applications. This is because RN applications use a bridge to access native APIs. Native applications have an advantage in resource optimization and memory management.
Dependency on Third-Party Libraries
Dependency on third-party libraries in React Native can lead to issues with updates and compatibility, as these libraries may not be adequately supported by their creators. Additionally, developers may encounter challenges with integrating and maintaining the code, requiring additional efforts to ensure the stability of the application.
When to Use React Native
React Native is ideal for the following scenarios:
MVP
If you are constrained by deadlines in creating a working prototype of an application for demonstration to investors and potential users, React Native offers a quick start and the ability to easily make changes.
We had a client who needed to create a cryptocurrency loyalty program application. For the MVP, it was sufficient to provide information about brands, assign and track activities, and provide the ability to interact with tokens.
A React Native MVP application was developed by a single developer in 1.5 months. The client plans to continue the project development, and RN will allow easy scaling as the user base grows and new features are added.
Projects with a standard interface
React Native is well-suited for applications with standard interface elements and user interactions. It's suitable for those which don't require deep integration with platform-specific features or complex animations and graphics at the native code level.
We have developed many food tech applications, which are essentially product (dish) catalogs. Most of the features of these applications, including the catalog, the shopping cart system, order checkout forms, and navigation, are implemented using standard React Native components. They are easily adaptable to specific needs and provide good performance and responsiveness to the interface.
Beerpoint
Additionally, React Native allows easy integration of native device capabilities, such as accessing the camera for barcode scanning, determining the user's location to suggest nearby stores, and tracking delivery status.
Applications with Frequent Updates
If your application requires regular updates to content or functionality, React Native simplifies and speeds up this process thanks to Over-the-air updates.
In one of our client's applications from Estonia, issues with booking appointments with masters were discovered after one of the updates. We quickly made the necessary fixes and distributed them via OTA, minimizing inconvenience for users.
Easystyle
Startups and Projects with Limited Budgets
For startups and projects where it's important to quickly enter the market with minimal costs, React Native allows simultaneous development of applications for major platforms without the need to hire separate development teams for each platform.
Choosing React Native for developing a food tech application with a loyalty program enabled us to implement rich functionality without exceeding a relatively limited budget.
John Dory
React Native has an extensive ecosystem with numerous ready-to-use components and libraries for both platforms. We utilized these to quickly implement complex features such as chats or notification systems.
If you have already/ plan a website developed in React
It's absolutely logical to choose React Native in such cases because you can reuse code and resources between platforms, thanks to the common programming language (JavaScript) and similar development patterns. This helps reduce costs and development time, as well as ensures consistency and uniformity in the user experience across all platforms.
We used React Native alongside React to develop mobile applications and a web version of a large clothing marketplace. For example, the registration and authentication mechanism used shared APIs for handling user data and sessions. This provided secure and convenient access to accounts both through the web and mobile applications.
You may get the impression that RN is only suitable for "simple projects." However, it isn’t. It provides powerful capabilities for creating complex animations and using native platform elements, making it a suitable tool even for applications with high graphic and interface requirements.
Thanks to React Native, in various projects, we were able to create complex and interactive elements such as smooth custom animations, graphical keys, interactive charts and diagrams, custom audio and video players, as well as complex forms with convenient validation.
When Not to Use React Native
High-performance Games
For developing complex games or applications with intensive graphics that require maximum hardware performance, specialized game engines such as Unity or Unreal Engine would be more suitable.
Complex Multi-functional Applications with Deep Platform Integration
If an application requires deep integration with the operating system or the use of platform-specific capabilities, it's better to use a native approach. This is because implementing this with React Native would be difficult or inefficient.
Applications Requiring Extreme Optimization
In situations where every millisecond of response time is critically important or complex real-time data processing is utilized, native development provides more control and opportunities for optimization.
Future of React Native
Why have we been writing in React Native for so many years, despite being tempted by other frameworks?
Support from Facebook (Meta) and the Community
Meta continues to actively invest in its development. Thanks to the large community of developers, the framework is constantly updated and improved: bugs are fixed, new features are added, and performance is enhanced.
Improving Performance and Compatibility
This is achieved through various initiatives, such as architectural refactoring (for example, the Fabric project). It aims to improve the responsiveness and performance of applications, as well as to deepen integration with native platforms.
Expanding Ecosystem and Tools
With the growing popularity of React Native, the ecosystem around the framework is also expanding. New tools, libraries, and plugins emerge, simplifying the development and testing of applications and expanding developers' capabilities.
Hybrid Development and Cross-Platform Solutions
The trend towards creating cross-platform applications capable of running on both mobile devices and the web continues to gain momentum. React Native, with its code reuse capabilities and integration with React for web development, remains at the forefront of this trend. Additionally, RN developers are working on the ability to support desktop applications.
Conclusion
We've shared why we chose React Native once and continue to remain loyal to it. We've explained the benefits of cross-platform development in general (at this point, it's not so important which framework you use). We haven't hidden various drawbacks and disadvantages from you. And if you need more examples, check out our case studies and compare them with the project you plan to create. If you have any questions, feel free to ask us on social media or through the feedback form. See you later!
Tags:
You may also like
Admiral. How we create badges in the menu
Dima Kasperovich, lead backend developer
Admiral
ReactJS
27.02.202410 minutes
React Native Splash Screen - support for different themes
Ilya Mazhugin, mobile developer
iOS
React Native
08.12.202313 minutes
Basic REST API for sending requests to the server using Axios
Artur Valokhin, lead frontend developer
JavaScript
28.07.20239 minutes