Forem: Noble Okafor

React Native's New Renderer: Fabric

Noble Okafor — Tue, 02 Aug 2022 20:29:00 +0000

At the 2018 React Conference, the React Native team announced a few changes to its core architecture and a timeline for how this revamp of its inner working code would proceed. One of the changes announced was the new UI manager, called Fabric.
Fabric is the React Native forerunner to the old legacy renderer. Made to “improve interoperability with host platforms, and to unlock new capabilities for React Native”, Fabric takes a different approach to how UI view instances will be created in a React Native application.

The React Native selling point has always been about creating truly platform-specific native UIs and not relying on web views like other cross-platform frameworks. With built-in access to the host platform's native APIs, you can create applications that behave consistently and efficiently across all host platforms. The new Fabric architecture changes none of this but instead builds on it, making the experience even more platform specific.
Let's dive into the old legacy renderer to understand better how Fabric works, the fundamental changes, and why these changes are necessary.

The Old Architecture: Legacy Renderer

When your application starts up, it calls the native components in your code, while React talks to the existing UI manager(in this case, the legacy renderer) to create the different UI elements. The UI manager consists of three threads that handle the various stages of rendering your React Native code into views on the host platform: the Js thread, the shadow thread, and the main thread.

The Javascript thread handles all the business logic in your code. This thread is where all React code will be executed. The Shadow Thread is responsible for calculating layout operations such as relative positions, e.t.c., on the host platform. Because mobile devices don't understand Flexbox styles like the web, React Native uses the Yoga library, a React layout engine, to translate Flexbox layouts to the host platform. Once all layout operations are over, the host platform's main thread renders all this on the host View.

To communicate between the native and Javascript realms, React Native uses a bridge architecture. Suppose we want to create a view on a device; React Native will have to parse a create view command into a JSON array, have it serialised as a string and then pass it over the bridge for the native platform to execute.

You can read this article on Understanding the React Native bridge concept to get a more in-depth dive.

It's important to note that all operations in the old system using the bridge concept are asynchronous.

Because of this async system, rendering animations and events like scrolling in your application can seem laggy due to time spent passing data from the JS thread, to calculating the layout before any actual rendering occurs. These are just milliseconds spent, but the effect can be noticed on the user end.

The New Architecture: Fabric

A significant problem with the old system, specifically the bridge, is that all operations are asynchronous. Also, since communication between the three threads is done over the bridge, passing data becomes slow and cumbersome. For Fabric to work, React Native introduced the Javascript Interface(JSI) as a new system for communication between Javascript and the native realm. JSI exposes native modules directly to JavaScript via C++ and holds a reference to the host object. This system allows you to call methods on the host platform using native code statically.

This is very similar to how the web works, where JavaScript can hold a reference to a DOM element and call methods on it. Example: document.getElementById()
JSI allows for both asynchronous and synchronous actions. A task like an API call can be executed asynchronously, while other functions like animations that require a synchronous process can be treated as such.

Image source @https://se.ewi.tudelft.nl/desosa2019/chapters/react-native/
JSI replaces the bridge architecture and solves many of its problems.

Fabric was created to be a cross-platform solution by sharing a fundamental C++ implementation. This improves development, performance, and maintenance on all host platforms.
Now let us understand what exactly happens when rendering a UI element on a device with Fabric.

Fabric Render Pipeline

The series of stages Fabric must pass to render React logic on a host platform is called the render pipeline. Ideally, there are three stages: render, commit, and mount.

Stage 1 - Render



function MyComponent() {
  return (
    <View>
      <Text>Hello, World</Text>
    </View>
  );
}

Suppose we were to render the above component.

When our app runs, React creates a React element tree in Javascript; from this tree, Fabric will make an immutable React shadow tree in C++. Inside the shadow tree are shadow nodes that can be likened to browser DOM nodes. The shadow nodes are host objects created synchronously representing host components like a View. In our example code, the <View> and <Text> elements would create a view shadow node and text shadow node, respectively.

For state updates, considering the shadow tree and nodes are immutable to maintain thread safety, React will create a clone of the current tree with its existing nodes and add all the changes to the new clone.

Note: Fabric will only clone a node affected by an update directly or as a child element. Any unchanged node is shared by the old and new tree on the new render.

Stage 2 - Commit

When the render phase is complete, the app will then proceed to use Yoga to calculate the updated layout metrics of the elements in the shadow tree. In our case, it would include the relative positions and size of the text shadow node and view shadow nodes. The New
shadow tree is promoted on to become the Next shadow tree(The tree to be rendered).

Stage 3 - Mount

