Skip to main content

2 posts tagged with "greenfield"

View All Tags

The Navigation Router - The Game-Changing Alternative to React Navigation

· 5 min read
Agastya Darma Laksana
Software Engineer

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.

The Navigation Router's Unique Approach#

The Navigation Router offers a more native feel to web and mobile applications as it avoids using a single View in its codebase, rendering everything to its native counterpart. Additionally, the Router's use of a CoordinatorLayout provides native collapsing Toolbars and TabBars on Android, with the TabBar component being 100% native on both platforms.

In keeping with its focus on React, the Navigation Router makes every UI element a component. This includes TabBar and NavigationBar components, which can be easily updated using props in the same manner as other React components. Each scene has its own Navigation context, preventing the router from pushing the same scene twice even when double-tapping.

The Navigation Router's focus on the web also ensures that every single navigation is a URL. This provides automatic hyperlinks on all platforms, including for back navigation. Developers can customize the URLs as desired without changing any code, passing strongly-typed data without the need to parse to or from strings.

Overall, the Navigation Router's focus on providing a native, React, and web-friendly experience makes it an innovative choice for developers seeking to create seamless, high-performance applications across multiple platforms.

Using The Navigation Router on React Native.#

If you're a developer looking to create a high-performing, fully-native navigation experience for your React Native app, the Navigation router is the solution you've been searching for. This powerful library offers an out-of-the-box experience that rivals that of building a native app without React Native. With its TabBar component rendering to the native UITabBarController from UIKit or the BottomNavigationView from Android's Material Design library, users will feel right at home within your app.

To take advantage of the Navigation router's capabilities, it's important to note that it contains native code. Therefore, to create your application, you must use react-native init or a custom development build of Expo. But with its powerful features and seamless integration, the Navigation router is well worth the effort.

Quick Getting Started#

Install the required packages in your React Native project:

npm install navigation navigation-react navigation-react-native
cd ios && pod install && cd ..

The Navigation router is comprised of core utilities that are used by navigators to build the navigation structure for your app. Once you've completed this initial setup, you'll be ready to start writing code with the Navigation router.

Wrapping your app in NavigationHandler#

import React from 'react';import {StateNavigator} from 'navigation';import {NavigationHandler} from 'navigation-react';import {NavigationStack} from 'navigation-react-native';
const stateNavigator = new StateNavigator([]);
const App = () => (  <NavigationHandler stateNavigator={stateNavigator}>    <NavigationStack>    </NavigationStack>  </NavigationHandler>);
export default App;

To ensure optimal performance in your React Native app, it's recommended that you only use the NavigationHandler once at the root level. Nesting multiple NavigationHandler components should be avoided unless there is a specific use case for doing so. With this in mind, you're now ready to build and run your app on your device or simulator.

Pro Tips#

To incorporate Material Design 3 into your Android app, you can configure a Material3 theme in styles.xml. Here's an example:

<style name="AppTheme" parent="Theme.Material3.DayNight.NoActionBar">

Enabling Fabric (The New Architecture)#

Enabling the new React Native architecture during pod install is the only difference in setup from the previous architecture.

cd ios && RCT_NEW_ARCH_ENABLED=1 pod install && cd ..


The Navigation router is a revolutionary library that empowers developers to take control of their app's UI design by offering a groundbreaking approach to scene-based navigation for both React and React Native.

The Navigation router's integration with React and React Native makes it an innovative choice for developers seeking to create seamless, high-performance applications across multiple platforms. Overall, the Navigation router's unique features and powerful capabilities make it a must-have tool for developers looking to create high-performing and fully-native navigation experiences for their React Native apps.

The Navigation router is a worthy alternative to the popular React Navigation library. Its unique approach to scene-based navigation and native feel make it an innovative choice for creating high-performance apps across multiple platforms.

Experimenting with React Native at Ruangguru

· 7 min read
Agastya Darma Laksana
Software Engineer

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.

The Reasons#

We began investigating the use of React Native in early 2022 to allow product teams to release features faster through code sharing and faster iteration speeds, using techniques like Live Reload and Hot Reloading that remove compile-install cycles. As a result, the product engineering team is now able to deploy the same functionality on iOS and Android with a single codebase, and perhaps in the future, we will be able to ship the same React Native codebase to the web. So with React Native the App feature will be written only once.

Ruangguru universal frontend. A teaser for our single codebase multiplatform solution.

The feature created with React Native will be injected into the app at the same time working side by side with the existing native code. The cross-platform feature is developed and maintained by a single team. So there’s no longer a large panel of native engineer experts involved.

The Challenges#

When you integrate React Native into an existing native project, you may experience obstacles and additional effort that you do not encounter when you start from scratch. With this in mind, we chose to begin investigating these challenges by porting the most appropriate part of Ruangguru apps: the Brain Academy module.

