react-native-firebase/codorials/authentication-with-firebase/app-navigation.md

App Navigation

React Navigation has gone through many cycles of navigation implementations and has been a pain point for developers for a good while. A current "go to" navigation library is called react-navigation. It's pure JavaScript implementation which performs well and provides a solid foundation for navigation on both Android and iOS.

Authentication typically requires 3 screens; Login, Register & Forgot Password.

Installation

Simply install the dependency via NPM, no native installation is needed:

npm install --save react-navigation

Navigation Stacks

Navigation on an app typically works in stacks, where a user can navigate to a new screen (pushing a new screen onto the stack), or backwards (popping a screen off the stack).

What's great about this concept is that we can create multiple instances of a stack, for example a stack for unauthenticated users and another for authenticated ones.

To create a new stack, we import the StackNavigator from react-navigation. In it's basic form, the first item of the StackNavigator object acts as our initial screen on the stack. Lets create a new directory and component for our unauthenticated state:

// src/screens/unauthenticated/index.js

import { StackNavigator } from 'react-navigation';

import Login from './Login';
import Register from './Register';

export default StackNavigator({
  Login: {
    screen: Login,
  },
  Register: {
    screen: Register,
  }
});

In both the Login & Register files, create a basic React component (change Login to Register where appropriate):

// src/screens/unauthenticated/Login.js
// src/screens/unauthenticated/Register.js

import React, { Component } from 'react';
import { View, Text } from 'react-native';

class Login extends Component {
  render() {
    return (
      <View>
        <Text>
          Login
        </Text>
      </View>
    );
  }
}

Using the stack

StackNavigator returns a React component which can be rendered in our app. If we go back to our src/App.js component, we can now return the stack:

// src/App.js

import React, { Component } from 'react';

import UnauthenticatedStack from './screens/unauthenticated';

class App extends Component {

    render() {
      return <UnauthenticatedStack />;
    }

}

export default App;

Our UnauthenticatedStack component will now show the Login component as it's the first item in the StackNavigator. Reload your app and you should have your Login component rendering!

TODO image

Styling the navigator

As you can see, react-navigation provides a base view which is platform specific.

..

Pushing a new stack