React Native App Development Guide: Challenges and Best Practices

Since 2009, MobiDev has built a large number of cross-platform products as a part of the company mission to meet client’s needs through our consulting and engineering services. With over seven years of personal experience in cross-platform application development and proficiency in major frameworks, I firmly believe that the key to creating a successful product lies not solely in the technologies employed, but rather in the comprehensive understanding of their distinct features and the expertise possessed by software architects and engineers. React Native is no exception. 

So, in this guide, I am going to share my own experience and insights on React Native app development and explain how it can meet the goals the business wants to reach with a particular product. Moreover, you’ll find examples of real-world products built with React Native to see how it works in practice. 

IS REACT NATIVE GOOD FOR YOUR APP DEVELOPMENT?

It will be nothing new if I say that React is a free and open-source front-end JavaScript library, maintained by Meta, and it can be used for mobile app development via React Native, a library also developed by Meta, that transforms React components into native components (iOS and Android). React Native offers wide cross-platform capabilities, helping to address a broad spectrum of business requirements. Within a few years of its launch, it has become one of the most popular solutions for efficient cross-platform mobile app development. React Native has some strong sides, like flexibility, modular architecture, and third-party library support. No wonder many of the most famous and profitable mobile applications including Facebook, Instagram, and Skype have this technology in their stacks.

However, before delving further, it’s crucial to keep in mind that React Native, like any technology, serves as a tool to meet specific business needs. Its utilization doesn’t ensure inevitable success. What truly matters is the expertise of engineers and architects who possess the ability to align your business requirements with technological capabilities, identifying the optimal solution tailored to your specific scenario. This precise methodology is the foundation of our approach at MobiDev. 

Moreover, choosing between native or cross-platform app development must be the initial stage of the project. This choice relies on the UI, business logic, and functionality. Cross-platform technology will be suitable if there is a common business logic and similar UI for all platforms, and the app doesn’t have platform-dependent functionality at its core. For any solutions requiring native code to implement the majority of core functionality, native development will be preferable. 

TWO APPROACHES TO DEVELOPING REACT NATIVE APPS

Generally, there are two modes to develop React Native apps: utilizing React Native CLI or using a set of tools called Expo. 

1. DEVELOPMENT WITH REACT NATIVE

This approach includes the development of apps using React Native directly while deploying necessary native environments and tools. React Native offers a smooth way to use native features (APIs and parts of an app), providing a developer with more freedom and control over how to create an app. 

Using this approach, it is possible to develop apps for different platforms (like iOS and Android) using JavaScript and React. By combining natively with the power of React, there is an opportunity to combine the best of both worlds and get results that meet specific business requirements and the expectations of the end users.

2. DEVELOPMENT WITH EXPO

Expo is a pack of tools built around React Native to make it more accessible for developers. It offers a variety of high-quality native libraries, all bundled together into a single package called ExpoKit. Despite ongoing improvements and enhancements, Expo still has some limitations, for example, when it comes to available plugins. However, due to its accessibility, Expo remains popular and is commonly used for creating simple applications or for some specific tasks. 

The approach to React Native app development should be determined at the very beginning to guarantee that the architecture of the product meets the predefined requirements. From my point of view, Expo is optimally suited for prototyping, MVP, and PoC solutions, or for cases where you have a team of web developers unfamiliar with mobile development. However, everything depends on your unique business case, so it’s crucial to think about your idea and the technological characteristics of your project first. 

If you’re unsure what to choose and how to bring your idea to life, our software architects and consultants can help in aligning business objectives with technological capabilities and selecting the optimal technologies. Additionally, they can create a clear roadmap for product development to make the whole development process easier and more effective. 

WHEN TO USE REACT NATIVE FOR CROSS-PLATFORM APP DEVELOPMENT

If you have already decided that a cross-platform product is your choice and are considering React Native, let’s take a look at some use cases when we may use React Native as a development option. Of course, in each case, we need to pay attention to unique business needs as they can be solved with various technologies or even a mix of them. 

1. REACT NATIVE FOR MVP OR POC DEVELOPMENT

React Native can be a good choice for MVP or PoC solutions that require a clear client-server architecture. Usually, such solutions are developed under limitations like a tight budget and rapid time-to-market. React Native can be used to address these challenges quite effectively due to its market popularity, customization flexibility, and other features. The React Native’s hot reloading feature combined with a vast library of pre-developed components can seriously speed up the development process that is essential for validating business concepts without massive investment.

