3 posts tagged with "react-native"

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 ..

Summary#

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.

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.

jsiRuntime.global().setProperty 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 jsiRuntime.global().setProperty 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.

Results#

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.

Navigation#

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.

Footnote#

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.

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.

Do You Need A State Management Library?#

For reasons of compatibility and simplicity, it's best to use React's built-in state management capabilities rather than external global state like Recoil. But as i said before React has certain limitations when it comes to a global state management.

• Component state can only be shared by pushing it up to the common ancestor, but this might include a huge tree that then needs to re-render.

• Context can only store a single value, not an indefinite set of values each with its own consumers.

• Both of these make it difficult to code-split the top of the tree (where the state has to live) from the leaves of the tree (where the state is used).

So When Should We Use A State Management Library Like Recoil?#

Applying a global state management is not so easy, it is a lot off hard work and it also takes time to implement. So, it is very important for you to know when to implement the state-management.

1. If your application contains a large number of components and a lot of requests are being sent to the back-end for data retrieval, then it becomes mandatory to implement the state-management, as it will boost the user experience and speed of the application to a great extent. With a global state, you don't have to fetch the same request multiple times as the data will already be "cached" from the first request and can be consumed by other part of your screen.
2. If you use redundant data throughout the whole app, for example, a list of customers is being used in the invoice creation and sales report generation then there is no need to fetch customers again and again from the database. You could simply just put the data in the global state.

What is it about Recoil.js that’s so appealing?#

Recoil feels just like React. The syntax is similar to React and it looks like a part of React API. Other than that, it has many other upsides like it solves the problem of global state management, shared state, derived data, etc. The team at Recoil make sure that the semantics and behavior of Recoil be as Reactish as possible.

The Recoil Concept.#

Recoil is an experimental state management library at Facebook, created by Dave McCabe. The reason why i like Recoil better than Redux is because Recoil solves all our complex state management problems but its configuration is surprisingly simple, unlike Redux. And we do not need to write much boilerplate code as we would have by using other state management library like Redux.

Installing Recoil#

As Recoil is a state management library for React, you need to make sure that you have React or React Native installed and running before getting started.

npm install recoil// oryarn add recoil

Core Concept of Recoil#

There are two core concepts of Recoil that you need to understand. This are Atoms and Selectors.

Atoms#

Atoms are units of state. They're updateable and subscribable: when an atom is updated, each subscribed component is re-rendered with the new value. They can be created at runtime, too. Atoms can be used in place of React local component state. If the same atom is used from multiple components, all those components share their state.

You can create Atoms with the atom function:

const countState = atom({  key: 'countState',  default: 1,});

Atoms use a unique key for debugging, persistence, and mapping of all atoms. You can't have a duplicate key among the atoms. So because of that you need to make sure they're globally unique. And also like a React component state, they also have a default value.

To read and write an atom from a component, we use a hook called useRecoilState. It's just like React's useState, but now the state can be shared between components:

function CountButton() {  const [countValue, setCountValue] = useRecoilState(countState);  return (    <>      <h4>Count Value {countValue}</h4>      <button onClick={() => setCountValue((value) => value + 1)}>        Click to Increase Count      </button>    </>  );}

Selectors#

A selector is basically a piece of derived state, where ‘derived state’ can be defined as the ‘the output of passing state to a pure function that modifies the given state in some way’. So in short when these upstream atoms or selectors are updated, the selector function will be re-evaluated. Components can subscribe to selectors just like atoms, and will then be re-rendered when the selectors change.

const countLabelOddEventState = selector({  key: 'countLabelOddEventState',  get: ({get}) => {    const count = get(countState);    if (count % 2 == 0) {      return `isEven`;    }    return `isOdd`;  },});

As you can see Selectors also have a unique ID like atoms but not a default value. A selector takes atoms or other selectors as input and when these inputs are updated, the selector function gets re-evaluated.

The get property is the function that is to be computed. It can access the value of atoms and other selectors using the get argument passed to it. Whenever it accesses another atom or selector, a dependency relationship is created such that updating the other atom or selector will cause this one to be recomputed.

Selectors can be read using useRecoilValue(), which takes an atom or selector as an argument and returns the corresponding value. We don't use the useRecoilState() as the countLabelOddEventState selector is not writeable (see the selector API reference for more information on writeable selectors).

Conclusion#

Personally i think Recoil is a great library but unless you have some specific problems regarding global state management, you don’t really need it. It's nothing that the developer’s world couldn’t survive without. You can even use Recoil partially in your application, exactly where you need, without having to adopt it for the entire application.

References#

Recoil Core Concepts.

Recoil.js — A New State Management Library for React.