Configuration

Setting Up the Provider

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

import MultinaireUI from '@multinaire/ui';

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

With Expo Router

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

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

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

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/ui';

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

  return (
    <Stack screenOptions={screenOptions()}>
      <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/ui';

export default function TabLayout() {
  const { screenOptions } = useScreenOptions('bottom-tab');

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

Pass the navigator type to useScreenOptions and call the returned screenOptions function:

Type argument	Navigator
'stack'	Stack navigator with themed header
'bottom-tab'	Bottom tab navigator
'top-tab'	Top tab navigator
'side-bar'	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 useTheme hook to access theme values in any component:

import { useTheme } from '@multinaire/ui';

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

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

Accessing Localization

Use the useLocalization hook for translations:

import { useLocalization } from '@multinaire/ui';

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

  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.