Build React Native Apps with Simplified and Predictable Navigation

Using RNN Screens library

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

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:

index.js

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:

App.tsx (Components)

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:

App.tsx (Navigation)

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:

Tab based app

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.

This is an experimental library. However, the approach was introduced in 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