Build React Native Apps with Simplified and Predictable Navigation

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.

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

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

Set up Navigation

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

index.js
App.tsx (Components)
App.tsx (Navigation)
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

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store