I have problem on navigating the other screen of my project. Right now I have a task where when I click the button I will go the group chat screen. this screen must pass the parameters to the routes. So the error that I encounter today is undefined is not an object(evaluating 'props.navigation')
Goal : When I click the button my screen will navigate the GroupChat
Error: Undefined Is not an object(evaluating props.navigation')
Adding More Details
What I have right now is.
- Driver Dashboard Screen.
- Fetch Request Screen
- Group Chat Screen
On my Driver Dashboard:
async Watcher() {
try {
this.watchId = geolocation.getCurrentPosition(
(position) => {
this.setState({
region: {
latitude: position.coords.latitude,
longitude: position.coords.longitude,
latitudeDelta: 0.009,
longitudeDelta: 0.009,
},
error: null,
});
},
(error) => this.setState({ error: error.message }),
{ enableHighAccuracy: false, timeout: 50000 },
);
} catch (error) {
console.log(error);
}
}
async componentDidMount() {
this.Watcher();
}
<FetchRequest navigation={this.props.navigation}/>
On My Fetch Screen:
const FetchRequest = ({navigation,props}) => {
return (
<View style={{ justifyContent: 'flex-end', flex: 1, padding: 20 }}>
<Card
style={{ justifyContent: 'center', borderRadius: 20, elevation: 4 }}>
<CardItem>
<Left>
<Body>
<View style={{ flexDirection: 'row', padding: 20 }}>
<View
style={{
flexDirection: 'column',
flex: 1,
justifyContent: 'space-between',
}}>
<View
style={{
position: 'absolute',
left: -25,
top: '40%',
}}>
<DotTrail/>
</View>
<Text
style={{
alignSelf: 'center',
color: '#000',
fontWeight: 'bold',
fontSize: 17,
}}
adjustsFontSizeToFit
numberOfLines={2}>
Pick Up Request {'
'}
</Text>
<Item></Item>
<Text></Text>
<Text style={{ fontSize: 14, fontWeight:'bold' }}>
Location{' '}
</Text>
<Text></Text>
<Item>
<Text style={{ fontSize: 14, fontWeight:'bold' }}>
Location{'
'}
</Text>
</Item>
</View>
</View>
<View style={{ flexDirection: 'row' }}>
<View
style={{
flexDirection: 'row',
flex: 1,
justifyContent: 'space-evenly',
}}>
<Button onPress={() => {
/* 1. Navigate to the Details route with params */
props.navigation.navigate('GroupChat', {
itemId: 86,
otherParam: 'anything you want here',
});
}} small primary title="Message">
<Text>Message</Text>
</Button>
<Button small warning title="Fetch">
<Text>Fetch</Text>
</Button>
<Button small light title="Cancel">
<Text>Cancel</Text>
</Button>
</View>
</View>
</Body>
</Left>
</CardItem>
</Card>
</View>
)
}
export default FetchRequest;
On my Group Chat Screen:
class GroupChat extends React.Component {
render() {
return (
<SafeAreaView style={[{ backgroundColor: '#ffff' }]}>
<Text>Group Chat Goes...</Text>
</SafeAreaView>
)
}
}
export default GroupChat;
Here is the output inside of my Driver Dashboard:
Illustration Error:
Hope someone can produce explanation why I encounter this error and how to solve this.
Thank you.
