Navigation

Navigation

Navigation in Potlucky app is done using React-Navigation https://reactnavigation.org/docs/navigators/ and all navigation code can be found in ./js/navigation/ from the project root.

Adding new screens

The first step we need to decide if the screen is to be part of our root Stack Navigator or will be part of a Tabbed Navigation

From the image above we see that the Stack Navigation Screens do not have the tab bar at the bottom, which is ment to trigger screen changes.

Adding a Stack Navigation Screen

To add a new Screen to the Stack Navigation simply go to the NavigationLayout.ios.js file and append your Screen component to the StackNavigator.

ie. if our Stack Navigator was

export default StackNavigator({
  Login: { screen: SignInSignUpScreen },
  HomeScreenNavigator: { screen: HomeScreenNavigator },
},
{
  initialRouteName: 'Login',
  headerMode: 'screen'
}) 

and we wanted to add a NumberOfGuest Screen we would simply add it to the StackNavigator Object

export default StackNavigator({
  Login: { screen: SignInSignUpScreen },
  HomeScreenNavigator: { screen: HomeScreenNavigator },
  NumberOfGuest: { screen: NumberOfGuestScreen },  // New Screen Added
},
{
  initialRouteName: 'Login',
  headerMode: 'screen'
}) 

Now to access this screen we need would need to push it onto the StackNavigator Stack and to do that we use the navigators navigate method.

Every Screen component that is added to our StackNavigator will have a navigation property added to its props. This prop is contains the navigate method we want to use.

So for example if we had a Screen that we wanted to link to the NumberOfGuests Screen we could add a button on that screen and call the navigate method to go to the NumberOfGuests Screen like below:

<Button
  onPress={() => this.props.navigation.navigate('NumberOfGuests')}
  title="Go To NumberOfGuests Screen"
/>

Note that our Screens have a ScreenContainer component that will be the component the navigation prop is sent to it by the Stack Navigator and we will be passing this prop down to the Screen component to access it in one of the displayed components.

Adding a Tabbed Navigation Screen

If we are added a Tabbed Navigation Screen we need to see if the Tabbed Navigator we want to add our screen to exists or not. If it doesn't we will need to create and push a Tabbed Navigator to our Stack Navigator first.

Below is an example TabNavigator:

const HomeScreenNavigator = TabNavigator(
  {
    Account: { screen: AccountScreen },
    MyPotlucks: { screen: MyPotLucksScreen },
    CreatePotluck: { screen: CreatePotluckScreen },
  },
  {
    initialRouteName: 'Account',
  }
)

If we add the HomeScreenNavigator to our root Stack Navigator we can navigate to it just like any other Screen in the Stack, and the Tab Navigator will load our initialRouteName Screen component.

Adding a Tab to an existing Tab Navigator

To add a tab to an existing Tab Navigator just simply add it as a new property to the Tab Navigator

So if we have

const HomeScreenNavigator = TabNavigator(
  {
    Account: { screen: AccountScreen },
    MyPotlucks: { screen: MyPotLucksScreen },
  },
  {
    initialRouteName: 'Account',
  }
)

and we want to add the CreatePotlucksScreen we simply add it as below

const HomeScreenNavigator = TabNavigator(
  {
    Account: { screen: AccountScreen },
    MyPotlucks: { screen: MyPotLucksScreen },
    CreatePotluck: { screen: CreatePotluckScreen },
  },
  {
    initialRouteName: 'Account',
  }
)

The Tab Navigator will show all the tabs on the bottom of the screen and will handle the navigation when clicking on a specific tab for us.