Passing props to Tab.Screen within BottomTabNavigator - react-native

Question

I am running into difficulty passing props to one of my TabScreens using react-native's BottomTabNavigator. I have tried a couple of different options. Without props the Tab.Screen looks like this:
<Tab.Screen
name='Visits'
component={VisitsTab}
options={{
tabBarLabel: 'Visits',
tabBarIcon: ({ color, size }) => <FontAwesome name='street-view' color={color} size={size} />,
}}
/>
So what I tried was this:
<Tab.Screen
name='Visits'
component={(props) => <VisitsTab {...props} />}
options={{
tabBarLabel: 'Visits',
tabBarIcon: ({ color, size }) => <FontAwesome name='street-view' color={color} size={size} />,
}}
/>
This still doesn't work, as the prop I am logging out in the VisitsTab is undefined - in other words, the VisitsTab is not receiving props. And to clarify, props is available in the MainScreen that passed on the props. What am I missing here?
By the way, I also tried this, but get the same issue:
<Tab.Screen
name='Visits'
options={{
tabBarLabel: 'Visits',
tabBarIcon: ({ color, size }) => <FontAwesome name='street-view' color={color} size={size} />,
}}
>
{(props) => <VisitsTab {...props} />}
</Tab.Screen>
The full navigation for this bottom tab navigator looks like this:
import { VisitsTab } from './tabs/VisitsTab';
import { ChartTab } from './tabs/ChartTab';
import { GoalsTab } from './tabs/GoalsTab';
export const MainScreen = (props) => {
const Tab = createBottomTabNavigator();
return (
<Tab.Navigator
screenOptions={{
headerShown: true,
title: 'Patient',
headerLeft: () => (
<Feather
name='chevron-left'
size={24}
onPress={() => props.navigation.goBack()}
/>
),
}}
initialRouteName={'Visits'}
>
<Tab.Screen
name='Visits'
component={(props) => <VisitsTab {...props} />}
options={{
tabBarLabel: 'Visits',
tabBarIcon: ({ color, size }) => <FontAwesome name='street-view' color={color} size={size} />,
}}
/>
<Tab.Screen
name='Chart'
component={ChartTab}
options={{
tabBarLabel: 'Charts',
tabBarIcon: ({ color, size }) => <FontAwesome name='id-badge' color={color} size={size} />,
}}
/>
<Tab.Screen
name='Goals'
component={GoalsTab}
options={{
tabBarLabel: 'Edit Goals',
tabBarIcon: ({ color, size }) => <FontAwesome name='trophy' color={color} size={size} />,
}}
/>
</Tab.Navigator>
);
};
By the way, somewhat frustratingly, the documentation page for the Bottom Tabs Navigator doesn't actually address how to pass props.

Answer 1

Props for a component (for a screen to be precise) are not passed by the navigation framework. Props are passed from a parent to its child components. When writing component={Visits}, we do not instantiate an actual JSX components. Thus, there are no props to be passed.
In order to pass information during navigation, we use the route params. Here is an example: navigation.navigate("Visits", {x: 42}).
However, if Visits is supposed to be an initial screen of some navigator, then we have never actually navigated. Thus, the above approach does not help.
For this reason, the react-navigation framework added the initialParams prop for screens. They are defined inside the screen of some navigator.
<Tab.Screen
name='Visits'
component={VisitsTab}
initialParams={props}
/>
whereby props is any object and it might be better to use a different name, since these aren't actual props.
Then, access them in your screen.
function VisitsTab({route}) {
const params = route?.params
return (...)
}
We can access the passed information via params.