🚀 Generate full stack React, Vue, Angular applications easily with our new Web Application Generator! 🚀

Edit MainTabNavigator.js for the bottom menu

Gravatar

hello, i want to show in the bottom menu of the application only home navigation and not everything in the tabNavigationData file, whenever i add something in tabNavigationData.js it shows also in the bottom menu, how do i remove it ?

<Tab.Navigator>
  {tabNavigationData.map((item, idx) => (
    <Tab.Screen
      key={`tab_item${idx+1}`}
      name={item.name}
      component={item.component}
      options={{
        tabBarIcon: ({ focused }) => (
            <View style={styles.tabBarItemContainer}>
              <Image
                  resizeMode="contain"
                  source={item.icon}
                  style={[styles.tabBarIcon, focused && styles.tabBarIconFocused]}
              />
            </View>
        ),
        tabBarLabel: ({ focused }) => <Text style={{ fontSize: 12, color: focused ? colors.primary : colors.gray }}>{item.name}</Text>
      }}
    />

    ))}
</Tab.Navigator>
Gravatar
Michael Daineka

Hi!

You can modify tabNavigationData within tabNavigationData.js file for your needs.

const tabNavigationData = [ { name: 'Home', component: HomeScreen, icon: iconHome, }, ];

Best regards

Cookie Consent

By continuing to browse or by clicking 'OK', you agree to the storing of cookies on your device to enhance your site experience and for analytical purposes. To learn more about how we use cookies, please see our cookies policy.