How can I align the Tab bars similarly on both Android and iOS devices?

Question

I am using expo-router's Tabs to create a navbar for my application, but I notice that there is a big disparity between the navbar's appearance on iOS and Android. On Android the icons are not large enough, and there is a large gap between the icons and their labels. I'd like to get the Android navbar to look similar to the one on iOS devices.

Here's what I have so far:

const TabsLayout = () => {
  const iconSize = hp("3%");

  return (
    <>
      <Tabs
        screenOptions={{
          tabBarStyle: {
            height: hp("10%"),
          },
          tabBarLabelStyle: {
            fontSize: hp("1.8%"),
          },
        }}
      >
        <Tabs.Screen
          name="home"
          options={{
            title: "Home",
            headerShown: false,
            tabBarIcon: ({ color }) => (
              <FontAwesome size={iconSize} name="home" color={color} />
            ),
          }}
        />
        <Tabs.Screen
          name="create"
          options={{
            title: "Create",
            headerShown: false,
            tabBarIcon: ({ color }) => (
              <FontAwesome6 name="add" size={iconSize} color={color} />
            ),
          }}
        />
        <Tabs.Screen
          name="profile"
          options={{
            title: "Profile",
            headerShown: false,
            tabBarIcon: ({ color }) => (
              <AntDesign name="profile" size={iconSize} color={color} />
            ),
          }}
        />
      </Tabs>
    </>
  );
};

export default TabsLayout;

I'm also using react-native-responsive-screen to account for differences in screen size.

Answer 1

On the tabBarIcon prop, you can make the icon styling very granular. Also, since expo-router is built on top of react-navigation if you go to the React Navigation docs, you'll find a lot more options to play around with until you can find the best combination for your needs.