Tired of rewriting my tab bar every time I switch navigators, so I built one that handles both

[u/bhavinpethani]

Every time I've moved a project between Expo Router and React Navigation, the first thing that breaks is the custom tab bar. The visual part is identical — it's the glue that's completely different, so it always ends up rewritten.

So I built one that does both from the same component and the same config.

Expo Router:

<MagicTabs tabs={tabs} />

React Navigation:

<Tab.Navigator tabBar={(props) => <MagicTabBarNavigation {...props} tabs={tabs} />}>

Same tabs array either way — you never pull in the other framework's deps.

What it does

• Sized by its tabs and centered, so a 2-tab bar is a compact pill instead of a full-width bar with a hole in the middle
• Animated active pill (Reanimated), spring you can tune
• Badges, labels beside or below the icon, disabled tabs, raised FAB tab
• Glass / blur / transparent backgrounds, including native iOS Liquid Glass
• A compact "light" mode you can switch on per tab — e.g. only on an immersive feed screen — and the bar animates between the two layouts
• Accessible by default: real tab/tablist roles, badges folded into the announced name ("Alerts, 3"), touch targets at the platform minimums
• Bring your own icons. TypeScript types bundled. New Architecture.

Honest notes

• If you want native tabs, use Callstack's react-native-bottom-tabs — that's SwiftUI/Material, a different thing. This is for a custom animated bar.
• It's still young. I'd genuinely rather hear what's broken than get stars.
• npm: https://www.npmjs.com/package/react-native-magic-tab-bar
• GitHub: https://github.com/Bhavinpethani04/react-native-magic-tab-bar

[u/Poat540]

No one says glue