Expo Router bottom tabs styling not working as expected

[imsudipcreator]

Body

My goal is to create a floating, rounded bottom tab bar where icons are perfectly centered and the focused tab is styled differently (larger width).

I’m working on an Expo project using Expo Router and trying to style my bottom tabs. But the CSS isn’t behaving as expected.
Like, i want the tab items to be centered but they looks slighly upward.

Not only this, i wanted to give focused tabitem a different width but that also doesn't seem to work as expected. I want to achieve this.

but getting this instead

import { Tabs } from 'expo-router';
import React from 'react';

import { Colors } from '@/constants/theme';
import { useColorScheme } from '@/hooks/use-color-scheme';
import { Analytics01Icon, Home09Icon, Settings01Icon, Wallet01Icon } from '@hugeicons/core-free-icons';
import { HugeiconsIcon } from '@hugeicons/react-native';
import { View } from 'react-native';

export default function TabLayout() {
  const colorScheme = useColorScheme();

  return (
    <Tabs
      screenOptions={{
        tabBarActiveTintColor: Colors[colorScheme ?? 'light'].tint,
        headerShown: false,
        // tabBarButton: HapticTab,
        tabBarShowLabel: false,
        tabBarStyle: {
          // backgroundColor: 'transparent',
          height: 75,
          borderWidth: 0,
          // paddingTop: 17,
          borderRadius: 50,
          position: 'absolute',
          bottom: 25,
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          marginHorizontal: "5%",
          left: 0,
          right: 0
        }
      }}>
      <Tabs.Screen
        name="index"
        options={{
          tabBarIcon: ({ color, focused }) => (
            <View className='h-full bg-slate-500'>
              <HugeiconsIcon icon={Home09Icon} color={color} strokeWidth={1.8} fill={focused ? color : "none"} />
            </View>
          ),
        }}
      />
      <Tabs.Screen
        name="wallet"
        options={{
          tabBarIcon: ({ color }) => <HugeiconsIcon icon={Wallet01Icon} color={color} strokeWidth={1.8} />,
        }}
      />
      <Tabs.Screen
        name="statistics"
        options={{
          tabBarIcon: ({ color }) => <HugeiconsIcon icon={Analytics01Icon} color={color} strokeWidth={1.8} />,
        }}
      />
      <Tabs.Screen
        name="settings"
        options={{
          tabBarIcon: ({ color }) => <HugeiconsIcon icon={Settings01Icon} color={color} strokeWidth={1.8} />,
        }}
      />
    </Tabs>
  );
}

Question:
👉 Why does this happen? Is there a better way to style bottom tabs in Expo Router so layout/positioning works as intended?

Environment

• Expo SDK: 54
• React Native: 0.81
• Expo Router: latest
• Platform: Android 14 (Poco M6 pro 5g)

Guidelines

• I have read and understood this category's guidelines before making this post.

[devenkumar1]

To create a floating, rounded bottom tab bar with centered icons and a focused tab with a larger width in your Expo project using Expo Router, you'll need to customize the tab bar styles appropriately.

Here’s a step-by-step guide to achieve your goal:

1. Install Expo Router and Dependencies

Make sure you have Expo Router set up. If you haven’t done so already, you can follow the official Expo guide to install it.

2. Setting Up Bottom Tab Navigation

If you haven't set up the bottom tab navigator yet, here's how you can set it up with @react-navigation/bottom-tabs.

First, install the necessary libraries:

expo install @react-navigation/native @react-navigation/bottom-tabs react-native-screens react-native-safe-area-context

Then, create a basic bottom tab navigator structure:

import React from 'react';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { NavigationContainer } from '@react-navigation/native';

import HomeScreen from './screens/Home';
import SettingsScreen from './screens/Settings';

