useMapNativeTheme

Maps the theme to a React Navigation Theme object. Use this when you need to keep React Navigation's internal styling (header background, card color, text, borders) in sync with the active color scheme and font family.

Usage

import { useMapNativeTheme } from '@multinaire/ui';
import { NavigationContainer } from '@react-navigation/native';

export default function App() {
  const theme = useMapNativeTheme();

  return (
    <NavigationContainer theme={theme}>
      {/* screens */}
    </NavigationContainer>
  );
}

Return Value

Returns a React Navigation Theme object that re-computes whenever the color scheme or fonts change.

Field	source
dark	true when theme mode is 'dark'
colors.primary	colors.primary
colors.background	colors.background
colors.card	colors.backgroundVariant
colors.text	colors.onBackground
colors.border	colors.neutral
colors.notification	colors.error
fonts.regular.fontFamily	fonts.body.regular.fontFamily
fonts.medium.fontFamily	fonts.body.medium.fontFamily
fonts.bold.fontFamily	fonts.body.bold.fontFamily
fonts.heavy.fontFamily	fonts.body.bold.fontFamily

Notes

• Must be called inside a MultinaireUI.
• The returned object is memoised — a new reference is only produced when colors, fonts, or themeMode change.