CODEWITHSUNDEEP
react-nativereact-navigationreact-navigation-v5
Tony Starkus
Tony Starkus

Reputation: 576

Custom Tab Bar React Navigation 5

I'm trying to make a tab bar like in the picture bellow, using React Navigation.

I tried some codes, but nothing worked. Some codes are from previous React Navigation Version. The really problem is make the tab bar have a margin from from bottom and both sides, and borders rounded.

Anyone can help me please?!

enter image description here

Upvotes: 23

Views: 36877

Answers (4)

user18309290
user18309290

Reputation: 8300

This can be achieved without a custom bar using screenOptions function and then standard styles. Like using tabBarStyle and setting position to absolute and setting margins. This provides full control of styling the bar and based on the route too when needed.

<Tab.Navigator
  screenOptions={({ route }) => ({
    tabBarActiveTintColor: 'black',
    tabBarInactiveTintColor: 'white',
    tabBarActiveBackgroundColor: 'yellow',
    tabBarInactiveBackgroundColor: 'black',
    tabBarStyle: {
      position: 'absolute',
      height: 60,
      margin: 10,
      borderRadius: 30,
      borderTopWidth: 0,
      backgroundColor: 'black',
    },
    tabBarItemStyle: {
      margin: 10,
      borderRadius: 30,
    },
    tabBarIconStyle: { display: 'none' },
    tabBarLabel: ({ focused, color }) => {
      let icon = '';
      switch (route.name) {
        case 'Home':
          icon = 'home';
          break;
        case 'Profile':
          icon = 'account';
          break;
        case 'Settings':
          icon = 'tools';
          break;
      }
      return (
        <View
          style={{
            flex: 1,
            flexDirection: 'row',
            justifyContent: 'center',
            alignItems: 'center',
          }}>
          <MaterialCommunityIcons name={icon} color={color} size={24} />
          {focused && <Text>{route.name}</Text>}
        </View>
      );
    },
  })}>
  <Tab.Screen name="Home" component={Home} />
  <Tab.Screen name="Profile" component={Profile} />
  <Tab.Screen name="Settings" component={Settings} />
</Tab.Navigator>

Upvotes: 0

Tarkeasy
Tarkeasy

Reputation: 33

If it doesn't appear, add it to your custom tabBar root <View> { position: 'absolute', bottom: 0, right: 0, width: '100%', height: 50 }

Upvotes: 0

Muhammad Numan
Muhammad Numan

Reputation: 25343

here is demo: https://snack.expo.io/@nomi9995/createbottomtabnavigator-%7C-react-navigation

you can use tabBar props to make custom TABBAR

<NavigationContainer>
      <Tab.Navigator tabBar={props => <MyTabBar {...props} />}>
        <Tab.Screen name="Home" component={HomeScreen} />
        <Tab.Screen name="Settings" component={SettingsScreen} />
      </Tab.Navigator>
    </NavigationContainer>

MyTabBar Component

function MyTabBar({ state, descriptors, navigation }) {
  return (
    <View style={{ flexDirection: 'row',backgroundColor:"#F4AF5F",height:50,borderRadius:50,justifyContent:"center",alignItems:"center" }}>
      {state.routes.map((route, index) => {
        const { options } = descriptors[route.key];
        const label =
          options.tabBarLabel !== undefined
            ? options.tabBarLabel
            : options.title !== undefined
            ? options.title
            : route.name;

        const isFocused = state.index === index;

        const onPress = () => {
          const event = navigation.emit({
            type: 'tabPress',
            target: route.key,
          });

          if (!isFocused && !event.defaultPrevented) {
            navigation.navigate(route.name);
          }
        };

        const onLongPress = () => {
          navigation.emit({
            type: 'tabLongPress',
            target: route.key,
          });
        };

        return (
          <TouchableOpacity
            accessibilityRole="button"
            accessibilityStates={isFocused ? ['selected'] : []}
            accessibilityLabel={options.tabBarAccessibilityLabel}
            testID={options.tabBarTestID}
            onPress={onPress}
            onLongPress={onLongPress}
            style={{ flex: 1, alignItems:"center" }}
          >
            <Text style={{ color: isFocused ? '#673ab7' : '#222' }}>
              {label}
            </Text>
          </TouchableOpacity>
        );
      })}
    </View>
  );
}

Upvotes: 45

dansiemens
dansiemens

Reputation: 578

The key to this is to add the style position: 'absolute' to the outer <View> container on your custom TabBar. This will get rid of the white background issue.

Upvotes: 5

Related Questions