React Native pass params through tabs.screen

Question

how can I pass params or an object to a Tabs-Screen when clicking on that tab in React Nativ? This is the code of a bottom Tab Navigation on one page of the app.

  const Tab = createBottomTabNavigator();

function MainContainer({ route, navigation  }) {

    
//function MainContainer({  }) {
    
  // Load the icon font before using it
  const [fontsLoaded] = useFonts({ IcoMoon: require('../../assets/icomoon/zepra_icons.ttf') });
  const { data }    = route.params;
    
    console.log('data:');
    console.log(data);
    
  if (!fontsLoaded) {
    return <AppLoading />;
  }
    
  return (
      <Tab.Navigator
                initialRouteName={projectsName}
                screenOptions={({ route }) => ({
                  headerShown: false,
                  tabBarIcon: ({ focused, color, size }) => {
                    let iconName;
                    let rn = route.name;

                    if (rn === projectsName) {
                      iconName = focused ? 'PROJEKTE_ALLE' : 'PROJEKTE_ALLE';
                    } else if (rn === waermeschutzName) {
                      iconName = focused ? 'HAUS_3' : 'HAUS_3';
                    } else if (rn === begehungenName) {
                      iconName = focused ? 'NOTIZ_ERSTELLEN' : 'NOTIZ_ERSTELLEN';
                    }

                    return <Icon name={iconName} size={43} color={color} />;
                  },
                  'tabBarActiveTintColor': '#4283b1',
                  'tabBarInactiveTintColor': '#5db8bd',
                  'tabBarStyle':{ 'paddingTop':4, 'height':90 },
                  'tabBarLabelStyle':{ 'paddingTop':3, 'fontSize':13 }
                })}>
                <Tab.Screen name={projectsName} component={ProjectsScreen} /> 
                <Tab.Screen name={waermeschutzName} component={WaermeschutzScreen} />
                <Tab.Screen name={begehungenName} component={BegehungenScreen} />
                    
      </Tab.Navigator>
  );
}

export default MainContainer;

I have tryed several ways but could not get it to work. Does anyone have a working example or cane someone help me with my code??

Thank you

Answer 1

You could use the initialParams prop for the Tab.Screen components in order to pass the initial params to each tab.

Here is an example on how to do this for your first tab screen.

<Tab.Screen name={projectsName} component={ProjectsScreen} initialParams={{ data }} />