I have just recently switched to React navigation v6 in my RN app and I can’t seem to understand why my Button
(s) and Touchable
(s) do not recognize onPress
function the second time they are being pushed.
The scenario:
- I launch Home Screen.
- Press
go to test screen
button. The console prints the message. - On Test Screen press
go back
. The console prints the message. I go back. - Back on the Home Screen the button doesn’t work anymore. Console does not print the message
Home.tsx
<View style={{ flex: 1, paddingTop: 30 }}>
<Button
title='go to test screen'
onPress={() => {
console.log('pressed to test');
navigate(TEST_SCREEN);
}}
/>
</View>
TestScreen.tsx
<View style={{flex: 1, paddingTop: 30}}>
<Button
title='go back'
onPress={() => {
console.log('pressed go back');
goBack();
}}
/>
</View>
navigate func:
export function navigate(name: string, params?: any | undefined) {
if (navigationRef.isReady()) {
navigationRef.navigate(name, params);
}
}
navigator:
const Home = createStackNavigator();
export default function HomeNavigator(): JSX.Element {
return (
<Home.Navigator
initialRouteName={HOME_SCREEN}
screenOptions={{ headerShown: false }}
>
<Home.Screen name={HOME_SCREEN} component={HomeScreen} />
<Home.Screen name={TEST_SCREEN} component={TestScreen} />
</Home.Navigator>
);
}
routes:
export const HOME_SCREEN = 'Home';
export const TEST_SCREEN = 'Test';