The mount happens on the main thread and involves React Native taking the existing Next shadow tree and transforming it into a host tree seen as the UI on the users' side. An operation referred to as Tree Diffing computes the changes between the previously rendered tree(If any has been rendered as opposed to an initial render) and the Next shadow tree. The <View> and <Text> are created and mounted on the host platform. A third and final promotion occurs from Next tree to Rendered tree.

A visible View and Text will be shown on the device screen at this stage.

Our <View> element becomes a viewGroup or UIView on Android/IOS platforms. Remember that all of this is synchronously executed.

Stages of the Render Pipeline

Takeaways

The bridge Architecture has been replaced by the Javascript interface(JSI).
Improved interoperability between the native and Javascript thread allows for both synchronous and asynchronous operations.
Fabric improves rendering performance on a host platform.
Since Fabric is implemented with core C++ and is cross-platformed, adoption and maintenance are much easier on new platforms.

Fabric is currently under active rollout and is being implemented as of the time of this post. The react native official docs have already been updated to replace the old legacy renderer.

Using React Navigation to Pass Params

Noble Okafor — Mon, 25 Jul 2022 22:25:00 +0000

React Navigation is a JavaScript library that allows you implement screen navigation features in a React Native app. It has become the conventional method for configuring both simple and complex React Native mobile apps.

Using React Navigation, each screen component in your app automatically gains access to a route and navigation prop. The route prop contains information about the current route in the component hierarchy. The navigation prop deals with dispatching navigation actions to other screen components.

This article will cover the React Navigation library’s route and navigation prop, its elements, and how to use the .navigate function contained in the navigation prop to pass parameters(params) when navigating between different app screens.

Prerequisites

This article assumes that you have basic knowledge of React Native and how to properly set up a stack navigator using the React Navigation library.

You can brush up on both topics by visiting their official documentation:

Passing Params

navigation.navigate( )

The navigation prop provided by the React Navigation stack navigator is an object holding various functions for dispatching specific actions. One of them is the .navigate function, which is used to navigate and pass param data successively to other screens in your app.

Although the navigation prop is automatically provided, you will need to receive it as an argument on each screen component defined in the stack navigator to access its functions. Then, by simply calling it like so, navigation.navigate( ) you can pass in a screen route name to navigate to and a param object to carry to the route.



import { Button, View } from "react-native";
import React from "react";

const HomeScreen = (props) => {
  return (
    <View>
      <Button
        title="Button"
        onPress={() => props.navigation.navigate("ScreenRouteName", {params})}
      />
    </View>
  );
};

export default HomeScreen;

Using 2015 ES6 Javascript syntax, you can destructure the props object to grab just the navigation prop. As that is the only prop object necessary here.



//Your code will then look like this 
const HomeScreen = ({navigation}) => {
        console.log(navigation);
    ...
    onPress={() => navigation.navigate("ScreenRouteName", {params})}
    ...
};

If you console console.log(navigation), you can see all the underlying functions available in the navigation prop object.

The navigation prop is only provided to components defined inside the stack navigator wrapper in a React Native app. This means any child or nested components you create will not have access to the navigation prop. So, what do you do when a child component needs navigation features?

You can import the useNavigation hook provided by React Navigation version 6.0 into such a child component, and assign it to a constant. Then call that constant in the onPress prop with .navigate( )

Here the constant is named navigation because that makes sense and avoids confusion.



import { View, Button } from "react-native";
import React from "react";
import { useNavigation } from "@react-navigation/native";

const NavigationButton = () => {
  const navigation = useNavigation();
  return (
    <View>
      <Button
        title ="Button" 
        onPress={() => navigation.navigate("screenRouteName", {params})} 
      />
    </View>
  );
};

export default NavigationButton;

Receiving Params

After passing a param, the associated component screen will be ready to receive it. As previously stated, the route param automatically provided to each screen in the stack navigator holds some information about the current component screen. It contains a params object that provides access to all the params supplied to the component.

So to read the params available, all you need to do is receive this route prop as a component argument.



//HomeScreen
import { View, Text } from "react-native";
import React from "react";

const HomeScreen = ({route}) => {

//ES6 object destructuring
const {Param Name}= route.params;

  return (
    <View>
      <Text>{Param Name}</Text>
    </View>
  );
};

export default HomeScreen;

It's important to remember the sort of data passed as params. It should only be data configuring what would be rendered on the screen. For instance, in a user authentication flow, a user ID would ideally be passed as a param to decide which user’s data your app would show.

navigation.setParams( )

Another function nested in the navigation prop object is the setParams function. This is helpful if you need to update a screen's received parameter. Just like you would update a components state with the useState hook, the setParams function shallow merges the passed params with the current one to return a new result.



//HomeScreen
import { View, Button } from "react-native";
import React from "react";

