1

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?

isherwood
  • 58,414
  • 16
  • 114
  • 157
gkeenley
  • 6,088
  • 8
  • 54
  • 129

1 Answers1

3

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} />} />
fadi omar
  • 740
  • 5
  • 15
  • Can you explain why you need to use the arrow function syntax in order to pass props to the component? – gkeenley Feb 16 '22 at 14:21
  • Some explanation would make this answer better. – isherwood Feb 16 '22 at 14:21
  • Also, separate question but if I wanted to pass props to the TabNavigator itself, like `const TabNavigator = (props) => (`, how would I do that? Something like ``? – gkeenley Feb 16 '22 at 14:28
  • 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! – fadi omar Feb 16 '22 at 14:31
  • this isn't correct. it'll cause remount every render. the function needs to be passed as children, not in component prop: https://reactnavigation.org/docs/troubleshooting/#screens-are-unmountingremounting-during-navigation – satya164 Feb 16 '22 at 21:22