How do I hook React Navigation/Expo Router into the theme to change themes adaptively?

[jrhager84]

I'm not quite sure how to conditionally load my React Navigation theme based on the theme provided by Unistyles. How are people implementing that?

[jpudysz]

Use useUnistyles hook. It won't rerender your app as react navigation is optimized for that.

[brandonfancher]

I'm doing this, but everywhere else I switch my adaptive theme (within the StyleSheet), the transition of colors from dark mode to light mode is smooth. But in my navigation bars where I'm consuming theme colors for tint and background color via useUnistyles, it's delayed and jarring. No transition. Any ideas?

<Stack screenOptions={{
    headerTintColor: theme.colors.text,
    contentStyle: { backgroundColor: theme.colors.background },
}}>

[brandonfancher]

Ah, just as in this issue: #983