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.
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.
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
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.
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.
index.js and change with the following:
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:
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:
As you can see, we are using
screens variable to
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
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:
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.