Show a New Screen with React Navigation and StackNavigator
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.
I have the problem like you but I just clone a new one form repo and reinstall everything. it works.
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)"
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 :)
Thanks Minjun, I just did something similar. Deleted "node_modules" and "pods" and reinstalled again.
Thank you @とうせいきょう
Then also do this
cd ios
pod install
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 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.
- yarn add react-navigation-stack
- 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
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:
Thank Alex Kelley, <RestaurantRow place={item} index={index} navigation={this.props.navigation} />, worked perfectly.
Made it half way through and completely stuck on navigation - pod errors, missing dependencies, etc... not very cool.
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.
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
For react-navigation
v3, there is some changes First, installreact-native-gesture-handler, doc is hereThen in
App.js, it should beDoc is here
Last, in
RestaurantRow.js, to getthis.props.navigation, we should usewithNavigationfromreact-navigation, doc is here