Closed snowdigital closed 1 year ago
@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.
@marklawlor
@snowdigital I'm assuming you are using the Tabs example (
npx create-expo-app@latest --template tabs@sdk-49
)? It has a customView
andText
component that uses the colors fromconstants/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
@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 >
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
https://github.com/expo/router/assets/60717268/7b26c873-8267-4045-b4de-7de826f92484
Minimal reproducible example