How can I pass props to individual <Tab.Screen> with React Navigation?-CodePudding

I have the following stack navigator code in my React Native app using @react-navigation/bottom-tabs:

const Tab = createBottomTabNavigator();

const TabNavigator = () => (
  <Tab.Navigator tabBar={(props) => <BottomNavBar {...props} />}>
    <Tab.Screen name={routes.app.search} component={Search} />
    <Tab.Screen name={routes.app.connections} component={Connections} />
    <Tab.Screen name={routes.app.filters} component={Filters} />
    <Tab.Screen name={routes.app.profile} component={Profile} />
  </Tab.Navigator>
);

How do I pass a prop to an individual screen in this navigator? For example, the Search screen?

CodePudding user response：

the component property take a react component as a value to be shown on that screen, and to pass props to that component, instead of calling the screen directly, you can pass am arrow function as a wrapper to that component and in the arrow function return the invoke of the react component that you want to show plus now you can pass the props or even implement some logic before returning! so lets try this

<Tab.Screen name={routes.app.search} component={() => <Search showProps={true} {...props} />} />