CODEWITHSUNDEEP
react-nativereact-native-navigation
Sneh Parikh
Sneh Parikh

Reputation: 15

How to change bottom tab navigator styles in react native

I am making an app and I want my bottom tab navigator to look like this:

enter image description here

I have the styles, but I don't know how how to change the bottom tab navigator..

const styles = StyleSheet.create({
 tabBar: {
   backgroundColor: 'white',
   borderTopLeftRadius: 20,
   borderTopRightRadius: 20,
 },
});

source code:

https://snack.expo.dev/@therealsneh/justexpire---real

Upvotes: 0

Views: 1463

Answers (1)

Eragon_18
Eragon_18

Reputation: 770

step 1) use @react-navigation/material-bottom-tabs instead of @react-navigation/bottom-tabs

step 2) create the nav using `const Tab = createMaterialBottomTabNavigator();

step 3) `use this code here, which creates a tab.navigator, and styles the color and icons :

<Tab.Navigator
        labeled={false}
        barStyle={styles.bottomTabStyle}
        screenOptions={({ route }) => ({
          tabBarIcon: ({ focused, color, size }) => {
            let iconName;
            if (route.name === 'screen1') {
              iconName = focused ? 'youricon' : 'youricon-outline';
            } else if (route.name === 'screen2') {
              iconName = focused ? 'youricon' : 'youricon-outline';
            } else if (route.name === 'screen3') {
              iconName = focused ? 'youricon' : 'youricon-outline';
            } 
            return (
              <Ionicons
                name={iconName}
                size={RFValue(25)}
                color={color}
                style={styles.icons}
              />
            );
          },
        })}
        activeColor={'#D4A608'}
        inactiveColor={'gray'}>

step 4) in your stylesheet, customize the styles, with colors. you can change icon names up above:

step 5) add the <Tab.Screen> components, and then close the </Tab.Navigator>

hope that solves your doubt.

Upvotes: 1

Related Questions