how to handle react-navigation custom header back Button

Question

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

Gray · Accepted Answer · 2020-05-03 23:10:24Z

1

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} />

answered May 3, 2020 at 23:10

Gray

5861 gold badge11 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Kishan Bharda · Accepted Answer · 2020-05-04 06:26:46Z

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>
  );
}

Collectives™ on Stack Overflow

how to handle react-navigation custom header back Button

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related