Navigating React Native Screens in Brownfield Android Apps

There are two options when adding React Native screens to an existing native application:

1. Host each React Native screen in its own Activity/Fragment
2. Host all React Native screens together in only one Activity/Fragment

The first option would be ideal if you are using React Native in only one screen or in multiple unrelated screens. In this case, since the React Native screen/s has an equivalent Android Activity or Fragment, you would handle navigation normally — in the same way as the rest of your native app, e.g. with intents and startActivity calls.

The second is what you might opt for when adding a new feature that entails a new sequence of screens. It is essentially applying single-Activity architecture, since several React Native screens are injected into just one native host. This post will help to guide you through the basic steps of integrating React Native into your brownfield app with this approach, with the help of the react-navigation library.

Setup

There are three main things to start with:

• Android host component
• React Native root component
• react-navigation library

To serve as an example, let’s say we are adding user authentication capabilities to an existing app. We create a host Android Activity…

… a React Native component…

… and register this component in AppRegistry.

For react-navigation, follow the installation instructions in the library documentation. We will use this to navigate between the screens in React Native.

First, let us see how to switch context from native Android to React Native.

Launching the React Native flow

Since all the actual screens will be in React Native, in the native side we only need to navigate to the React Native host Activity to start the authentication experience. A basic way to do this is with a start intent…

… that we can use from any other Activity in the app.

When this is called and the activity is launched, the React Native root component will be mounted.

Navigating Between React Native Screens

Once we are inside the React Native ‘mini-world’ inside our native app, we can have many screens to switch between. Following the react-navigation library instructions, we use the NavigationContainer to contain all the screens that our authentication flow can have.

Here, I created 6 screens and placed them inside a stack. Then we can call react-navigation methods (push, navigate, popToTop, goBack) using the navigation object which is automatically added as a prop in any of these screens to move to a different one.

Returning to Native Screens

When we want to exit the React Native flow and go to a different Activity in our native app, we use a React Native native handler to trigger the event.

The handler on the Android side will process this and do the navigation to the different Activity.

There you go! That’s an overview of navigating between React Native and native Android screens, hopefully to help you picture how React Native can be smoothly integrated in a brownfield app.