React Navigation v6: How do you pass arbitrary props to Tab Navigator?

Question

I have the following Tab Navigator in my React Native app, using React Navigation v6:

<Tab.Navigator>
  <Tab.Screen name="Screen1" component={Screen1}/>
  <Tab.Screen name="Screen1" component={Screen2}/>
</Tab.Navigator>

I want to pass a prop called prop1 that will be accessible in each screen. How do I do this?

Answer 1

You can do this by moving the component from the component prop to become a child of the screen. Example:

<Tab.Navigator>
  <Tab.Screen name="Screen1">
    {() => <Screen1 prop1={prop1} />}
  </Tab.Screen>
  <Tab.Screen name="Screen2">
    {() => <Screen2 prop1={prop1} />}
  </Tab.Screen>
</Tab.Navigator>

Official doc here