React Native Navigation - Setup.md

React Navigation

Installations

There are three libraries that need to installed via the command line:

1. Install React Navigation npm install --save react-navigation
2. Install react-native-gesture-handler npm install --save react-native-gesture-handler
3. Install react-navigation-stack npm install --save react-navigation-stack

File Setup

The App file will now exclusively house the Navigation. Through navigation we can set what the home file will be.

App.js

The app file will need to have createAppContainer, createStackNavigator and allthe components(pages) you want to connect. In this example there is a login, home, profile(for humans), menu, matches and profile(for dogs). You'll get errors for importing files that don't exist, so add the files first then import them. The order of these files will be what sets the component(page) that the app degaults to, the top component(page) being the default. Make sure this is alligned with the AppNavigator.js file.

import {createAppContainer} from 'react-navigation';
import {createStackNavigator} from 'react-navigation-stack';
import LoginScreen from './Components/Login/Login.js';
import HomeScreen from './Components/Home/Home.js';
import HumanProfileScreen from './Components/HumanProfile/HumanProfile.js';
import MenuScreen from './Components/Home/Home.js';
import MatchesScreen from './Components/Matches/Matches.js';
import DogProfileScreen from './Components/DogProfile/DogProfile.js';

const MainNavigator = createStackNavigator({
      Login: {screen: LoginScreen},
      Home: {screen: HomeScreen},
      HumanProfile: {screen: HumanProfileScreen},
      Menu: {screen: MenuScreen},
      Matches: {screen: MatchesScreen},
      DogProfile: {screen: DogProfileScreen}
    });

const App = createAppContainer(MainNavigator);

export default App;

AppNavigator.js

The AppNavigator file will talk between all the components(pages) of the app and the App.js page with the file navigation structure of the application. This is where we tell the application to go to the Home.js file as the default, no longer the App.js. Also remeber this needs to match the App.js file with the different components(pages, files). The order of these files will be what sets the component(page) that the app degaults to, the top component(page) being the default. Make sure this is alligned with the App.js file.

import React from 'react';
import HomeScreen from '../Home/Home.js';

const AppContainer = createAppContainer({
  Home: HomeScreen,
  Login: LoginScreen,
  HumanProfile: HumanProfileScreen,
  Menu: MenuScreen,
  Matches: MatchesScreen,
  DogProfile: DogProfileScreen
},
{
  initialRouteName: 'Home',
}
);

export default class App extends React.Component {
  render() {
    return <AppContainer />;
  }
}

Link to another component (page)

Link from one component (page) to another component (page). Navigation can occur on any element, for this example we'll use a button in a class component, however this can be done in a functional component as well.

import * as React from 'react';
import { Text, View, Button } from 'react-native';
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';

class HomeScreen extends React.Component { 

render() {
        return (
          <View> 
             <Text>Home Screen</Text>
            <Button
              title="Menu"
              onPress={() => this.props.navigation.navigate('Menu')}
              style={{ flex: 1 }}
            />
          </View>
        )
      }
}

const AppNavigator = createStackNavigator({
  Home: {
    screen: HomeScreen,
  },
});

export default createAppContainer(AppNavigator);