Another key feature of React Native that increases flexibility which is crucial for MVP and PoC development is code push, which enables developers to make changes to the app directly for end users instead of through a mobile store. Therefore, if the application needs to be frequently updated, React Native allows updates to be rolled out on short timeframes.

When developing MVP or PoC using React Native, it’s essential to consider the following best practices:

1. Code reusability and efficiency. It’s crucial to ensure React Native’s code reusability to accelerate development. However, remember that this primarily applies to business logic and source code, not UI components.
2. TypeScript integration. Consider integrating TypeScript for improved error checking and bug reduction, enhancing the overall development process.
3. Responsive design implementation. Ensure your app incorporates responsive style properties to maintain consistency across various devices and screen sizes, enhancing user experience.
4. Performance optimization. Prioritize performance optimization, especially when handling large datasets or complex UI elements. Utilizing React Native’s built-in components like FlatList and leveraging optimization tools such as Hermes may help to improve app launch times.

Among the challenges and limitations of using React Native for MVP and PoC development are: 

1. Custom UI development. React Native provides extensive options for UI customization. However, some custom implementations may require extra time and expertise due to fewer readily available solutions compared to native development.
2. Dependency on native components. React Native relies on native components, which can present challenges, especially when platform updates impact performance or functionality. Having team members experienced in native development can help address these issues.
3. Thorough testing on Android and iOS platforms.  It’s important to remember that testing with attention to detail is crucial during development, as there are differences between platforms that need to be considered.

2. YOU HAVE OR PLAN TO HAVE A TEAM OF JS DEVELOPERS TO SUPPORT YOUR APP

React Native is proud of its robust community backing, with extensive resources and contributions from developers globally. This ecosystem offers readily accessible solutions to common issues and enriches the framework’s functionalities with open-source libraries and components. Therefore, team augmentation with React Native developers, or even building an in-house team for your next project, won’t be difficult. 

Moreover, React Native can be a good choice if you plan to engage JS developers for post-release support or have a cross-platform app as a part of an existing infrastructure built with React. For example, we used React Native to build an IoT solution to fit the client’s in-house team’s expertise responsible for further development and support of the product. 

Another example is an app built with React Native to fit the client’s existing infrastructure. You can find out more about this project below.

MOBIDEV CASE STUDY #1: BUILDING A REACT NATIVE-BASED APP FOR ROUTER SETUP

This project was started in 2020 when a client came to MobiDev with the task of developing a React Native-based application for router setup to offer better service and improve customer experience. 

Project goal: to create a cross-platform application for Android and iOS to help users configure routers

Industry: Services 

Cooperation model: Dedicated development team 

How we delivered: 

1. Started with the tech consulting stage. Our team carefully analyzed all functional and non-functional requirements to build a clear development roadmap for the project.  Since the client’s existing infrastructure was built with React, the utilization of React Native for this project was an understandable choice to facilitate further application support.
2. Created a customizable UI. Based on the deliverables of the previous stage, our team created a customizable UI of the app. The solution should have been mobile and tablet-responsive and highly customizable to ensure flexibility for the end-users. If necessary, the client should be able to change such elements as colors, logos, etc. React Native allowed us to achieve these goals using existing libraries.
3. Integrated the app with a router. Implementation of complex logic for requests to the router and handling network connections were the most difficult tasks of this project. The developers had to deal with a challenge here: when the user was making changes to the router through the application, the router had to reboot and temporarily disappear from the network. The app needed to find the router in the network again and connect to it. This was negative for the user experience and made the process more time-consuming because the user needed to select the required Wi-Fi connection and set all settings again manually. To change this, we implemented the ability of the app to do all this work automatically. This made the experience with the app more user-friendly and optimized. 
4. Delivered the solution within strict deadlines and a fixed price. The solution was developed within the framework of the fixed price model and had an approved budget and deadlines. With extensive React Native expertise, our team delivered the project within strict deadlines to meet the client’s needs.

The experience with this project has demonstrated that  React Native is a competent technology for working with networks. The choice of React Native allowed the developer team to simplify the process of carrying out all the necessary integrations, such as payment systems, audio and video calls, live chats, etc. A massive range of available NPM packages made it possible to find solutions even for narrow cases, which significantly speeds up the process of developing a cross-platform application.

3. REACT NATIVE FOR B2B AND ENTERPRISE APPS

As enterprises usually need to deal with scalability issues and work on the longevity of their products,  they might think of React Native as a viable option. In tandem with Node.js as a backend choice for React Native apps, it allows for building fast, scalable, networked applications.

The maintenance and update process both become more manageable with React Native, as codebase modifications can be simultaneously applied to both iOS and Android platforms. This is particularly beneficial for enterprise-level applications that require frequent updates to keep up with constantly evolving business needs.

