Cross-platform toolkits are not the “best” technology. Technology will come after business requirements.
This article will explain React Native and help you decide if it’s the right technology for your software product. React Native’s pros and cons will be explained. I will also reveal the nuances of this technology we encountered while developing cross-platform apps.
What is React Native?
React Native is a framework that allows you to build cross-platform apps. React Native’s uniqueness is the single JavaScript codebase that can be used on both platforms. React Native compiles JavaScript code to native components using platform-specific APIs or modules. Software developers can easily create new software by using native components like Images, Text, or Views.
How Does React Native Work?
React Native allows you to create apps that are both JS and native using the bridge between the app and the target platform. React Native’s bridge system uses the React library to transfer components’ hierarchy from JavaScript to the mobile device view.
React Native interprets any update into the event the JS can handle. The React Native bridge then relays messages between a native platform and a JS codebase. This allows React components to understand and respond to native events.
This architecture presents some challenges. One, the default components might not be compatible with both platforms or look very different. Bridging architecture, on the other hand, allows you to use all native views from SDK and JS libraries.
React Native apps can be single-threaded and are therefore easy to understand. Everything that works on JavaScript will also work on React Native. To avoid performance issues, it is important to take into account JS specifics when developing an app architecture. React Native app development might not be the best choice if the app’s architecture involves many events and large amounts of data. The bridge structure could cause delays.
React Native Features And Challenges
1. CODE REUSE
There is a common myth that code sharing between mobile and web platforms is possible. React Native uses native mobile elements while React.js is used for the web on the DOM elements. It is possible to reuse logic that is related to source code or business logic. It is possible to only use libraries that aren’t related to DOM. Because the functionality, UX, and UI of the mobile and web apps are different, it will take more time to refactor code for reuse than to write separate logic for a mobile application.
2. PERFORMANCE and STABILITY
React Native (0.62) is still in beta and can sometimes have compatibility issues when upgrading versions. This doesn’t necessarily mean your app will break with every update. This means that updates should only be updated if they have been proven stable.
Updates can cause breaking changes, but that doesn’t mean the React Native team isn’t making continuous improvements. I have found that bugs discovered after version updates had minimal impact on the project’s progress due to the React Native team’s quick fixes.
Some long-running events on JS may cause UI events to be blocked by the bridge architecture. Any actions that require synchronization between JS and native code may be delayed due to the delay in passing information through the bridge. ScrollView’s position could be affected by events that are quickly emitted about changes.
Interactive animations should run at 16 milliseconds. Their logic is from the Native to the JS side. Animation events can also experience performance issues due to bridge architecture. Native Driver is used to sending animations to native code when developing React Native-based applications. Native code executes animations in the UI thread, which prevents frames from going through bridges and provides smoother performance.
When it comes to interactive animations, 90% of cases can be covered by the Native Driver. There are 10% of cases where app functionality requires gesture events such as pinch to zoom and drag and drop. In that case, it is possible to use such solutions as react-native-reanimated or react-native-gesture-handler which allows recognition and tracking of gestures on the native side and reduces bridge drawbacks.
3. UI AND CUSTOM VIEWS
React Native uses the React.js Library, which allows it to cover many situations. Although it doesn’t include all the native components, they can be easily replaced by community plugins.
Expo is a platform that comes with preinstalled UI plugins and components for React Native-based applications. Expo can be used to overcome UI limitations. Expo plugins cannot be used in conjunction with Expo ones.
Expo usage is an excellent idea for prototyping MVP and PoC solutions. This is a great solution for apps that have a standard UI and don’t require any customization. Native libraries and plugins are better if the app has a non-standard UI.
4. DEVELOPER EXPERTISE
React Native app development requires Javascript developers. This may lead to the belief that Javascript developers are required. It’s not enough. React Native’s user interface is built on native components so it is important to get native developers involved in plugin optimization.
When to use React Native?
It is crucial to decide if cross-platform app development is a good idea or not. Cross-platform is a good choice if your app relies primarily on business logic and user interface. Native app development is a better option if the app has more native components.
React Native is my recommendation when choosing between cross-platform options.
- MVP or POC solution that uses a simple client/server architecture.
- JS developers make up the majority of the team that supports an app after it is released.
- Enterprise and B2B apps.
- Apps that have standard interactions and UI.
What’s the Future of React Native?
Facebook’s team is currently reframing its approaches and looking at ways to overcome limitations. Each section of each platform will be improved individually. The new architecture has been announced by Facebook:
What’s new:
- The CodeGen tool allows you to automate compatibility between JavaScript and Native by using the CodeGen tool.
- JavaScript Interface (JSI), an element that allows you to:
- You can swap out JavaScriptCore for other engines more easily.
- JavaScript code should be aware of Native code
- JavaScript will hold a reference to C++ host objects and allow you to invoke methods. These modifications allow you to write more C++ code and make it easier to approach.
- The fabric module is designed to improve the rendering layer. The fabric increases the responsiveness of the UI by creating the Shadow Tree in C++ using the UI manager.
- Priority queues are available from React for the UI operation, which improves performance through opt-in synchronous executions. This allows for improved gesture handling and lists.
- TurboModules allow JavaScript to load every module only when it is needed and keep a direct reference. This feature allows apps to communicate directly with each other and reduce startup time.
- Lean Core allows you to reduce the app’s weight and improve maintenance of elements that are not directly used by Facebook.
React Native is used in many popular apps such as UberEats and Discord. These apps are great examples of the power of React Native. However, this doesn’t mean any app can be implemented using the same practices. Even if you have an idea for an app that is identical to Instagram, a single change could cause you to rethink your strategy.
