Impossible to change router background in dark theme

[snowdigital]

Which package manager are you using? (Yarn is recommended)

yarn

Summary

I supppose react-navigation was using colors from ThemeProvider for pages background, but expo-router not using this and giving this result

import { DefaultTheme, DarkTheme, ThemeProvider } from '@react-navigation/native';

(...)

<ThemeProvider
        value={{
          ...(themeName === 'light' ? DefaultTheme : DarkTheme),
          colors: {
            ...(themeName === 'light' ? DefaultTheme : DarkTheme).colors,
            ...appColors[themeName],
          },
        }}>

https://github.com/expo/router/assets/60717268/7b26c873-8267-4045-b4de-7de826f92484

Minimal reproducible example

import { DefaultTheme, DarkTheme, ThemeProvider } from '@react-navigation/native';

const App = () => {
return(
      <ThemeProvider
        value={{
          ...(themeName === 'light' ? DefaultTheme : DarkTheme),
          colors: {
            ...(themeName === 'light' ? DefaultTheme : DarkTheme).colors,
            ...appColors[themeName],
          },
        }}>
        <Slot/>
      </ThemeProvider>
        )
}

[marklawlor]

@snowdigital I'm assuming you are using the Tabs example (npx create-expo-app@latest --template tabs@sdk-49)? It has a custom View and Text component that uses the colors from constants/Colors.ts.

Expo Router will work with <ThemeProvider /> :+1:

I'm going to close this issue, as I think there was a slight misunderstand with the demo, but if that's not the case can you provide a repo with your source code and I'll reopen this issue.

[snowdigital]

@marklawlor

@snowdigital I'm assuming you are using the Tabs example (npx create-expo-app@latest --template tabs@sdk-49)? It has a custom View and Text component that uses the colors from constants/Colors.ts.

Expo Router will work with <ThemeProvider /> 👍

I'm going to close this issue, as I think there was a slight misunderstand with the demo, but if that's not the case can you provide a repo with your source code and I'll reopen this issue.

Here you go :) https://github.com/snowdigital/expo-router-background-bug-example

I think its related to Root background color. react-navigation was using theme provider to set background of root View, but i assume that expo router just wraps screens in selected theme. Issue only reproducable when in code you use Static dark theme instead of useColorScheme native styling.

https://github.com/expo/router/assets/60717268/4ed097ef-7915-4105-bc1f-2b9a6fd78541

[marklawlor]

@snowdigital I'm confused about your issue, could you be more specific? If I make the following change the repo provided, the background changes to green as expected.

- <ThemeProvider value={DarkTheme}>
+ <ThemeProvider
+   value={{
+     ...DarkTheme,
+     colors: {
+       ...DarkTheme.colors,
+       background: "green",
+     },
+    }}
+ >

If you are referring to the flash of white while changing screens (e.g opening the modal), it's because React Navigation only styles its own components - you still have the standard system background color. You can control by wrapping your application in a View

+ <View style={[StyleSheet.absoluteFill, { backgroundColor: 'red' }]}>
  <ThemeProvider value={DarkTheme}>
    { ... }
 </ThemeProvider>
+ </View >