fab-native-tabs

⚠️ iOS 26+ only. This package uses native UIKit/SwiftUI APIs exclusive to iOS 26.

Native iOS 26 Liquid Glass tab bar with a tinted floating action button for Expo, built on top of FabBar by Ryan Ashcraft.

Requirements

• iOS 26+
• Expo SDK 54+
• Set iOS deployment target to 26.0 via expo-build-properties:

⚠️ Required Setup

This package will not work without setting the iOS deployment target to 26.0.

1. Install expo-build-properties if you haven't already

npx expo install expo-build-properties

2. Add to your app.json

{
  "plugins": [
    [
      "expo-build-properties",
      {
        "ios": {
          "deploymentTarget": "26.0"
        }
      }
    ]
  ]
}

3. Install and prebuild

npm install fab-native-tabs
npx expo prebuild --platform ios --clean
npx expo run:ios

Skipping expo prebuild --clean after install is the most common cause of the "Unimplemented Component" error.

Usage

import { Tabs } from 'fab-native-tabs';
import { useRouter } from 'expo-router';

export default function Layout() {
  const router = useRouter();

  return (
    <View style={{ flex: 1 }}>
      <Slot />
      <Tabs onTabChange={(name) => router.push(name === 'index' ? '/' : `/${name}` as any)}>
        <Tabs.Trigger name="index">
          <Tabs.Trigger.Icon default="house" selected="house.fill" />
          <Tabs.Trigger.Label>Home</Tabs.Trigger.Label>
        </Tabs.Trigger>

        <Tabs.Trigger name="explore">
          <Tabs.Trigger.Icon default="safari" selected="safari.fill" />
          <Tabs.Trigger.Label>Explore</Tabs.Trigger.Label>
        </Tabs.Trigger>

        <Tabs.ActionButton label="Add Item" onPress={() => console.log('FAB pressed')}>
          <Tabs.ActionButton.Icon default="plus" />
        </Tabs.ActionButton>
      </Tabs>
    </View>
  );
}

Credits

Built on top of FabBar by Ryan Ashcraft (MIT License).

License

MIT