CODEWITHSUNDEEP
iostypescriptreact-nativeexpoexpo-go
Toby Clark
Toby Clark

Reputation: 264

Tab Bar Icons not vertically centered React Native Navigation

When testing my react native app (with expo) through the expo go IOS app the icons are not vertically centered, however when testing on web they are vertically centered. I have tried giving each icon a parent div and centering it vertically, giving it a TabBarIconStyle of textAlignVertical: center, and textAlign: center, everything I can think of to vertically align these icons.

My Navigator:

<TabNav.Navigator screenOptions={TabNavOptions}>
                <TabNav.Screen
                    name="Home"
                    component={HomeScreen}
                    options={{
                        tabBarIconStyle: { textAlignVertical: "center", textAlign: "center" },
                        tabBarIcon: ({ color, size }) => (
                            <View style={{}}>
                                <Ionicons name="home" color={color} size={size} style={{ textAlignVertical: "center" }} />
                            </View>
                        ),
                    }}
                />
                <TabNav.Screen name="Workouts" component={HomeScreen} options={{ tabBarIcon: ({ color, size }) => <Ionicons name="barbell" color={color} size={size} /> }} />
                <TabNav.Screen name="Exercises" component={HomeScreen} options={{ tabBarIcon: ({ color, size }) => <Ionicons name="bicycle" color={color} size={size} /> }} />
            </TabNav.Navigator>

My screen options for the Navigator:

const TabNavOptions: BottomTabNavigationOptions = {
        tabBarShowLabel: false,
        tabBarActiveTintColor: "#4B7079",
        tabBarInactiveTintColor: "#FFFFFF",
        tabBarStyle: { width: "90%", height: 60, position: "absolute", left: "5%", bottom: 30, borderRadius: 100, borderTopWidth: 0, backgroundColor: "#75B1BC" },
    };

This is what it looks like on web (and what it should look like)

enter image description here

This is what it looks like on expo go

enter image description here

Upvotes: 2

Views: 4063

Answers (6)

root
root

Reputation: 173

I had a similar problem and even though I tried alignItems: 'center' as tabBarItemStyle, it didn't work, but when I tried flexDirection: 'row', I saw that it worked.

I hope this will work for you too

tabBarItemStyle: {
            alignItems: 'center',
            flexDirection: 'row',
          },

before:

enter image description here

after:

enter image description here

Upvotes: 0

gkpatel
gkpatel

Reputation: 1

i just add =>

  screenOptions={{
                tabBarShowLabel: false,
            tabBarLabelPosition:"beside-icon",<==this worked for me
                **tabBarItemStyle: {
                    alignSelf: 'center',                        
                },**
                tabBarStyle: {}
    }}

1 2

Upvotes: 0

akshayck007
akshayck007

Reputation: 1

adding a margin and , justify center, for tabBarIteStyle did it for me, try this

screenOptions={{
        tabBarShowLabel: false,
        tabBarStyle: {
          height: 70,
          backgroundColor: "green",
        },
        tabBarItemStyle: {
          backgroundColor: "blue",
          justifyContent: "center",
          margin: 10,
        },
      }}

Upvotes: 0

Hassan Kandil
Hassan Kandil

Reputation: 1866

For me the problem was the container that holds the icons inside the Bottom tab is small in size so I had to give it the same height of the bottom bar and it worked

screenOptions={{
   tabBarItemStyle:{height:60},
}}

Upvotes: 1

Toby Clark
Toby Clark

Reputation: 264

I managed to fix this issue with paddingBottom: 0 within the Navigator options, not sure why it only appeared on IOS would love insight if someone has an idea why.

Upvotes: 12

Omri Ram
Omri Ram

Reputation: 37

Try adding this to the styling of the parent view of each icon:

{flex: 1, alignItems: "center" }

Upvotes: 0

Related Questions