1

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

Toby Clark
  • 142
  • 12

2 Answers2

4

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.

Toby Clark
  • 142
  • 12
0

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

{flex: 1, alignItems: "center" }
Omri Ram
  • 37
  • 1
  • 7
  • 1
    Unfortunately, that didn't work, do you have any other suggestions? – Toby Clark Nov 20 '22 at 05:01
  • Perhaps we can debug what's going on if you're curious. If you set the background of the parent views go green can you verify that they fill up the entire height of the tab bar? – Omri Ram Nov 21 '22 at 08:48
  • when paddingBottom: 0 isnt set they do on web but don't on IOS, not sure why only shows padding for IOS but that was the root of it. – Toby Clark Nov 22 '22 at 09:28