0

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:

enter image description here

HLT
  • 327
  • 2
  • 3
  • 14
  • maybe related https://stackoverflow.com/questions/59900898/white-background-flashing-when-switching-screens-react-navigation-v5 – Abe Mar 11 '23 at 02:03

0 Answers0