Header backgroud color is gray/white intead of specified in screenOptions

Description

I am using a native stack and setting a background color for the header using the screenOptions prop. However, once I add a header right, left element or even I replace the headerTitle with a component, the background color sometimes change color to gray/white.

It is happening on my project and header bg is turning gray, but on a repro it is turning white.

I noticed this happened once I add a header left/right component or replace headerTitle with component

Screenshots

personal project:

https://user-images.githubusercontent.com/80689446/173335747-f42aa318-f168-4f6a-98af-cf1b42838706.mp4

repro:

https://user-images.githubusercontent.com/80689446/173335756-74addd80-6e80-478f-a110-beb9e1663c05.mp4

Steps To Reproduce

1. initialize a new expo project using expo init projectName
2. create a simple native stack navigator. Set a background color for the header and add a some kind of component to the header preferrably a <View /> component in header right.
3. refresh the app multiple times to reproduce

Expected behavior

The header bg to be as specified in the prop

Actual behavior

Sometimes header bg turns white/gray

Reproduction

https://github.com/ramiel1999/navigation-header-bg

import { StyleSheet, Text, View } from "react-native";
import { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator, NativeStackScreenProps } from "@react-navigation/native-stack";
import { useEffect } from "react";

type StackType = { Home: undefined };
type HomeScreenProps = NativeStackScreenProps<StackType, "Home">;
const { Navigator, Screen } = createNativeStackNavigator<StackType>();

const Home = ({ navigation }: HomeScreenProps) => {
  useEffect(() => {
    navigation.setOptions({ headerRight: () => <View style={{ height: 25, aspectRatio: 1, backgroundColor: "green" }} /> });
  }, []);

  return (
    <View style={styles.screen}>
      <Text>🏚️</Text>
    </View>
  );
};

export default function App() {
  return (
    <NavigationContainer>
      <Navigator
        screenOptions={{
          headerStyle: {
            backgroundColor: "hsla(356, 83%, 41%, 1)",
          },
          headerTitleAlign: "center",
          headerTintColor: "#FFF",
          headerTitleStyle: {
            fontSize: 18,
          },
        }}
      >
        <Screen name="Home" component={Home} />
      </Navigator>
    </NavigationContainer>
  );
}

const styles = StyleSheet.create({
  screen: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
});

Platform

• iOS
• Android
• Web
• Windows
• tvOS

Workflow

• Managed workflow
• Bare workflow

Package versions

package	version
react-native	0.68.2
@react-navigation/native	6.0.10
@react-navigation/native-stack	6.6.2
react-native-screens	3.11.1
react-native-safe-area-context	4.2.4
expo	45.0.5

[Winglonelion]

Yes, seem like this issue still happens in 3.15.0 and ios 14 (can not reproduce in ios 15).

Not only background color. All the config of header like,

background color, title color, largeHeader will not be affected. And header display same as the default style.

[itsramiel]

@ramiel1999 v3.10.2 works fine.

Thanks for some direction. I checked the change logs of version 3.11.0 and the following: update header in vc below modal (https://github.com/software-mansion/react-native-screens/pull/1228) by @WoLewicki seems to be the one causing it.

I added a patch to undo those changes

diff --git a/node_modules/react-native-screens/ios/RNSScreenStackHeaderConfig.m b/node_modules/react-native-screens/ios/RNSScreenStackHeaderConfig.m
index 5196920..b32c867 100644
--- a/node_modules/react-native-screens/ios/RNSScreenStackHeaderConfig.m
+++ b/node_modules/react-native-screens/ios/RNSScreenStackHeaderConfig.m
@@ -152,12 +152,10 @@
     nextVC = nav.topViewController;
   }
 
-  // we want updates sent to the VC below modal too since it is also visible
-  BOOL isPresentingVC = vc.presentedViewController == nextVC;
 
   BOOL isInFullScreenModal = nav == nil && _screenView.stackPresentation == RNSScreenStackPresentationFullScreenModal;
   // if nav is nil, it means we can be in a fullScreen modal, so there is no nextVC, but we still want to update
-  if (vc != nil && (nextVC == vc || isInFullScreenModal || isPresentingVC)) {
+  if (vc != nil && (nextVC == vc || isInFullScreenModal)) {
     [RNSScreenStackHeaderConfig updateViewController:self.screenView.controller withConfig:self animated:YES];
   }
 }

built a new dev client after that, refreshed 10 times and seems to be good.

I will keep it open until addressed by library authors