const Tab = createBottomTabNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator
        screenOptions={{
          tabBarStyle: {
            position: 'absolute',
            bottom: 20,
            left: 20,
            right: 20,
            borderRadius: 30,
            height: 70, // adjust based on preference
            backgroundColor: '#ffffff', // tab bar background
            elevation: 10, // for Android shadow
          },
          tabBarIconStyle: {
            width: 24,  // adjust icon size
            height: 24, // adjust icon size
          },
        }}
      >
        <Tab.Screen name="Home" component={HomeScreen} />
        <Tab.Screen name="Settings" component={SettingsScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

3. Styling the Floating Tab Bar

Now, let's add some custom styles for the floating and rounded tab bar. The key things to focus on are:

• Centering the icons (i.e., the icon should be aligned properly).
• Changing the size of the focused tab.

You’ll achieve this by applying custom styles to the tabBarStyle and tabBarIconStyle properties.

Key Points:

1. Centering the Tab Icons:
   You can adjust the padding and margins of the icons to make them appear centered vertically.

2. Tab Focus Styling:
   You can use the tabBarIcon focused state to change the styling when the tab is active.

4. Implementation Example

Here’s how you can center the icons and apply the focused styling:

import React from 'react';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { NavigationContainer } from '@react-navigation/native';
import { View } from 'react-native';
import Ionicons from 'react-native-vector-icons/Ionicons'; // or any icon library of your choice

import HomeScreen from './screens/Home';
import SettingsScreen from './screens/Settings';

const Tab = createBottomTabNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator
        screenOptions={({ route }) => ({
          tabBarStyle: {
            position: 'absolute',
            bottom: 20,
            left: 20,
            right: 20,
            borderRadius: 30,
            height: 70, // Adjust the height
            backgroundColor: '#ffffff',
            elevation: 10,
            shadowColor: '#000000', // Shadow for iOS
            shadowOffset: { width: 0, height: 10 },
            shadowOpacity: 0.25,
            shadowRadius: 5,
          },
          tabBarIcon: ({ focused }) => {
            const iconName =
              route.name === 'Home' ? 'home' : 'settings'; // Change based on route

            return (
              <Ionicons
                name={iconName}
                size={focused ? 32 : 24} // Larger size for focused tab
                color={focused ? '#007bff' : '#444'}
                style={{
                  marginBottom: focused ? 0 : 5, // Adjust margin to keep centered
                }}
              />
            );
          },
          tabBarIconStyle: {
            alignItems: 'center',
            justifyContent: 'center',
          },
          tabBarLabelStyle: {
            display: 'none', // Hides label, if you just want icons
          },
        })}
      >
        <Tab.Screen name="Home" component={HomeScreen} />
        <Tab.Screen name="Settings" component={SettingsScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

5. Key Adjustments in the Code

• Centering the icons: In the tabBarIconStyle, using alignItems: 'center' and justifyContent: 'center' will help keep the icons centered both vertically and horizontally.

• Focused tab icon style: In the tabBarIcon, we're changing the size of the icon based on whether the tab is focused. This makes the active tab visually distinct (with a larger icon).

• Tab Bar Styling: The tab bar has a rounded bottom with a shadow for depth, which makes it appear as a floating tab bar.

6. Additional Customizations

If you want more control, you can adjust these properties further:

• Height: Change height: 70 in tabBarStyle to control the height of the tab bar.
• Icon Size: Modify the icon sizes further in the tabBarIcon based on the focused state.
• Tab Bar Color: Change the backgroundColor to suit your app’s design.
• Shadow Effect: Modify the shadow properties (iOS and Android) to make the tab bar look even more floating.

7. Troubleshooting Tips

• If the icons still appear slightly upward, try adjusting the marginBottom of the icons inside the tabBarIcon function to correct their vertical alignment.
• Sometimes, the tab items might be misaligned if the height of the tab bar is too small or the icon size is too large. Adjust both values until you achieve the desired look.
• Use React DevTools or Expo’s in-app dev tools to inspect and tweak the layout of the bottom tab.

Conclusion

With these changes, you should now have a floating, rounded bottom tab bar with centered icons, and the focused tab will have a larger width and icon size. Let me know if you need any more adjustments or run into any specific issues!

[art9mid]

I’d use a custom bottom tab bar component instead of styling the default one.
A custom component gives full control over centering, floating layout, animations, and dynamic widths.

React Navigation docs:
https://reactnavigation.org/docs/bottom-tab-navigator/#tabbar

function MyTabs() {
  return (
    <Tab.Navigator
      tabBar={(props) => <MyTabBar {...props} />}
    >
      <Tab.Screen name="Home" component={HomeScreen} />
      <Tab.Screen name="Profile" component={ProfileScreen} />
    </Tab.Navigator>
  );
}

[zainali0303]

Using a custom bottom tab bar component gives you full control over layout, animations, and responsiveness. With Tailwind border colors, you can easily fine-tune borders, separators, and active states to match your design system while keeping the component flexible and visually consistent.
The complete Tailwind CSS color reference. Instantly copy Hex, RGB, HSL, and OKLCH codes for Tailwind v4 and v3. The modern, responsive color picker for developers.

[omar-hady]

1. to ensure the icon container is vertically centered (use justifyContent + alignItems, and avoid h-full wrappers that change layout),
2. to use a custom tabBarButton (or tabBarButton prop) to control each item’s layout/width (the default wrapper will ignore width changes coming only from the icon), and
3. to respect safe-area insets (bottom on Android/iOS) so absolute positioning doesn't push content.

---

Why this happens

• tabBarStyle.height only affects the outer bar. Each tab item is rendered inside its own default container that controls alignment. Changing styles only on the outer bar doesn't guarantee the child items change position or width.
• Your View inside tabBarIcon has h-full which forces the icon container to use the parent's full height and can change vertical centering behavior.
• To change item width when focused you must control the tab button itself (render a custom one) — the tabBarIcon only renders an icon inside the default button.

---

What to do (copy-paste ready)

1. Create a custom TabButton that receives accessibilityState.selected (or focused) and applies a different width / background when focused.
2. Ensure the icon wrapper has justifyContent: 'center' and alignItems: 'center' and no h-full forcing weird height behavior.
3. Use SafeAreaView or include paddingBottom to account for device inset.
4. Optionally add a small animation for width change (Animated API or reanimated).

Below is a full working example you can paste into your TabLayout file (React Native / Expo). It uses a simple Animated transition for focused width and centers icons properly.

import React, { useRef, useEffect } from "react";
import { Tabs } from "expo-router";
import {
  View,
  TouchableOpacity,
  Animated,
  Platform,
  SafeAreaView,
  StyleSheet,
} from "react-native";

import { HugeiconsIcon } from "@hugeicons/react-native";
import { Home09Icon, Wallet01Icon, Analytics01Icon, Settings01Icon } from "@hugeicons/core-free-icons";

// --- Custom tab button ---
function TabButton({ children, onPress, accessibilityState }) {
  const focused = accessibilityState?.selected ?? false;
  const anim = useRef(new Animated.Value(focused ? 1 : 0)).current;

  useEffect(() => {
    Animated.timing(anim, {
      toValue: focused ? 1 : 0,
      duration: 180,
      useNativeDriver: false,
    }).start();
  }, [focused, anim]);

  // interpolate width (base 54 -> focused 90)
  const width = anim.interpolate({
    inputRange: [0, 1],
    outputRange: [54, 90],
  });

  return (
    <TouchableOpacity activeOpacity={0.85} onPress={onPress} style={styles.tabButtonTouchable}>
      <Animated.View style={[styles.tabButton, { width }]}>
        <View style={styles.iconWrapper}>{children}</View>
      </Animated.View>
    </TouchableOpacity>
  );
}

// --- Tab layout ---
export default function TabLayout() {
  return (
    <SafeAreaView style={{ flex: 1 }}>
      <Tabs
        screenOptions={{
          headerShown: false,
          tabBarShowLabel: false,
          tabBarStyle: styles.tabBar,
          tabBarActiveTintColor: "#0b84ff",
          tabBarInactiveTintColor: "#8a8a8a",
        }}
      >
        <Tabs.Screen
          name="index"
          options={{
            tabBarButton: (props) => <TabButton {...props} />,
            tabBarIcon: ({ color, focused }) => (
              <HugeiconsIcon icon={Home09Icon} color={color} strokeWidth={1.8} fill={focused ? color : "none"} />
            ),
          }}
        />
        <Tabs.Screen
          name="wallet"
          options={{
            tabBarButton: (props) => <TabButton {...props} />,
            tabBarIcon: ({ color }) => <HugeiconsIcon icon={Wallet01Icon} color={color} strokeWidth={1.8} />,
          }}
        />
        <Tabs.Screen
          name="statistics"
          options={{
            tabBarButton: (props) => <TabButton {...props} />,
            tabBarIcon: ({ color }) => <HugeiconsIcon icon={Analytics01Icon} color={color} strokeWidth={1.8} />,
          }}
        />
        <Tabs.Screen
          name="settings"
          options={{
            tabBarButton: (props) => <TabButton {...props} />,
            tabBarIcon: ({ color }) => <HugeiconsIcon icon={Settings01Icon} color={color} strokeWidth={1.8} />,
          }}
        />
      </Tabs>
    </SafeAreaView>
  );
}

// --- Styles ---
const styles = StyleSheet.create({
  tabBar: {
    position: "absolute",
    left: "5%",
    right: "5%",
    bottom: Platform.OS === "android" ? 18 : 25,
    height: 75,
    borderRadius: 40,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
    elevation: 6,
    shadowColor: "#000",
    shadowOpacity: 0.08,
    shadowRadius: 12,
    shadowOffset: { width: 0, height: 8 },
    // remove paddingTop which can push content up
    paddingHorizontal: 8,
  },
  tabButtonTouchable: {
    // touchable wrapper — no extra styling required
  },
  tabButton: {
    height: 54,               // button height
    borderRadius: 30,
    backgroundColor: "transparent", // change on focus if you want
    alignItems: "center",
    justifyContent: "center",
    marginHorizontal: 6,
  },
  iconWrapper: {
    // ensure the icon is centered inside the button
    alignItems: "center",
    justifyContent: "center",
    // do NOT use 'height: "100%"' here; keep fixed sizing consistent
    width: "100%",
  },
});

---

Extra tips & gotchas

• Do not use h-full or tailwind-style full-height on the icon wrapper — that often causes vertical misalignment. Use fixed button height + justifyContent: 'center'.
• Use tabBarButton to fully control item width/shape. tabBarIcon is only for the inner icon.
• Use SafeAreaView or bottom + paddingBottom to avoid Android soft-navigation overlap.
• If you prefer smoother animations, swap Animated with react-native-reanimated (better performance).
• For centered icons visually, ensure the parent (Animated.View used as the button) has the correct height and alignItems/justifyContent set; then icon will be vertically centered.

---

[zainali0303]

Tailwind CSS background colors are applied using utility classes like bg-blue-500, bg-gray-100, or bg-black. They allow you to quickly style elements with consistent, responsive colors taken from Tailwind’s predefined palette or your custom theme. You can also use opacity modifiers, gradients, and CSS variables to create modern, flexible backgrounds without writing custom CSS.
The complete Tailwind CSS color reference. Instantly copy Hex, RGB, HSL, and OKLCH codes for Tailwind v4 and v3. The modern, responsive color picker for developers.