MultinaireTabBar

Custom tab bar supporting both top and bottom tab positions.

Basic Usage

import { MultinaireTabBar } from '@multinaire/multinaire-design';

<Tabs tabBar={(props) => <MultinaireTabBar {...props} />}>
  <Tabs.Screen name="home" />
  <Tabs.Screen name="profile" />
</Tabs>

Props

Prop	Type	Default	Description
tabBehavior	'scroll' | 'fill'	'scroll'	Top tab layout behavior

Screen options for tabs:

Option	Type	Description
title	string	Tab label
tabBarIcon	({ focused }) => ReactNode	Tab icon
tabBarPosition	'top' | 'bottom'	Tab bar position

Examples

Bottom Tab Bar

import { Tabs } from 'expo-router';
import { MultinaireTabBar, MultinaireIcon } from '@multinaire/multinaire-design';

export default function TabLayout() {
  return (
    <Tabs tabBar={(props) => <MultinaireTabBar {...props} />}>
      <Tabs.Screen
        name="home"
        options={{
          title: 'Home',
          tabBarIcon: ({ focused }) => (
            <MultinaireIcon
              icon="Home"
              color={focused ? 'primary' : 'neutral'}
            />
          ),
        }}
      />
      <Tabs.Screen
        name="search"
        options={{
          title: 'Search',
          tabBarIcon: ({ focused }) => (
            <MultinaireIcon
              icon="Search"
              color={focused ? 'primary' : 'neutral'}
            />
          ),
        }}
      />
      <Tabs.Screen
        name="profile"
        options={{
          title: 'Profile',
          tabBarIcon: ({ focused }) => (
            <MultinaireIcon
              icon="User"
              color={focused ? 'primary' : 'neutral'}
            />
          ),
        }}
      />
    </Tabs>
  );
}

Top Tab Bar

<Tabs tabBar={(props) => <MultinaireTabBar {...props} tabBehavior="fill" />}>
  <Tabs.Screen
    name="posts"
    options={{
      title: 'Posts',
      tabBarPosition: 'top',
    }}
  />
  <Tabs.Screen
    name="followers"
    options={{
      title: 'Followers',
      tabBarPosition: 'top',
    }}
  />
  <Tabs.Screen
    name="following"
    options={{
      title: 'Following',
      tabBarPosition: 'top',
    }}
  />
</Tabs>

Mixed Layout (Header with Top Tabs)

export default function ProfileLayout() {
  return (
    <MultinaireContainer flex={1}>
      <ProfileHeader />

      <Tabs
        tabBar={(props) => <MultinaireTabBar {...props} tabBehavior="fill" />}
      >
        <Tabs.Screen
          name="posts"
          options={{ title: 'Posts', tabBarPosition: 'top' }}
        />
        <Tabs.Screen
          name="media"
          options={{ title: 'Media', tabBarPosition: 'top' }}
        />
        <Tabs.Screen
          name="likes"
          options={{ title: 'Likes', tabBarPosition: 'top' }}
        />
      </Tabs>
    </MultinaireContainer>
  );
}