Navigating in Async function - React Navigation - React Native

Noman Ali :

I am trying to navigate from one component to another screen in ReactNative. But getting following

Possible Unhandled Promise Rejection, TypeError: undefined is not an object (evaluating 'navigation.navigate')]

Following is my code in which i wait to fetch place details and then want to navigate to another screen with those details.

constructor(props) {
super(props)
this.state = {status: 'initial'}
this._handlePress = this._handlePress.bind(this);
 }



_handlePress = async ({navigation}) => {
const res = await this.props.fetchDetails(this.props.place_id)
console.log('result', res.geometry.location.lat)
navigation.navigate("Home", {selectedLocation: res.geometry.location});

}

I have tried this.props.navigation.navigate() as well but couldn't fix this.

I get following:

[Unhandled promise rejection: TypeError: undefined is not an object (evaluating '_this.props.navigation.navigate')]

Following is the full component code: Pastebin Link

Jaydeep Galani :

use withNavigation method, as you have already imported it from react-navigation.

export default withNavigation(LocationItem);

If not resolved then pass navigation as a prop from where it has been used.

<LocationItem navigation={this.props.navigation}/>