Reputation: 586
i'm using react-navigation:
"@react-navigation/native": "5.2.3",
"@react-navigation/stack": "5.2.18",
and i have a custom header a specific screen but i need to handle back button to go back to previous screen but i don't have access to navigation prop to do that
function MainStackScreen() {
return (
<Stack.Navigator initialRouteName={'Splash'}>
<Stack.Screen name="Splash" component={Splash} options={{headerShown: false}}/>
<Stack.Screen options={{ style:{ borderTopWidth: 0, elevation: 0, shadowOpacity: 0 },
headerStyle:{height: hp('7%') }, header:()=><CustomHeader
title={i18n.t('myAds:header')} back bgColor={colors.white}
onPressHeader={()=>navigation.pop()} /> }} name="MyAdsTabs" component={MyAdsTabs} />
</Stack.Navigator>
);
}
<Provider store={store}>
<PersistGate persistor={persistor} loading={this.renderLoading()}>
<Root>
<NavigationContainer>
<MainStackScreen />
</NavigationContainer>
</Root>
</PersistGate>
</Provider>
it gives me an error with: ReferenceError: navigation is not defined how can i have accessto navigation or something to handle back button
Upvotes: 1
Views: 2102
Reputation: 5700
You have to define navigation
in header as below :
function MainStackScreen() {
return (
<Stack.Navigator initialRouteName={'Splash'}>
<Stack.Screen name="Splash" component={Splash} options={{ headerShown: false }} />
<Stack.Screen
options={{
style: { borderTopWidth: 0, elevation: 0, shadowOpacity: 0 },
headerStyle: { height: hp('7%') },
header: ({ navigation }) => ( // defing navigation here
<CustomHeader
title={i18n.t('myAds:header')} back bgColor={colors.white}
onPressHeader={() => navigation.pop()}
/>
)
}}
name="MyAdsTabs"
component={MyAdsTabs}
/>
</Stack.Navigator>
);
}
Upvotes: 1
Reputation: 586
i passed navigation like this as the docs said react-navigation docs
<Stack.Screen options={({navigation})=>({ style:{ borderTopWidth: 0, elevation: 0, shadowOpacity: 0 },
headerStyle:{height: hp('7%') }, header:({goBack})=>
<CustomHeader title={i18n.t('myAds:header')} back bgColor={colors.white} onPressHeader={()=>navigation.pop()} /> })}
name="MyAdsTabs" component={MyAdsTabs} />
Upvotes: 1