const HomeScreen = ({ navigation }) => {
  return (
    <View>
      <Button
        title="SecondScreen"
        onPress={() => navigation.navigate("SecondScreen", {text: "hello"})}
      />
    </View>
  );
};

export default HomeScreen;

//SecondScreen
import { Text, View, Button } from "react-native";
import React from "react";

const SecondScreen = ({ route, navigation }) => {
  const {text} = route.params;
  return (
    <View>
      <Text style={{ fontSize: 30 }}>{text} World!</Text>
      <Button
        title="change text"
    //Calling setParams
        onPress={() => navigation.setParams({text: "hey"})}
      />
    </View>
  );
};

export default SecondScreen;

By calling navigation.setParams( ), you change the received text param:

Conclusion

In this post, you learned about the route and navigation props provided to a screen component by the React Navigation library. You also learned how to pass params to a route screen using the navigation prop and how to reach into the route prop to read the param data of the current route screen. Lastly, you learned how to use the set params function to change the current passed param in a component.

That concludes this article!

Managing State in React Native With Redux Toolkit

Noble Okafor — Wed, 20 Jul 2022 10:38:00 +0000

When developing robust web or mobile applications(apps), handling state internally, as is the norm with React Native components, isn't always ideal. If done improperly, it can quickly become very messy. A library tool like Redux is advised in these circumstances.

This tutorial will teach you how to use Redux Toolkit to manage the state flow in a React Native app.

What is Redux?

Redux is a Javascript global state management library designed to act as a central store for managing application state. Redux helps you build apps that behave consistently across all environments by tracking all changes made to the app state.

state flow in a Redux-managed React application

What is Redux Toolkit?

Redux Toolkit is Redux's official toolset for developing efficient React-Redux apps. It was designed to simplify the writing of common Redux logic and resolve the usual difficulties of using the core Redux library.

such as:

Setting up the Redux store
Creating reducer state slices
Writing immutable state updating code

Redux Glossary

Action

An Action is an object that indicates a desire to modify a state in the Redux store. Actions must include a payload and a type attribute that specifies the state change's nature. Reducers are required to carry out Actions.

Reducer

A Reducer is a pure function that takes two arguments; the current state and an action to return a new state result. Reducers do not modify the original state directly; rather, they make a copy of the state and modify that.

Dispatch

A "dispatch function" is a function that accepts either a synchronous or asynchronous action object and sends it to a reducer for execution.

Slice

A collection of reducers and actions that work together to implement a single app feature.

Store

According to the official Redux documentation, a store is an object that holds the app's entire state tree. Redux can only have a single store in an app.

Using Redux Toolkit with React Native

Prerequisites

Node.js LTS >= v14.x.x (v16.14.2 recommended).
A package manager like npm or yarn installed.
Expo CLI installed.
Knowledge of Redux concepts.

NOTE: This article is not a tutorial on React Native and will not be focusing on React Native concepts.

Project Setup

The app you will build will be a random color generator, and to keep things simple, you will be using Expo CLI to create and run the project.

Run the following commands in your local machines terminal:



expo init redux-toolkit-guide

cd redux-toolkit-guide

For the template, select ‘— Managed Workflow—blank’.

Install the app's necessary dependencies, including @react-navigation/native, react-native-screens, and react-native-safe-area-context.

See the official React Navigation library documentation for the latest installation instructions.



yarn add @react-navigation/native

expo install react-native-screens react-native-safe-area-context

You can find the app's complete source code in this GitHub repo.

Building the App Interface

Open the redux-toolkit-guide app in a code editor and create the following file structure.

Create a src folder in the project's root.
Inside src create a store folder.
Inside store, create a colorSlice.js and store.js file.
Create a screens folder inside src.
Inside screens, create a HomeScreen.js file and import the code below.



//HomeScreen.js
import React from "react";
import { StatusBar } from "expo-status-bar";
import {
  Text,
  View,
  StyleSheet,
  TouchableOpacity,
  FlatList,
} from "react-native";

