react-native-swiper doesnt support this.props.navigation.navigate - react-native

Question

I am new to react native, I am trying to implement react-native-swiper to my project
render() {
return (
<Swiper
loop={false}
showsPagination={false}
index={1}>
<View style={this.viewStyle()}>
<ActivityScreen />
</View>
<Swiper
horizontal={true}
loop={false}
showsPagination={false}
index={1}>
<View style={this.viewStyle()}>
<YourGroups />
</View>
</Swiper>
<View style={this.viewStyle()}>
<AlertScreen />
</View>
</Swiper>
)
}
}
But when I am in component screen and click on the button
<Button title="thank you" onPress={()=>this.props.navigation.navigate("ThankScreen")} ></Button>
I get an error
undefined is not an object (evaluating 'this.props.navigation.navigate')

Answer 1

I ran in to the same issue and fixed it using React Navigation, 5 which allows you to access the navigation prop from any component using the useNavigation hook:
import React from 'react';
import { Button } from 'react-native';
import { useNavigation } from '#react-navigation/native';
const GoToButton = ({ screenName }) => {
const navigation = useNavigation();
return (
<Button
title={`Go to ${screenName}`}
onPress={() => navigation.navigate(screenName)}
/>
);
}