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

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

CodePudding user response：

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

CodePudding user response：

Here's the example how you can do it

      <Stack.Screen
        name={"ComponentName"}
        component={ComponentScreen}
        options={(props) => {
          return {
            header: () => (
              <CustomHeaderComponent
                title={"SomeCoolTitle"}
                {...props}
              />
            ),
          };
        }}
      />

CodePudding user response：

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