Configuration

Setting Up the Provider

Wrap your application with MultinaireDesignProvider to enable theming, fonts, and localization:

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

export default function App() {
  return (
    <MultinaireDesignProvider>
      {/* Your app content */}
    </MultinaireDesignProvider>
  );
}

With Expo Router

When using Expo Router, wrap the provider in your root layout:

// app/_layout.tsx
import { Stack } from 'expo-router';
import {
  MultinaireDesignProvider,
  useScreenOptions,
} from '@multinaire/multinaire-design';

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

Using useScreenOptions hook

Alternatively, you can use the useScreenOptions hook to apply theme-aware navigation styling with Stack Navigation or Tab Navigation

Stack Navigation

For stacks:

// app/_layout.tsx
import { Stack } from 'expo-router';
import { useScreenOptions } from '@multinaire/multinaire-design';

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

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

Tab Navigation

For bottom tabs or top tabs:

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

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

  return (
    <Tabs screenOptions={screenOptions.bottomTab}>
      <Tabs.Screen name="home" options={{ title: 'Home' }} />
      <Tabs.Screen name="settings" options={{ title: 'Settings' }} />
    </Tabs>
  );
}

The useScreenOptions hook returns options for different navigation types:

Property	Description
stack	Options for Stack navigator with themed header
bottomTab	Options for bottom tab navigator
topTab	Options for top tab navigator
sideBar	Options for side navigation (left position)

Provider Props

Prop	Type	Description
theme	ThemeResource	Custom theme configuration. Falls back to default theme if not provided.
translations	Resource	i18next translation resources for localization.
children	ReactNode	App content.

Accessing Theme Values

Use the useMultinaireTheme hook to access theme values in any component:

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

function MyComponent() {
  const { colors, fonts, variables, themeMode, changeThemeMode } =
    useMultinaireTheme();

  return (
    <View style={{ backgroundColor: colors.background }}>
      <Text style={fonts.body.regular}>Hello World</Text>
    </View>
  );
}

Accessing Localization

Use the useMultinaireLocalization hook for translations:

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

function MyComponent() {
  const { language, changeLanguage, translate } = useMultinaireLocalization();

  return (
    <View>
      <Text>{translate('welcome')}</Text>
      <Button title="Switch to Spanish" onPress={() => changeLanguage('es')} />
    </View>
  );
}

Default Theme

If you don't provide a custom theme, the library uses a default theme with:

• Primary Color: Orange (#ED7030)
• Secondary Color: Blue (#1842BD)
• Fonts: DancingScript (display), OpenSans (body)
• Standard spacing and sizing variables

See Theme Setup for customization options.