React Native is a framework for building cross-platform apps. The uniqueness of React Native is a single JavaScript codebase used for both platforms. React Native compiles the JavaScript code to native components, thus, using platform-specific APIs and modules. By using such native components as Images, Text, and View as building blocks, software developers can create new ones.
React Native allows the development of apps consisting of JS code and native by making the bridge between an app and a target platform. When JavaScript has been running along with some native code, the React Native’s bridge system leverages the React library and transfers components’ hierarchy to the mobile device view.
In case of any updates, for example, if a user presses the button, React Native translates this case into the event that the JS can handle. Then, by relaying messages between a particular native platform and a JS codebase, the React Native Bridge translates native events into ones React components can understand and respond to.
Such architecture has certain challenges. On the one hand, default components may not cover both platforms or may look very different. On the other hand, bridging architecture allows using all existing native views from platforms SDK and JS libraries.
Being single-threaded, React Native apps are easy to understand since everything that works with JavaScript on the web, will work the same way on React Native. However, it is important to consider JS specifics while developing an app architecture in order to avoid performance issues. If the architecture of the future app involves many events and many data, React Native app development may not be the best option since the bridge structure may cause delays.
The common myth about code sharing between the web and mobile platforms. The point is that React Native is based on native mobile elements, meanwhile, React.js, used for the web, is based on the DOM (Document Object Model) elements of the browser. Thus, it is possible to reuse only logic related to a source code and business logic. The same goes for libraries it is possible to use only those libraries that are not related to DOM. Since the functionality and the UX and UI in the web and mobile apps are different, the refactoring for code reuse will take more time than writing a separate logic for a mobile app.
React Native is still in beta (0.62) and sometimes has compatibility issues when updating versions. However, it does not mean that your app is broken with every new update. It means that changes brought by updates should be made once they are proven to be stable. Of course, there are breaking changes caused by updates, but it just means that the React Native team makes continuous improvements. Due to the bridge architecture, some long-running events on the JS side may block UI events. In addition, any actions requiring synchronization between JS code and native one may be delayed because of the time required to pass information via the bridge. Talking about the interactive animations, that should run every 16 milliseconds, their logic goes from the JS to the Native side. Due to bridge architecture, animation events may also have performance issues. When developing React Native-based apps, we used Native Driver, which sends animations to the native side. The native code performs animations in the UI thread which allows frames to avoid going through the bridge and ensures smoother performance.
React Native utilizes the React.js library, which enables it to cover many cases. It does not have a full set of native components, but they can be replaced with community plugins. One of the solutions to overcome UI limitations is to use Expo, a platform with the preinstalled UI components and plugins for React Native-based apps. However, when using Expo, it is important to remember that native plugins cannot be used along with Expo ones.
Considering that React Native app development involves Javascript, there may be a tendency to believe that it is required to have only Javascript developers. However, in reality, it is not enough. Taking into account that React Native’s UI is based on native components, it is advisable to involve native developers for plugins optimization.