Edit MainTabNavigator.js for the bottom menu

React Native Templates

smailsw

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>

Michael Daineka

Hi!

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

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

Best regards

Edit MainTabNavigator.js for the bottom menu

Cookie Consent