Build React Native Apps with Simplified and Predictable Navigation
Tags: reactnative, react, typescript, tutorial
Published: 2022-01-11 05:35:17

In this article, we are going to try a new, more simplified and predictable, approach of building a navigation state and moving between screens within an app.

There are two major navigation libraries in React Native world: [`react-navigation`](https://reactnavigation.org) and [`react-native-navigation`](https://wix.github.io/react-native-navigation). They are both widely used among the community.

**RNN Screens** is not a replacement for any of them but a great addition. It is using React Native Navigation API under the hood and just makes navigation more simplified and predictable with the automatic screens registration and the autocompletion for screen names without any extra work or writing types.

### TL;DR

Below, we are going to initialise a bare React Native app using [React Native CLI](https://github.com/react-native-community/cli) and add the necessary libraries. After that, we will configure a navigation state, build two components and push/show/pop between them.

If you'd like to play around with it by your own, feel free to check the [Github repo](https://github.com/kanzitelli/rnn-screens) and run an example from `example/` folder.

## Bootstrap React Native app

In order to generate a bare React Native app, we are going to use CLI's init command. Open the terminal, cd to the desired folder and run the following command:

```
> npx react-native init RNNScreensExample --template react-native-template-typescript
> cd RNNScreensExample
```

The process can take some time. After it's done, change directory to the project and open it in your favourite editor.

## Install libraries

We need to add `rnn-screens` as well as `react-native-navigation` as its API is used in RNN Screens.

```
> yarn add react-native-navigation rnn-screens
> npx rnn-link     # linking RNN
> npx pod-install  # installing pods
```

If you had any problems installing React Native Navigation, please follow more [detailed tutorial](https://wix.github.io/react-native-navigation/docs/installing/).

## Set up Navigation

As we are done with all the installation steps, it's time to start writing some code.

Open `index.js` and change with the following:

{% gist https://gist.github.com/kanzitelli/5db2946f78b88cb0503deafb744f0215 %}

`registerRootComponent` function is the entry point of the whole app. You could see similar functions from React Native and Expo.

The next step is to create two components: `Main` and `Settings`. We will push `Settings` screen from `Main` to show an example of a navigation action. In order to keep it simple, we will be modifying `App.tsx` file. You should delete the generated code and paste the one below:

{% gist https://gist.github.com/kanzitelli/10ad1dfd69e969db0dfcdd870afc3422 %}

As you can see, we are using `screens` variable to `push()` and `pop()` screens after `onPress` button. The next step is to define `screens` and describe the appearance (Navigation options) for each screen. We need to add the code in the end of the `App.tsx` file:

{% gist https://gist.github.com/kanzitelli/785bc612cc5dafd3f24de37a47fa8a5f %}

Describing navigation state with pure React Native Navigation API might lead to long and verbose spaghetti-code. This is why it's mandatory to describe a screen's options in one place and application root in another. For example, if you'd want to make a tab based app, you can easily do it like:

{% gist https://gist.github.com/kanzitelli/db9b0ba7fd7f9d96a8afed52b9f42a74 %}

## Run the app

It's time to run our app with React Native CLI!

```
> npx react-native run-ios # or
> npx react-native run-android
```

If you had any problems running your app, please follow the more [detailed tutorial](https://reactnative.dev/docs/environment-setup#running-your-react-native-application).

![React Native App with RNN Screens](https://miro.medium.com/max/700/1*9JBlISGXxh4pBlRR_xnB5Q.gif)
 
-----

This is an experimental library. However, the approach was introduced in [RNN Starter](https://github.com/kanzitelli/rnn-starter) and showed its success from the very first version.

If you have any questions or suggestions, feel free to contact!

https://twitter.com/kanzitelli | https://github.com/kanzitelli