MOBIDEV CASE STUDY #2. REWRITING A LEGACY FITNESS APPLICATION WITH REACT NATIVE

The work on this project started in 2018 when the global company that provides services for fitness trainers and their clients reached out to MobiDev to upgrade their core product. The client had an existing app built with outdated JS technology, so the request was to rewrite it with React Native and add new functionality. We worked closely with the client’s in-house development team to achieve these business goals.

Project goal: to rewrite an outdated JS app with React Native and upgrade it with new features

Industry: Fitness and lifestyle 

Cooperation model: Team extension

How we delivered: 

1. Expanded development capabilities of the client with our developers to rewrite the app. Choosing  React Native enabled the client to leverage the same code base for both platforms. Our team examined every code snippet before deployment to ensure it met the standards. As a result, we were able to integrate changes and new features into the product more efficiently.
2. Added new features to enrich user experience. The project included complex business logic and numerous interconnections. To meet project requirements, we employed a mix of existing React Native libraries, native components, and custom elements. For this project, we composed a lot of custom native components, including the one for calendar schedules.

Cross-platform development with React Native saved up to 80% of the effort for the client compared to previous methods, The MobiDev team worked efficiently by combining React Native’s existing libraries, native components, and custom elements, and the best practices from our experience allowed us to keep the development process standardized, yet flexible. This helped the client accelerate the development process and achieve their strategic goals faster. 

4. REACT NATIVE FOR WEB DEVELOPMENT

React Native doesn’t support the web directly, but with the help of additional solutions, you can use most of the RN codebase for building web applications. React Native for the Web is one such solution. However, not all native components are browser-friendly. This means that it can be impossible to completely port software on the web using React Native for the Web. It is possible, however, to transfer the vast majority of it, which is usually acceptable. The modular architecture will be helpful in this case as well. 

REACT NATIVE LIMITATIONS

It’s crucial to remember that any technology has limitations that can affect functionality, scalability, and growth. Therefore, it’s essential to verify if React Native can meet your project requirements and make sure you have experienced engineers to tackle possible challenges.

Let’s take a closer look at the use cases when utilizing React Native applications is associated with additional challenges.

1. Apps with heavy native code requirements

In cases where extensive native code is required for specific functionalities not supported by React Native or third-party libraries, utilizing React Native is less efficient compared to fully native solutions. If you need native-dependent features, which are core for the product and require platform-specific coding, consider native Android and iOS development. This often includes AR development, projects with Bluetooth connections, and so on.

2. Apps with complex non-standard UI

When it comes to creating more sophisticated custom user interfaces, Flutter usually works better compared to React Native. Both provide plenty of UI components and widgets. But if non-standard custom design is the core of your project, it might be easier to consider Flutter app development services instead, since this framework is highly customizable by default. However, React Native can be applied to most business scenarios.

3. Apps with high-performance graphics and computations

In scenarios demanding intensive graphics or data processing, native development may provide superior performance compared to React Native. While React Native’s performance is typically satisfactory for most applications, it may not meet the requirements of graphically demanding or data-intensive workloads.

4. If you require immediate availability of new platform features

React Native might have issues in implementing the latest platform-specific features immediately after they are released by iOS or Android. If adopting the latest native features as soon as they are available is essential for your app, native development might be preferable.

CHALLENGES AND BEST PRACTICES FOR REACT NATIVE MOBILE APP DEVELOPMENT

There are numerous resources discussing the advantages and disadvantages of React Native. However, categorizing technologies as inherently good or bad oversimplifies the topic. As I’ve already mentioned, the suitability of a technology depends greatly on the specific requirements of the project and the proficiency of the developers involved.

An experienced React Native development team can navigate potential risks effectively and devise innovative solutions to address unique challenges within a project. In the section below, I’ll outline some challenges we’ve faced in our experience and elaborate on the strategies we’ve employed to overcome them. It’s important to note that having these issues is not inevitable, and in some cases, they never happen and can be avoided.

UI CUSTOMIZATION

By leveraging the React.js library, React Native can cover many cases. The limited number of native components isn’t a roadblock, because the community plugins can be used instead of them. However, custom UI implementation may require more time and some expertise, because React Native has fewer out-of-the-box solutions for this. For example, in some cases, React Native lists can have performance limitations that will not be a problem for experienced developers but can be a challenge for beginners. 

DEVELOPMENT EXPERTISE