Slow Communications Between Native and React Native#

If you look at the React Native layout, you’ll notice that it uses a Bridge to connect with native modules, which often results in a queue because these two sides are unaware of each other. Such a process may result in performance constraints that have a detrimental impact on the user experience.

However, with the introduction of the React Native re-architecture, the Bridge will be gradually phased out and replaced by a new component known as the JavaScript Interface (JSI). Ruangguru will utilize JSI to facilitate communication between the Native and Javascirpt Realms to overcome this challenge.

Start Up Performance#

Previously, React Native had a significant startup overhead due to the need to inject the JavaScript bundle into JavaScriptCore (the VM used by React Native on both iOS and Android) and instantiate native modules and view managers. This problem is dramatically reduced in 2022 thanks to the Hermes engine. Based on our testing the initial loading for React Native is very minimal.

Android Bundle Size#

The first issue was adding React Native as a dependency into an existing App would significant impact the binary size. But this would not only increase the binary size, but would also have a significant impact on the number of methods count. We ended up pulling in only the React Native pieces we required at the time and building our own implementations for those that relied on libraries we didn’t want to use.

However, this solution still adds megabytes to the app binary size. As a result, we will include the React Native module with the Dynamic Features Module. Because we made React Native an on-demand module, users will only need to download the React Native module when they need to use the feature. This significantly reduces the app install size.

Utilizing The New React Native Architecture#

This section will discuss how Ruangguru uses JSI, a component of the new React Native architecture, to make navigation events, sharing data, and resource synchronization considerably faster than before.

The Old Architecture

The Javascript and Main threads do not communicate directly under the old architecture, but rely on the Bridge. The existence of a serializable bridge results in wasteful copying rather than memory sharing between threads. Because everything runs asynchronously, there is no guarantee that the data will arrive on time or at all. Larger data transfers may be extremely slow. Native module features that need synchronous data access cannot be fully utilized.

The New Architecture

The new architecture completely removed the Bridge. Javascript can now store references to C++ Host objects and call their methods. Time-sensitive tasks, such as user interaction with the app, can be carried out synchronously, eliminating the need for serialization and deserialization during runtime.

Next Generation Native Module That Ruangguru Uses.

All Native Module that Ruangguru uses is using JSI the backbone of React Native’s new architecture.

Initializing a JSI module.

The process of initializing a JSI module differs from that of an ordinary React Native Module. We have an install method here that will be called once from the JavaScript realm to initialize the “connection.”

The JavaScript realm must first check to see if the module is appropriately installed; if the module is not present, the JavaScript realm will invoke the install method. method.

Because we’re utilizing JSI, we’ll utilize the install method to initialize the native function we want to share between the Native and JavaScript realms. As you can see in the code, we use the method to share the function between the two realms.

So finally, to use this on the JavaScript Realm, we can simply use the method like the picture above. So, in short, with the new architecture, we eliminate the need for the old react native bridge, eliminating the waiting time for the Asynchronous method to resolve, and enable instant communication between the Native and JavaScript realm.


React Native enabled product teams to release features to both our iOS and Android apps more quickly.

Startup Time#

React Native cold startup on Android.

After enabling Hermes and preloading on react native bundle, we can achieve desirable startup time when switching pages from Native to React Native. Users should not be able to distinguish the loading time between a Native and React Native screen.


BrainAcademy Navigation example.

Navigation between React Native to Native screen and vice versa is rapid and should not be noticeable to the users. As shown in the demo above, the navigation from BrainAcademy live teaching list (react-native) to the live teaching front page (native) is as fast as usual native navigation.

In the example above we demonstrated the capabilities of Ruangguru React Native navigation.

BrainAcademy Home (RN) -> Live Teaching Front Page (Native) -> Cek Ombak (RN).

Dynamic Feature Module (Android)#

Dynamic Feature Module for BrainAcademy React Native.

Because BrainAcademy React Native is an on-demand module, users will only need to download it when they need to use the feature. With DFM enabled, we drastically minimize the cost of React Native on android.

The Future#

Every decision always involves trade-offs, and we recognize that there are no silver bullets when selecting a technology, but we believe the benefits exceed the drawbacks. We are very optimistic about Ruangguru’s future with React Native.

With the expected productivity increases, we may begin to build product feature teams with cross-functional team members collaborating to address current and future business difficulties. Soon, we will also investigate how to leverage React Native javascript ecosystem into the greater Web ecosystem. Because React Native leverage and use the existing web ecosystem, we are thinking of shipping the same codebase to the web.

We think that by implementing React Native, we will be on the most efficient and effective route to developing the Ruangguru family of apps that satisfy the demands of our customers.


Please visit our careers page if this blog article piqued your interest in what we’re doing.

Agastya Darma, Sean Urian and Jevi Saputra are Software Engineers working on the Core React Native team at Ruangguru.