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
bottomTabBottomTabNavigationOptionsOptions for bottom tab navigator
topTabBottomTabNavigationOptionsOptions for top tab navigator
sideBarBottomTabNavigationOptionsOptions for side navigation

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​

You can spread the options and override specific properties:

<Stack
  screenOptions={{
    ...screenOptions.stack,
    headerShown: false, // Override header visibility
  }}
>