You should clearly understand what expertise you need for your product development. For example, not all React web developers understand how an application should work on mobile: UI patterns, UX nuances, and so on. At the same time, a mobile developer may not fully grasp web functioning. Hence, a simple JS developer without specific platform experience is insufficient. 

As React Native utilizes a lot of native components, something might not work as it should. For example, we faced a situation when an Android update caused some performance issues that needed to be resolved. Vendor updates can affect the operation of apps. The issues might vary: some are unpredictable, while others can be prevented, and an experienced development team can help with this. 

Allocating resources to team members proficient in both React Native and native development can yield significant advantages. This dual proficiency empowers the team to maximize the benefits of React Native while also possessing the capability to develop custom solutions when React Native’s capabilities aren’t enough. 

At MobiDev, we have developers with  React Native, native development expertise, and both to ensure that your business needs are met in the most efficient way possible within one development team.

PERFORMANCE AND STABILITY

React Native can face compatibility challenges during version updates. However, this doesn’t mean that every update will disrupt your app. It’s best to implement updates once they’ve demonstrated stability. Updates can sometimes cause issues, but they also indicate ongoing improvements made by the React Native team. Based on our experience, these issues usually don’t affect the project and can be quickly fixed by our seasoned team.

 Here are several best practices for providing good performance and stability: 

1. Maximize code reuse between platforms and use modular architecture for better maintainability and scalability.
2. Utilize native modules for intensive tasks and optimize images and animations to improve performance.
3.  Adopt a powerful state management library like Redux, and Mobx to manage application state effectively.
4. Test the application on real devices and use automated testing frameworks to assure quality and reliability.
5. Keeping React Native and its dependencies up-to-date can be difficult due to the fast-paced updates and potential breaking changes.

MOBIDEV CASE STUDY #3. IMPROVING THE PERFORMANCE OF AN EXISTING MAP-BASED APPLICATION 

The client came to MobiDev with a request to optimize an existing React Native-based application. The project included maps with displayed objects and markers over them. When increasing the number of markers, the client faced the limitations of the existing solution that prevented the application from scaling. The MobiDev team covered a bunch of tasks for the existing iOS and Android mobile applications using React Native tools, including performance optimization. 

Project goal: to conduct a set of tasks for the existing iOS and Android mobile applications, including performance improvement using React Native tools.

Industry: Agriculture & Landscaping

Cooperation model: Team extension 

How we delivered: 

1. Conducted software audit and created a performance optimization strategy. Our team started by conducting a thorough performance analysis to pinpoint areas of improvement. Following this assessment, we prioritized optimizations based on their potential impact and feasibility. 
2. Optimized React Native library used. While conducting the software audit, our engineers discovered native limitations on iOS and Android. The development team found ways to optimize the library and expanded its capabilities to display more markers on the map per screen unit. After the modification, the engineers increased the number of displayed markers from 2000-3000 to 10,000. 
3. Refined the performance of layers. To improve the management of layers, the development team added JS code that interacted with the native part and allowed layers to be rearranged depending on the index. The main challenge was that any changes resulted in re-rendering, which was quite energy-consuming. To change this, we added a limit on the visibility of markers. Reducing the number of rerenders and displaying elements on a certain area of ​​the map allowed for an increase in performance.

Our contribution allowed the client to successfully scale the solution until the release of the new version of react-native-maps 2.0.0, which the client planned to switch to. The new version of the library promises to improve performance and fix some known vulnerabilities.

In such projects, we need to remember that when working with maps, we interact with native elements, which we access through a bridge. Because of the use of this third layer, we lose in performance. 

This point must be taken into account immediately at the stage of creating the project architecture, because then it may turn out that there are critical limitations that we cannot break through. It is also important to optimize the flows of rendering and receiving data on the React Native side. Try to make the components on the map as static as possible and don’t require re-rendering, because this takes up a lot of resources.

Nikita Krapyvnyi

JavaScript Developer

OPT FOR MOBIDEV REACT NATIVE APP DEVELOPMENT EXPERTISE 

With an increasing demand for React Native in the market, you have various options for hiring React Native architects and engineers. You can establish an in-house team, outsource development to a software provider, or opt for a hybrid approach. At MobiDev, we offer diverse cooperation options tailored to your immediate requirements and long-term objectives. Whether you need experienced React Native developers to augment your existing team or prefer a dedicated team for end-to-end product development, we’ve got you covered. 

From tech consulting to ongoing development and product launch support, we’re equipped to assist you in achieving your business objectives. Explore our React Native app development services to learn more about our cooperation options and how we can contribute to your success. Don’t hesitate to contact us through your preferred communication channel for further information.