Sunday, December 4, 2022
HomeiOS Developmentios - Tab Bar Icons not vertically centered React Native Navigation

ios – Tab Bar Icons not vertically centered React Native Navigation


When testing my react native app (with expo) by way of the expo go IOS app the icons will not be vertically centered, nonetheless when testing on net they’re vertically centered. I’ve tried giving every icon a father or mother div and centering it vertically, giving it a TabBarIconStyle of textAlignVertical: heart, and textAlign: heart, all the pieces I can consider to vertically align these icons.

My Navigator:

<TabNav.Navigator screenOptions={TabNavOptions}>
                <TabNav.Display
                    title="Dwelling"
                    element={HomeScreen}
                    choices={{
                        tabBarIconStyle: { textAlignVertical: "heart", textAlign: "heart" },
                        tabBarIcon: ({ coloration, measurement }) => (
                            <View fashion={{}}>
                                <Ionicons title="residence" coloration={coloration} measurement={measurement} fashion={{ textAlignVertical: "heart" }} />
                            </View>
                        ),
                    }}
                />
                <TabNav.Display title="Exercises" element={HomeScreen} choices={{ tabBarIcon: ({ coloration, measurement }) => <Ionicons title="barbell" coloration={coloration} measurement={measurement} /> }} />
                <TabNav.Display title="Workout routines" element={HomeScreen} choices={{ tabBarIcon: ({ coloration, measurement }) => <Ionicons title="bicycle" coloration={coloration} measurement={measurement} /> }} />
            </TabNav.Navigator>

My display choices for the Navigator:

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

That is what it appears to be like like on net (and what it ought to appear like)

enter image description here

That is what it appears to be like like on expo go

enter image description here

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Recent Comments