I am using Expo with react-navigation/native-stack
and I am having an issue with the background when changing orientation. During the transition period from portrait to landscape the background color is while instead of what is set as the background color (dark). This makes the changing of orientation a bit jarring.
Here is what I have tried so far:
const MyTheme = {
...DefaultTheme,
colors: {
...DefaultTheme.colors,
primary: '#1C1917',
background:'#1C1917'
},
};
return (
<AuthContext.Provider value={authContext}>
<NavigationContainer theme={MyTheme}>
<Stack.Navigator
initialRouteName="Home"
screenOptions={{
cardStyle: {
backgroundColor: '#1C1917'
},
contentStyle: {backgroundColor: '#1C1917'},
headerStyle: {
backgroundColor: '#1C1917',
},
headerTintColor: '#fff',
headerTitleStyle: {
fontWeight: 'bold',
},
}}>
<Stack.Screen name="FullImage" component={FullImage} options={{title: "Gallery",
headerShown: false, orientation: "All", contentStyle: {backgroundColor: '#1C1917'}}}/>
</>
)}
</Stack.Navigator>
</NavigationContainer>
</AuthContext.Provider>
But it does not work.
Here is an image showing the issue. This screenshot was taken mid transition changing orientation: