Show a New Screen with React Navigation and StackNavigator

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);

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.

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

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