Skip to main content

Navigation

Use Multinaire Design components with Expo Router for consistent navigation styling.

Stack Navigation​

Basic Setup​

// app/_layout.tsx
import { Stack } from 'expo-router';
import { MultinaireDesignProvider } from '@multinaire/multinaire-design';
import theme from '../assets/theme.json';

export default function RootLayout() {
  return (
    <MultinaireDesignProvider theme={theme}>
      {screenOptions => (
        <Stack screenOptions={screenOptions}>
          <Stack.Screen name="index" options={{ title: 'Home' }} />
          <Stack.Screen name="settings" options={{ title: 'Settings' }} />
        </Stack>
      )}
    </MultinaireDesignProvider>
  );
}

The screenOptions automatically configures:

  • Header background and text colors
  • Custom header component (MultinaireStackHeader)
  • Status bar styling

Custom Header​

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

<Stack.Screen
  name="profile"
  options={{
    header: props => <MultinaireStackHeader {...props} />,
    title: 'Profile',
  }}
/>

Tab Navigation​

Bottom Tabs​

// app/(tabs)/_layout.tsx
import { Tabs } from 'expo-router';
import {
  MultinaireIcon,
  MultinaireTabBar,
  useScreenOptions,
} from '@multinaire/multinaire-design';

export default function TabLayout() {
  const screenOptions = useScreenOptions();

  return (
    <Tabs
      screenOptions={screenOptions}
      tabBar={props => <MultinaireTabBar {...props} />}
    >
      <Tabs.Screen
        name="index"
        options={{
          title: 'Home',
          tabBarIcon: ({ color }) => (
            <MultinaireIcon icon="Home" color={color} />
          ),
        }}
      />
      <Tabs.Screen
        name="settings"
        options={{
          title: 'Settings',
          tabBarIcon: ({ color }) => (
            <MultinaireIcon icon="Settings" color={color} />
          ),
        }}
      />
    </Tabs>
  );
}

Top Tabs​

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

function TopTabScreen() {
  const [selectedIndex, setSelectedIndex] = useState(0);

  return (
    <>
      <MultinaireTopTab
        items={['Tab 1', 'Tab 2', 'Tab 3']}
        selectedIndex={selectedIndex}
        onChange={setSelectedIndex}
      />
      {/* Tab content */}
    </>
  );
}

For desktop layouts:

// app/(sidebar)/_layout.tsx
import { Slot } from 'expo-router';
import {
  MultinaireSideBar,
  MultinaireSideBarButton,
  useMultinaireResponsiveDesign,
} from '@multinaire/multinaire-design';

export default function SidebarLayout() {
  const { isDesktop } = useMultinaireResponsiveDesign();

  if (!isDesktop) {
    return <Slot />;
  }

  return (
    <View style={{ flexDirection: 'row', flex: 1 }}>
      <MultinaireSideBar>
        <MultinaireSideBarButton
          icon="Home"
          title="Home"
          href="/"
        />
        <MultinaireSideBarButton
          icon="Settings"
          title="Settings"
          href="/settings"
        />
      </MultinaireSideBar>
      <View style={{ flex: 1 }}>
        <Slot />
      </View>
    </View>
  );
}

useScreenOptions Hook​

Get screen options configured with your theme:

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

function MyNavigator() {
  const screenOptions = useScreenOptions();

  return (
    <Stack screenOptions={screenOptions}>
      {/* screens */}
    </Stack>
  );
}
<Stack.Screen
  name="modal"
  options={{
    presentation: 'modal',
    title: 'Modal Title',
  }}
/>

The MultinaireStackHeader automatically shows a close button for modal screens.