Skip to main content

useScreenOptions

A hook that provides pre-configured navigation options for React Navigation, styled with your theme.

Import​

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

Usage​

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

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

  return (
    <Stack screenOptions={screenOptions.stack}>
      <Stack.Screen name="index" options={{ title: 'Home' }} />
    </Stack>
  );
}

Return Value​

The hook returns an object with pre-configured options for different navigation types:

PropertyTypeDescription
stackNativeStackNavigationOptionsOptions for Stack navigator
stackWithOverrides(overrides: NativeStackNavigationOptions) => NativeStackNavigationOptionsStack options merged with your overrides
bottomTabBottomTabNavigationOptionsOptions for bottom tab navigator
bottomTabWithOverrides(overrides: BottomTabNavigationOptions) => BottomTabNavigationOptionsBottom tab options merged with your overrides
topTabBottomTabNavigationOptionsOptions for top tab navigator
topTabWithOverrides(overrides: BottomTabNavigationOptions) => BottomTabNavigationOptionsTop tab options merged with your overrides
sideBarBottomTabNavigationOptionsOptions for side navigation
sideBarWithOverrides(overrides: BottomTabNavigationOptions) => BottomTabNavigationOptionsSidebar options merged with your overrides

What's Configured​

Stack Options​

  • Status bar style: Automatically adjusts based on theme mode (light/dark)
  • Header: Uses MultinaireStackHeader component
  • Content style: Background color from theme

Tab Options​

  • Header: Uses MultinaireTabHeader component
  • Scene style: Background color from theme
  • Tab bar position: Configured for bottom, top, or side
  • Animations: Shift animation for top tabs

Examples​

Stack Navigator​

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

function StackLayout() {
  const { stack } = useScreenOptions();

  return (
    <Stack screenOptions={stack}>
      <Stack.Screen name="home" />
      <Stack.Screen name="details" />
    </Stack>
  );
}

Bottom Tab Navigator​

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

function TabLayout() {
  const { bottomTab } = useScreenOptions();

  return (
    <Tabs screenOptions={bottomTab}>
      <Tabs.Screen
        name="home"
        options={{
          title: 'Home',
          tabBarIcon: ({ color }) => <Icon name="home" color={color} />,
        }}
      />
      <Tabs.Screen
        name="profile"
        options={{
          title: 'Profile',
          tabBarIcon: ({ color }) => <Icon name="person" color={color} />,
        }}
      />
    </Tabs>
  );
}

Top Tab Navigator​

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

function TopTabLayout() {
  const { topTab } = useScreenOptions();

  return (
    <Tabs screenOptions={topTab}>
      <Tabs.Screen name="tab1" options={{ title: 'Tab 1' }} />
      <Tabs.Screen name="tab2" options={{ title: 'Tab 2' }} />
    </Tabs>
  );
}

Side Navigation​

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

function SideBarLayout() {
  const { sideBar } = useScreenOptions();

  return (
    <Tabs screenOptions={sideBar}>
      <Tabs.Screen name="dashboard" options={{ title: 'Dashboard' }} />
      <Tabs.Screen name="settings" options={{ title: 'Settings' }} />
    </Tabs>
  );
}

Overriding Options​

Use the *WithOverrides methods to merge your custom options with the design system defaults. The overrides are spread on top, so your values take precedence.

Stack overrides​

const { stackWithOverrides } = useScreenOptions();

<Stack
  screenOptions={stackWithOverrides({
    headerShown: false,
    animation: 'fade',
  })}
>

Tab overrides​

const { bottomTabWithOverrides, topTabWithOverrides } = useScreenOptions();

// Bottom tabs with custom scene padding
<Tabs screenOptions={bottomTabWithOverrides({ sceneStyle: { padding: 16 } })}>

// Top tabs with lazy loading disabled
<Tabs screenOptions={topTabWithOverrides({ lazy: false })}>
const { sideBarWithOverrides } = useScreenOptions();

<Tabs screenOptions={sideBarWithOverrides({ headerShown: false })}>