React Native stands out as a sought-after technology for developing cross-platform apps, which corresponds to modern market needs and lies at the core of the tech stack of numerous products. Improved performance, flexibility, and the possibility to create enhanced UI could prompt you to opt for this platform agnostic framework, though you still need to have a reliable partner and know all the challenges and best practices of React Native development.
At MobiDev, we’ve implemented a large number of React Native projects, gaining valuable knowledge and insights. This expertise allows us to clearly understand when choosing React Native is justified and what the potential pitfalls and the most effective strategies of the React Native project may be. In this article, we’ll share our expertise to guide you through the successful initiation and execution of your project.
Two Approaches to React Native App Development
Basically, there are two ways to develop React Native apps: using React Native CLI or relying on a set of tools called Expo.
1. Development with React Native
Standalone apps include the development of apps using React Native directly while deploying necessary native environments and tools. React Native offers a smoother way to use native features (APIs and parts of an app), giving you more freedom and control in how you develop your app.
2. Development with Expo
Expo is a collection of tools built around React Native with the aim of making React Native more accessible for developers. It essentially offers an assortment of high-quality native libraries, all bundled together into a single package called ExpoKit. Despite constant enhancements, Expo still has some limitations, for instance, in terms of available plugins. However, due to its simplicity, Expo remains popular among startups and for creating straightforward applications.
The approach to React Native app development should be chosen at the starting point to ensure that the architecture of the product meets the predefined requirements. From our 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. But everything depends on the case, so it is better to involve experienced developers to decide whether Expo will be a good solution for your project based on the type of app or business.
When to Use React Native for Cross-platform App Development
Selecting 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 identical UI for all platforms, and the app itself doesn’t have platform-dependent functionality at its core.
Evaluate the balance between overall and specific functionality to determine whether cross-platform app development is worthwhile in your case. For any solutions that require writing native code to implement the majority or core functionality, native development will be preferable.
However, the adoption of cross-platform solutions shows no signs of slowing down, and we’d definitely recommend using React Native in the following four cases:
1. MVP or PoC Development
React Native is an excellent choice for MVP or PoC solutions that require a straightforward client-server architecture. Typically, startup solutions are developed under constraints like a tight budget and rapid time-to-market. React Native addresses these challenges effectively due to its market popularity, customization flexibility, and a host of beneficial features. These features not only expedite but also streamline the development process, with ‘Hot reloading support’ being a prime example.
Another key feature of React Native that allows projects to be flexible is code push, which enables developers to make changes to the app directly to end users instead of through a mobile store. Therefore, if the application anticipates frequent updates, React Native allows critical updates to be rolled out in critically short timeframes.
2. You have a team of JS developers to support your app
A large community and seasoned developers often are the reasons for choosing React Native for cross-platform apps. This makes hiring external developers or building an internal team easy. Moreover, React Native is the top pick if you plan to involve JS developers for post-release support or plan a cross-platform app as a part of an existing infrastructure built with React.
3. B2B and enterprise apps
Enterprises concerned about the scalability and longevity of their products will find numerous benefits in React Native. Although it is still officially in beta, it has demonstrated its stability and growth potential and has been already successfully adopted by globally recognized companies. In tandem with Node.js as 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 crucial for enterprise-level applications that demand frequent updates to address evolving business needs.
4. Apps with standard interactions and UI
UI components and libraries available for React Native simplify building cross-platform mobile apps. React Native extensively depends on third-party libraries and tools, presenting a potential risk if such resources aren’t consistently maintained or updated.
While it facilitates the creation of straightforward and efficient user interfaces, it might not be the best choice for projects involving non-standard UI elements that need to be drawn from scratch. React Native has plugins to address this challenge, but it requires good tech expertise and time.
Case Study:IOT SOLUTION FOR HOME NETWORK MANAGEMENT
When React Native is Not the Best Choice
In some cases, React Native can create additional complications like any other technology. This doesn’t mean that it cannot be used at all but only warns you about possible pitfalls when solving some specific business problems.
1. Apps with Native-dependent functionality
When choosing your project’s technical stack, determine if cross-platform functionality fulfills your requirements. If you need native-dependent features, which are crucial for the product and require platform-specific coding, consider native Android and iOS development. This often applies to AR development, projects with Bluetooth connection, and so on.
2. Apps with complex non-standard UI
When it comes to crafting intricate custom user interfaces, Flutter is superior 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.
If your app needs a unique, complex UI, Flutter is a better fit. It relies on its own rendering engine, independent of the platform’s native components, ensuring a consistent UI across different platforms. This is crucial for apps needing a uniform design and user experience on various operating systems. Nonetheless, React Native can be easily applied to most business scenarios.
Considering React Native vs Flutter vs Native Script
Let’s compare React Native to Native Script and Flutter technology which are also popular in cross-platform app development.
JS offers flexibility and ease in resource hunting. If a company already has JS developers, or there’s a plentiful supply in the market, and the company plans to maintain the app independently, React Native could be the better choice.
Challenges and Best Practices of React Native Mobile App Development
You can find numerous resources highlighting the pros and cons of React Native. However, classifying technologies as good or bad isn’t entirely accurate. The aptness of technology heavily relies on the project’s specific needs and the developers’ expertise.
A development team that is well-versed in their technology of choice can mitigate potential risks while offering creative solutions to unique challenges. In the following sections, we share some challenges we’ve encountered in our experience and explain how we’ve overcome them. Bear in mind that these issues are not guaranteed to occur, and sometimes you can avoid them.
By leveraging the React.js library, React Native can cover many cases. The limited number of native components isn’t an insurmountable obstacle, 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 ReactNative lists can have performance limitations that will not be a problem for experienced developers, but can be a challenge for beginners.
Dependency on Native Components
As React Native utilizes a lot of native components, something may break. For instance, we faced a situation when an Android update caused some performance issues that needed to be resolved. Meaning, vendor updates can affect the operation of apps. Their severity varies; some are unpredictable, while others can be anticipated, and an experienced development team can help with this.
Some issues can be addressed by involving native developers, which is a route we take in our company. They can assist in creating custom solutions and understanding how things should work on specific platforms.
Not all React web developers understand how an application should work on mobile: UI patterns, UX nuances, and so on. Conversely, a mobile developer may not fully grasp web functioning. Hence, a simple JS developer without specific platform experience is insufficient.
Many web developers lack mobile platform understanding, which explains Expo’s popularity. If there are no other experts in the company to involve in the project, there’s a high chance they might make mistakes. The same issues arise during upgrades. Problems often surface with updating plugins as all apps use third-party solutions, which can become outdated or incompatible. Therefore, resolving such issues requires resources. It’s beneficial to have at least one team member who understands native code and infrastructure (as configuration, builds, releases etc.).
The myth about sharing code between the web and mobile platforms can be misleading. React Native leverages native mobile elements, while React.js, used for the web, relies on the browser’s Document Object Model (DOM) elements. Therefore, only the source code and business logic are reusable. This also applies to libraries – only non-DOM-related libraries can be utilized. Due to the differences in functionality, UI, and UX between web and mobile apps, modifying code for reuse might take longer than building new logic for a mobile app. That’s why it’s crucial to have more skilled engineers who can make your solution truly cross-platform.
Performance and stability
Since React Native is in beta, it occasionally faces compatibility challenges during version updates. However, this doesn’t imply 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 the seasoned team.
React Native constantly improves, contributing to its stability. The New Architecture that was introduced recently was designed to solve some of the issues with performance and flexibility that developers faced in Old Architecture. But unfortunately not all plugins support it at this time, so not all apps can switch to it just yet.
Another improvement is Hermes, a JS engine which provides faster app launch, easy integration and is optimized for mobile. It’s also available for iOS now.
MobiDev Case Studies for React Native App Development
MobiDev has deep expertise in developing React Native apps. The examples provided here are just a part of our larger portfolio. These projects highlight the hands-on experience of our engineers in addressing both business and technical challenges through React Native app development.
Case Study #1. Rewriting a Legacy Fitness Application with React Native
The client had an existing app built with outdated JS technology, so the request was to rewrite it in React Native and add new functionality. We worked closely with the client’s in-house development team to achieve business goals.
The key tech challenges:
- Rewrite the app using React Native
- Enhance the app by adding new features
1.Rewrite the app using React Native
Opting for React Native enabled the client to leverage the same code base for both platforms. Consequently, all changes can be implemented on the go. We 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. Add new features
The project entailed complex business logic and numerous interconnections. To meet project objectives, 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 schedule.
The project continues to evolve, and we’re still collaborating with the client to enhance and introduce new features. The application currently has over 1 million trained individuals.
Case Study #2. Improving the Performance of an Existing Map-Based Application
The client came to us 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 key tech challenges:
- Optimize React Native library that was used
- Refine the performance of layers
1. Optimize React Native library that was used
The app used the standard react-native-maps library. When the number of objects increased, the device characteristics didn’t allow for displaying a larger number of markers.
In the course of the technical 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. iOS capabilities allowed even more, but the team and the client stopped at these results since Android provided fewer resources.
2. Refine 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 problem 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. If the marker went beyond the visibility of the considered area of the map, it was simply not drawn. Reducing the number of rerenders and displaying elements on a certain area of the map allowed to increase the performance.
The work carried out 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 plans 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 rerendering, because this takes up a lot of resources.
Case Study #3. Building a React Native-based App for Router Setup
The main project task was to create a cross-platform application for Android and iOS to help users configure routers. Since the client’s existing infrastructure was built with React, the use of React Natives for this project was a great solution that should facilitate further application support.
The key tech challenges:
- Create a customizable UI
- Integrate the app with a router
- Deliver the solution within strict deadlines and fixed price
1. Create a customizable UI
The solution had to be 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 made it possible to achieve these goals using existing libraries.
2. Integrate the app with a router
Implementation of complex logic for requests to the router and handling network connections were the most challenging tasks of this project. The router is basically the back end of the app and it has a different approach to requests than ordinary applications. This includes complex parsing of requests to the router and complex data processing.
The developers encountered a problem: when the user makes changes to the router through the application, the router has to reboot and temporarily disappear from the network. The app must find the router in the network again and connect to it. This degraded the user experience 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. The application sends queries to the router and makes changes. While the router is rebooting, it tracks the progress. As soon as the router appears on the network, the application will automatically connect to the router with the new settings. This made the whole user experience more friendly and optimized.
It is worth noting that Android and iOS have their own features for working with networks, i.e. finding and connecting devices, security systems, etc. React Native made it possible to cover all of them using standard NPM packages.
3. Deliver the solution within strict deadlines and fixed price
The solution was developed within the framework of the fixed price model and had an approved budget and deadlines. Relying on the experience of our developers and React Native as a technology solution that fully covered the project’s requirements, we had no problems implementing the project on time.
In this project, React Native showed itself as a competent technology for working with networks. Available React Native libraries allowed us to meet the specific requirements of native platforms and deliver the solution on time and within budget.
Also, React Native allows developers to easily carry out all the necessary integrations, such as payment systems, audio and video calls, live chats, etc. A huge range of available NPM packages allows you to find solutions even for narrow cases, which significantly speeds up the process of developing a cross-platform application.
Hire React Native App Developers at MobiDev
As far as MobiDev’s experience in React Native application development is already clear to you, we can proceed with explaining how we can be useful to your business.
MobiDev has been in the software development market for more than 13 years and has extensive experience working on projects of various scales and complexity. Having an in-house team of cross-platform and native developers, we can meet the entire range of your business needs and offer solutions that will align with your goals.
If you are looking to hire React Native developers to work on your project, whether it is an upgrade of an existing system or product development from scratch, we will gladly take on this task and deliver results within the agreed budgets and deadlines. Feel free to drop us a message or arrange a call.