react navigation how to pass navigation object to tabBarButton? - reactjs

Question

I am using create Bottom Tab Navigator , version 6 , is there a way to pass navigation object from Tab.Screen to TabButton ? taking in account props of tabBarButton that I must also pass them to my custom component (TabButton) , here is my code thanks for your help :
<Tab.Screen key={index} name={item.route} component={item.component}
options={{
headerShown: false,
tabBarButton: (props) => <TabButton {...props} item={item} />
}}
/>

Answer 1

you can pass navigation and tabBarButton props in this way,
The options function receives the navigation prop and the route prop for that screen, so you may also use route there.
<Tab.Screen key={index} name={item.route} component={item.component}
options={({ navigation }) => ({
headerShown: false,
tabBarButton: (props) => <TabButton {...props} navigation={navigation} item={item} />
})
}
/>

Answer 2

Here's the example how you can do it
<Stack.Screen
name={"ComponentName"}
component={ComponentScreen}
options={(props) => {
return {
header: () => (
<CustomHeaderComponent
title={"SomeCoolTitle"}
{...props}
/>
),
};
}}
/>

Answer 3

I just added a global variable and affect to it props.navigation , like so :
return (
<Tab.Screen key={index} name={item.route} component={item.component}
options={( props ) => {
_navigation = props.navigation
return{
tabBarButton: (props) => <TabButton {...props} item={item} navigation={_navigation} />
}
}
}
/>
)