ThemeTransitionProvider

Wraps your app tree and provides the theme context. Place as high as possible in the component tree — above navigation, above modals. The screenshot captures everything inside the provider's root View.

<ThemeTransitionProvider initialTheme="system">
  <App />
</ThemeTransitionProvider>

Props

Initial theme behavior

• Read once in a lazy useState initializer — subsequent prop changes are ignored
• 'system' reads OS appearance synchronously (zero flash) and subscribes to changes
• With custom names: requires systemThemeMap in config, otherwise throws
• An explicit theme name (e.g. 'dark') does not subscribe to OS changes

Placement

Content outside the provider won't be included in the transition screenshot.

// Correct — navigation inside provider
<ThemeTransitionProvider initialTheme="system">
  <NavigationContainer>
    ...
  </NavigationContainer>
</ThemeTransitionProvider>

// Wrong — provider inside navigation, only captures current screen
<NavigationContainer>
  <ThemeTransitionProvider initialTheme="system">
    ...
  </ThemeTransitionProvider>
</NavigationContainer>