Custom Tab Bar React Navigation 5

Question

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?!

Muhammad Numan · Accepted Answer · 2021-01-18T10:54:14.323

43

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>
  );
}

edited Jan 18 '21 at 10:54

answered May 28 '20 at 19:28

Muhammad Numan

23,222
6
63
80

1

Yeah, with that I can customize the content inside tab bar. But I can't make rounded border for tab bar and I can't make a margin between tab bar and left/right/bottom screen. – Tony Starkus May 28 '20 at 19:42
in demo project you can see the rounded border and you can make margin between tab by changing style ob TouchableOpacity in example – Muhammad Numan May 29 '20 at 04:46
In demo code I can see a white background that show the limit from screen page and tab bar – Tony Starkus May 29 '20 at 20:39
you can give style properties to adjust your tabbat – Muhammad Numan May 29 '20 at 20:45
I tried override this white background but no success – Tony Starkus May 29 '20 at 21:01
now you can check https://snack.expo.io/@nomi9995/createbottomtabnavigator-%7C-react-navigation – Muhammad Numan May 29 '20 at 21:30
I forgot, sorry xD – Tony Starkus May 30 '20 at 01:08
How to add icons? – Vikas Roy Jan 18 '21 at 18:48
Any update on How we can add icons for tabs?? – Sharad S Katre Feb 11 '21 at 06:17
@SharadSKatre May be its too late but you can add icons by replacing text with Image, or can add view with both text and image. `` – laxman khanal May 04 '21 at 13:11

score 5 · Answer 2 · answered Aug 05 '20 at 18:55

5

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.

answered Aug 05 '20 at 18:55

dansiemens

530
1
4
12

No this makes the entire navbar disappear – Pro Oct 08 '21 at 14:08

score 0 · Answer 3 · answered Mar 26 '23 at 10:03

0

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

answered Mar 26 '23 at 10:03

Tarkeasy

13
3

Custom Tab Bar React Navigation 5

3 Answers3

Linked