[native-stack] Header randomly goes white, loses styles

Description

I’m using native-stack. The header on one screen randomly goes white, even though it should be gray. The title font family also loses style.

Screenshots

Watch when I open the Account screen. Notice how the header keeps going white (incorrectly). After multiple quits, it finally works and becomes the correct color. 🤷🏼‍♂️

https://www.loom.com/share/ed22f7fd56cd4a449dec47c9a59f068d

Steps To Reproduce

Honestly, no idea. It’s totally random when this happens. My best guess is the fact that this header has a headerRight set, since it’s the only screen where this happens, and also the only screen with headerRight.

This is what my screen looks like:

<Screen
  name="User"
  component={UserProfileScreen}
  options={{
    title: 'Account',
    headerRight: function HeaderRight() {
      return <SignoutLink />
    }
  }}
/>

And for reference, this is my navigator:

<Navigator
      screenOptions={{
        contentStyle: {
          backgroundColor: colors.background,
        },
        headerStyle: {
          backgroundColor: colors.muted,
        },
        headerTitleStyle: {
          color: colors.text,
          fontFamily: font.bold, 
        },
        headerTintColor: colors.primary, 
      }}
      initialRouteName={initialRouteName}
    >

Expected behavior

The header should always be styled correctly.

Actual behavior

The header randomly flickers white on certain occasions, but not on others. See the video above.

Snack or minimal code example

Sorry, I haven’t been able to reproduce this yet. It’s very inconsistent.

Package versions

• React: 16.13.1
• React Native: 0.63.4
• React Native Screens: ~3.0.0

[nandorojo]

I’m using 3.4.0 and it works well now! Thanks for the help.

[kacperkapusciak]

Hi @nandorojo 👋 I’m pretty sure this issue was fixed in v3.1.0. You can check the original issue for this here. Could you check if your issue persists in react-native-screens >=3.1.0?