skiddie

Navigator adapters

Use any tab bar with Expo Router or React Navigation.

Pre-release

skiddie is being built. Commands and APIs on this page are the planned design and may change before v0.1.

Components take their state through props (items, activeKey, onChange). One adapter turns any of them into a React Navigation tabBar, which Expo Router's <Tabs> uses too.

app/(tabs)/_layout.tsx
import { Tabs } from 'expo-router';
import { FloatingTabBar } from '@/components/skiddie/floating-tab-bar';
import { createTabBarAdapter } from '@/components/skiddie/core/adapters/react-navigation';

const TabBar = createTabBarAdapter(FloatingTabBar, { haptics: 'selection' });

export default function TabLayout() {
  return (
    <Tabs tabBar={(props) => <TabBar {...props} />} screenOptions={{ headerShown: false }}>
      <Tabs.Screen name="index" options={{ title: 'Home' }} />
      <Tabs.Screen name="search" options={{ title: 'Search', tabBarBadge: 3 }} />
    </Tabs>
  );
}

The adapter maps each route's title/tabBarLabel, tabBarIcon, tabBarBadge, accessibility label and test ID, emits tabPress / tabLongPress, and respects preventDefault().

Standalone

const [tab, setTab] = useState('home');

<FloatingTabBar items={items} activeKey={tab} onChange={setTab} />;