Show a New Screen with React Navigation and StackNavigator

Chris Achard
InstructorChris Achard

Share this video with your friends

Send Tweet
Published 3 years ago
Updated a year ago

Navigation is not built in to React Native, so we’ll use the React Navigation library to set up a navigator for our application. We’ll start with a Stack Navigator, which allows us to “push” new screens onto the stack, and gives us a nice “back” button to go back to the previous screen.

Instructor: [00:00] Install React Navigation with npm install --save react-navigation, which we'll use to add navigation to the app. In App.js, import { createStackNavigator } from 'react-navigation' and use it to make and export a new stack navigator.

[00:25] We want the first screen in the stack to be the lists screen, which is currently being exported as default. Let's move that to a new file called restaurantList.js. We'll put it in components. Be sure to move the appropriate import statements as well. We can significantly clean up App.js.

[00:56] Then we can import the new list file and use it to define the first screen in the stack navigator, which we'll call home. When we reload now, we still see the list, but we have the addition of a navigation header bar, which is how we know this is properly in a stack navigator.

[01:22] Let's start the debugger in the render() method to look at what props React Navigation gives us. Because the restaurantList is in the stack navigator, we get the navigation prop. Inside of there, we have a navigate function, which we can use to navigate to another screen in the stack navigator.

[01:40] Remove the debugger from the list and make a new screen called restaurantInfo.js, which we'll leave as a simple React Native view and a text label for now. Then, in App.js, we can import that new info screen and put it in our stack navigator. Note that the component is called restaurantInfo, but we're just naming the screen info, which is the name that we'll use when navigating.

[02:08] If we reload now, the info screen is on the stack, but we need to expressly navigate to see it. Let's make these info buttons navigate to that screen instead of popping up in place.

[02:20] In restaurantList.js, we have to pass the navigation prop to each restaurant row because that's where the onPress for those info buttons are. In restaurant row, we can change the info pressed function to call this.props.navigation.navigate and pass an info, which is the name of the key for the screen in our stack navigator that we want to show.

[02:44] When we reload, the info buttons now push a new screen onto the stack navigator, and we can navigate back and forth.

とうせいきょう
とうせいきょう
~ 3 years ago

For react-navigation v3, there is some changes First, install react-native-gesture-handler, doc is here

npm install --save react-native-gesture-handler
react-native link react-native-gesture-handler

Then in App.js, it should be


import React, { Component } from 'react';
import {
  createStackNavigator,
  createAppContainer
} from 'react-navigation';

import RestaurantList from 'components/RestaurantList';
import RestaurantInfo from 'components/RestaurantInfo';

const AppNavigator = createStackNavigator({
  Home: {screen: RestaurantList},
  Info: { screen:  RestaurantInfo}
});


export default createAppContainer(AppNavigator);

Doc is here

Last, in RestaurantRow.js, to get this.props.navigation, we should use withNavigation from react-navigation, doc is here

import { withNavigation } from 'react-navigation';
class RestaurantRow extends Component {}
export default withNavigation(RestaurantRow);
Pranut Pannao
Pranut Pannao
~ 3 years ago

I have the problem like you but I just clone a new one form repo and reinstall everything. it works.

Juan Dalmasso
Juan Dalmasso
~ 3 years ago

I can't make it work, I installed gesture-handler too but I am still getting more errors:

"Null is not an object (evaluating _RNGestureHandlerModule.default.Direction)"

Minjun Kim
Minjun Kim
~ 3 years ago

hello i have fixed a problem after install gesture-handler, "Null is not an object (evaluating _RNGestureHandlerModule.default.Direction)" in project folder (which is RestaurantReview),

cd ios
pod install

and restart the simulator worked just great for me :)

Juan Dalmasso
Juan Dalmasso
~ 3 years ago

Thanks Minjun, I just did something similar. Deleted "node_modules" and "pods" and reinstalled again.

~ 2 years ago

Thank you @とうせいきょう

Then also do this

cd ios
pod install
Gabriel Petrovick
Gabriel Petrovick
~ 2 years ago

This video is a little bit outdated and not working as it should be due to React native updates.(0.61), but with some research i made it work again ;)

Gabriel Petrovick
Gabriel Petrovick
~ 2 years ago

This video is a little bit outdated and not working as it should be due to React native updates.(0.61), but with some research i made it work again ;)

This is what I did to make it work.

  1. yarn add react-navigation-stack
  2. Change App.js and it will like the code below. import React from 'react';

import {createStackNavigator} from 'react-navigation-stack'; import {createAppContainer} from 'react-navigation' import RestaurantList from 'components/RestaurantList' import RestaurantInfo from 'components/RestaurantInfo'

export default createAppContainer(createStackNavigator({ Home: { screen: RestaurantList }, Info: { screen: RestaurantInfo } })) 3) Change RestaurantRow adding "import {withNavigation} from 'react-navigation'" and "export default withNavigation(RestaurantRow)"

This is how it works for me, if i'm wrong please let me know so I can change my code. Hope it helps anyone

Alex Kelley
Alex Kelley
~ 2 years ago

Thanks, this was helpful. I don't think withNavigation(RestaurantRow) is necessary because you're passing the navigation prop in from RestaurantList.js. That is, <RestaurantRow place={item} index={index} navigation={navigation} /> It works in my code without it. See the API for details:

Gabriel Petrovick
Gabriel Petrovick
~ 2 years ago

Thank Alex Kelley, <RestaurantRow place={item} index={index} navigation={this.props.navigation} />, worked perfectly.

Andrew
Andrew
~ 2 years ago

Made it half way through and completely stuck on navigation - pod errors, missing dependencies, etc... not very cool.

Filip N. Mikkel
Filip N. Mikkel
~ 2 years ago

Same as Andrew... It would be nice to get an updated view on this cause I've tried debugging pods for the past 8 hours. Soon as I run "pod install" everything explodes. I cant build anymore cause apparently "Multiple commands produce". Since we are paying for this website it would be nice to see a fix for this.

Filip N. Mikkel
Filip N. Mikkel
~ 2 years ago

From what I've been able to gather it's caused by vector icons. They use the same place in storage as the react-navigation and that's why it fails