The Navigation router is a groundbreaking alternative to the popular React Navigation library, offering a revolutionary approach to scene-based navigation for both React and React Native. With its focus on scene-based navigation, this router empowers developers to take control of their app's UI design, providing the flexibility to build their UI in any way they want.

One of the most notable features of the Navigation router is its seamless integration with React and React Native. Developers no longer need to worry about using different routing libraries for web and mobile development, which streamlines the development process and saves time.

Additionally, the Navigation router provides a seamless user experience. The navigation is 100% native on Android and iOS, ensuring that users feel comfortable and familiar with the navigation elements. On the other hand, developers using React can have whatever URLs they want, allowing them to build their UI as they see fit.

This is the story of why we chose React Native and how we overcame the technical challenges we encountered along the road.

BrainAcademy build with React Native running on our existing native app.

Early last year, a small group of developers at Ruangguru began studying the feasibility of implementing React Native. React Native allows you to create iOS and Android apps in JavaScript using the declarative programming language of React. This leads in more concise, easier-to-understand code, faster iteration without a build cycle, and easy code sharing between platforms. You can ship faster and focus on the things that count, making your app look and feel fantastic.

Since its initial release, React Native has come a long way. It is being used not only in Facebook and Instagram, but also in a wide range of other businesses, from Fortune 500 corporations to hot new startups.

Biggest Challenge in React application is the management of global state. In large applications, React alone is not sufficient to handle the state complexity which is why some developers use React hooks, Redux and others state management libraries.

When you are developing a React Native application you will most likely be writing a lot of JavaScript code that contains dependencies that usually come from external repositories like NPM. The compilation of these many JavaScript files and dependencies will be processed into a single bundle file that can be read by React Native. In React Native this compilation will be done by default by Metro Bundler.

So basically Metro Bundler works by taking your source code, all external library dependencies as well as static assets that you use and converting them, optimizing them, and packaging them into a single bundle that can be run by React Native.