const HomeScreen = () => {
  return (
    <View>
      <StatusBar style="dark" />
      <TouchableOpacity
        onPress={() => //empty anonymous function}
        style={styles.button}
      >
        <Text style={{ fontSize: 20 }}>Generate Random Color</Text>
      </TouchableOpacity>
      <FlatList
        keyExtractor={(item) => item}
        data={color}
        style={{ marginTop: 15 }}
        renderItem={({ item }) => {
          return (
            <View
              style={{
                backgroundColor: item,
                height: 150,
                width: 150,
                alignSelf: "center",
                margin: 10,
              }}
            />
          );
        }}
      />
    </View>
  );
};

export default HomeScreen;

const styles = StyleSheet.create({
  button: {
    alignSelf: "center",
    borderWidth: 1,
    borderRadius: 10,
    padding: 10,
    marginTop: 20,
  },
});

HomeScreen.js

Override App.js with the following code:



//App.js
import * as React from "react";
import { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import HomeScreen from "./src/screens/HomeScreen/HomeScreen";

const Stack = createNativeStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default () => {
  return <App />;
};

App.js

Run expo start in your terminal to start the app:

Sample React Native color generator app

Setting Up the Redux store

Install the Redux toolkit and React-Redux packages in your project:



npm install @reduxjs/toolkit react-redux

Redux toolkit creates a store using the configureStore API in place of the createStore from core Redux.configureStore automatically sets up the Redux DevTools Extension and some middleware.

Inside store.js create a redux store:



import { configureStore } from "@reduxjs/toolkit";

export const store = configureStore({
  reducer: { },
});

colorSlice.js

The store holds a single root reducer object for all the state slices in the app.
Now wrap the app component in App.js with the store using the React-Redux Provider. This ensures the Redux store is at the topmost level and is available to the entire React Native app:



//App.js

import { store } from "./store/store";
import { Provider } from "react-redux";


export default () => {
  return (
    <Provider store={store}>
      <App />
    </Provider>
  );
};

App.js

Creating Redux Toolkit Slices

Next, you will create a state slice to handle all action and reducer functions relevant to generating a random color in the app. Importing and calling createSlice, define inside it;

a name to identify the slice.
an initialState value. This specifies the state on the first app render (similar to the useState hook).
a reducer function to determine how the state is to be updated. With the spread operator, update the state.value with the result of the randomRgb().

When writing core Redux logic, it is essential to avoid directly mutating the state value. But, with createSlice available through Redux Toolkit, you can write mutating code in reducers and have it converted into immutable copies:



//colorslice.js
import { createSlice } from "@reduxjs/toolkit";

const initialState = {
 colors generated
  value: [],
};

//A function to generate random RGB values
const randomRgb = () => {
  const red = Math.floor(Math.random() * 256);
  const green = Math.floor(Math.random() * 256);
  const blue = Math.floor(Math.random() * 256);

  return `rgb(${red}, ${green}, ${blue})`;
};

//State slice
export const colorSlice = createSlice({
  name: "color",
  initialState,
  reducers: {
    setColor: (state) => {
      state.value = [...state.value, randomRgb()];
    },
  },
});

// Action creators are automatically generated for each case reducer function 
export const { setColor } = colorSlice.actions;

export default colorSlice.reducer;

colorSlice.js

NOTE: Only write mutating code using the createSlice or createReducer APIs.

Redux toolkit allows you to create action objects automatically. Above, you have set the case functions defined in our reducer to colorSlice.actions. The name of the reducer will be used as the action type when creating an action creator.

Afterward, import and add the created slice to the root reducer of the store:



//store.js
import colorSlice from "./colorSlice";

export const store = configureStore({
  reducer: {
    color: colorSlice,
  },
});

store.js

useSelector and useDispatch

You have successfully set up a Redux state management system. Now, you need to be able to read the current state inside HomeScreen.js and dispatch an action to the reducer.

Use the useSelector hook to access the redux state and the useDispatch hook to dispatch actions:



//HomeScreen.js
import { useDispatch, useSelector } from "react-redux";
import { setColor } from "../../../store/colorSlice";

const HomeScreen = () => {

  const color = useSelector((state) => state.color.value); //reading the state 
  const dispatch = useDispatch();

  return (

      <TouchableOpacity
        onPress={() => dispatch(setColor())} //Dispatch action

      >
        <Text style={{ fontSize: 20 }}>Generate Random Color</Text>
      </TouchableOpacity>

        <FlatList
        data={color}
      />
  );
};

export default HomeScreen;

HomeScreen.js

Above, you have imported useDispatch and useSelector from React-Redux. You have also imported the created setColor reducer. Reading the current state with state.color.value, you set its value as the data entry for the Flatlist. Then, by calling useDispatch() as dispatch and passing setColor() as its argument, you have sent the action to the appropriate reducer case.

That's a wrap! Your React Native app can now generate random colors.

React Native color generator app

When to Use Redux?

The app you built is ideally too basic to use a state manager like Redux. However, this tutorial aims to introduce Redux Toolkit in the most basic way possible.

So when should you use Redux?

When there's a considerable amount of data changing over time
When you need to track state changes
When dealing with deeply nested components, and passing state becomes problematic
When multiple components require access to the same piece of state

Conclusion

This tutorial covered what Redux and Redux Toolkit are and the basic terminologies. It also covered the steps for integrating Redux Toolkit into a React Native application;

Creating a store with configureStore
Providing that store to the app
Creating reducer slices with createSlice
and reading and updating the state with useSelector and useDispatch

I recommend visiting the official Redux documentation for further research.