MultinaireTabView

Tab container with top or bottom tab bar for switching between content panels.

Basic Usage

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

<MultinaireTabView
  position="top"
  itemsMap={{
    posts: <PostsTab />,
    likes: <LikesTab />,
    saved: <SavedTab />,
  }}
  selectedItem="posts"
  onChange={(item) => setSelectedItem(item)}
/>

Props

Prop	Type	Default	Description
position	'top' | 'bottom'	—	Position of the tab bar relative to the content
itemsMap	Record<T, ReactElement>	—	Map of tab key to the React element rendered for that tab
selectedItem	T	—	Currently selected tab key
scrollEnabled	boolean	true	Enable scrolling when there are more tabs than fit the screen
topTabBehavior	'scroll' | 'fill'	'scroll'	Controls whether top tab headers scroll or fill
onChange	(item: T) => void	—	Callback invoked when the user switches tabs
style	ContainerStyleProps	—	Additional styles applied to the page content wrapper
tabStyle	ContainerStyleProps	—	Additional styles applied to the tab bar container
buttonStyle	TabButtonStyle	—	Active/inactive colors for all tab buttons

Examples

Top Tabs

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

<MultinaireTabView
  position="top"
  itemsMap={{
    all: <AllItems />,
    active: <ActiveItems />,
    completed: <CompletedItems />,
  }}
  selectedItem={tab}
  onChange={setTab}
/>

Bottom Tabs

<MultinaireTabView
  position="bottom"
  itemsMap={{
    home: <HomeScreen />,
    search: <SearchScreen />,
    profile: <ProfileScreen />,
  }}
  selectedItem={activeTab}
  onChange={setActiveTab}
/>

Fill Behavior

<MultinaireTabView
  position="top"
  topTabBehavior="fill"
  itemsMap={{
    tab1: <Tab1 />,
    tab2: <Tab2 />,
  }}
  selectedItem={selectedTab}
  onChange={setSelectedTab}
/>

Profile Tabs

<MultinaireContainer flex={1}>
  <ProfileHeader user={user} />

  <MultinaireTabView
    position="top"
    topTabBehavior="fill"
    itemsMap={{
      posts: <UserPosts userId={user.id} />,
      media: <UserMedia userId={user.id} />,
      likes: <UserLikes userId={user.id} />,
    }}
    selectedItem={profileTab}
    onChange={setProfileTab}
  />
</MultinaireContainer>

Disable Swipe

<MultinaireTabView
  scrollEnabled={false}
  position="top"
  itemsMap={tabs}
  selectedItem={currentTab}
  onChange={setCurrentTab}
/>