This is part 1 of a 2 part series.

Part 1 — Creating end-to-end navigation & authentication flow with dummy authorization for use with any Auth provider.

Part 2 — Replacing dummy authentication with real authentication using Amazon Cognito.

Getting Started

To get started, we first need to create a new React Native project using the React Native CLI:

react-native init RNNav2

Next, we’ll use npm or yarn to install React Native Navigation

npm install react-native-navigation@alpha # or yarn add react-native-navigation@alpha

We’ll now need to link the native dependencies & add some native code.

For details on how to integrate on iOS, click here.

For details on how to integrate on Android, click here.

Creating the files

Next, we’ll create the files we’ll need for this app.

Let’s create a src folder in our root directory to hold everything:

mkdir src

Next, let’s create the following files in the src directory:

cd src touch config.js Home.js Initializing.js SignIn.js SignUp.js screens.js navigation.js Screen2.js

config.js — this file will hold some basic configuration for our app, in our case it will be an AsyncStorage key for retrieving the user from storage.

Home.js — this file will hold the component that renders if the user is logged in.

Initializing.js — this file will hold the initialization logic and display a message to the user that the app is loading.

Signin.js / SignUp.js — These will hold the forms for signing in & signing up. SignIn.js will also redirect a signed in user to the Home screen.

screens.js — this file will hold the screen configuration for React Native Navigation.

navigation.js — this file will hold our navigation functions. We’ll have two main functions: goToAuth() & goHome() .

Screen2.js — this will just hold another component for us to navigate to from our Home screen to demonstrate stack navigation.

Registering the screens

With React Native Navigation, we need to register each of the screens that we will be using in our app.

To do so, we’ll use the registerComponent method from React Native Navigation. We’ll place all of the screens we like to initialize into a single function, & call the function before creating the root of our navigation:

Here, we create & export a function that calls Navigation.registerComponent() on any components we would like to have available to our Navigation.

Registering the app

Next we’ll update index.js to set up & initialize the application’s beginning navigation stack.

Here, we import the registerScreens function & invoke it.

We also set the initial root stack of our app by calling Navigation.setRoot , passing in the initial routes we would like our application to render. In our case, the root will be a single component, the Initializing screen.

Creating our Navigation functions

Now, let’s create a couple of reusable functions that we can use to set root route stacks from within our app.

The root route is what defines the original route stack. We will want to have the option to reset the root stack to either the Authorization routes the actual App itself if the user is logged in.

The images we are requiring for our tabs are below, feel free to save them & use them:

signIn.png

signUp.png

In navigation.js there are two functions:

goToAuth — This function sets our root route stack to a bottomTabs route configuration. Each tab is a component, with a name and some options configured.

goHome — This sets the route stack to a stack navigation, passing in a single component to the children array: the Home component.

Storing the AsyncStorage key in a config file

We will be checking AsyncStorage to see if the user is signed in, and will be doing so in multiple files. We’ll store the AsyncStorage key in a separate file so we can reuse it easily.

Creating our screens

Now we have created all of the navigation configuration we will need, let’s create the screens & components we will be using.

Initializing.js.