headerStyle and headerLargeStyle backgroundColor are not applied after theme switching

Description

Header styles are not applied after switching the theme within the application

Screenshots

Steps To Reproduce

1. Add custom styles with two themes for react-native-screens header
2. Toggle theme

    headerLargeTitleStyle: {
      color: EStyleSheet.value('$label01'),
    },
    headerLargeStyle: {
      backgroundColor: EStyleSheet.value('$ui02'),
    },
    headerTitleStyle: Platform.select({
      ios: {
        color: EStyleSheet.value('$label01'),
      },
      android: {
        fontWeight: '700',
        color: EStyleSheet.value('$label01'),
      },
    }),
    headerStyle: {
      backgroundColor: EStyleSheet.value('$ui02'),
    },

Expected behavior

headerStyle: { backgroundColor } and headerLargeStyle: { backgroundColor } equals `EStyleSheet.value(‘$ui02’) after theme switching

Actual behavior

headerStyle and headerLargeStyle backgroundColor have system colors (not defined in Stack)

Stack

        options={{
          headerLargeTitle: true,
          headerLargeTitleStyle: {
            color: EStyleSheet.value('$label01'),
          },
          headerLargeStyle: {
            backgroundColor: EStyleSheet.value('$ui02'),
          },
          headerTitleStyle: Platform.select({
            ios: {
              color: EStyleSheet.value('$label01'),
            },
            android: {
              fontWeight: '700',
              color: EStyleSheet.value('$label01'),
            },
          }),
          headerStyle: {
            backgroundColor: EStyleSheet.value('$ui02'),
          },
        }}
        component={HomeScreen}
      />

Package versions

• React: 16.13.1
• React Native: 0.63.4
• React Native Screens: 2.18.1

[kacperkapusciak]

I double confirm that the issue was fixed in v3.1.0 by #847.

Reproduction by evarouss:

react-native-screens 3.0.0

https://user-images.githubusercontent.com/39658211/115518901-fa171200-a288-11eb-9949-b5936f9c3895.mov

react-native-screens 3.1.1

https://user-images.githubusercontent.com/39658211/115518945-069b6a80-a289-11eb-9a5e-39f0ec9862b0.mov

Reproduction by hugo-chq:

react-native-screens 3.0.0

https://user-images.githubusercontent.com/39658211/115516220-309f5d80-a286-11eb-8940-90115ce22386.mov

react-native-screens 3.1.1

https://user-images.githubusercontent.com/39658211/115516279-3dbc4c80-a286-11eb-974b-059e42b46c08.mov

[evarouss]

Here’s a scenario to reproduce the issue: In a nutshell, it’s a scenario where you have a native stack navigator inside of a tab navigator and custom screen options. The issue happens intermittently.

import React from "react";
import { View, Text } from "react-native";

import { createNativeStackNavigator } from "react-native-screens/native-stack";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import { DefaultTheme, NavigationContainer } from "@react-navigation/native";

const FeedScreen = () => (
  <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
    <Text>Feed screen</Text>
  </View>
);

const ProfileScreen = () => (
  <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
    <Text>Profile screen</Text>
  </View>
);

const SettingsScreen = () => (
  <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
    <Text>Settings screen</Text>
  </View>
);

const FeedStack = createNativeStackNavigator();

function FeedStackScreen() {
  return (
    <FeedStack.Navigator>
      <FeedStack.Screen
        name="Feed"
        component={FeedScreen}
        options={{
          title: "Feed",
          headerLeft: () => (
            <View>
              <Text>Action Button</Text>
            </View>
          ),
        }}
      />
      {/* other screens */}
    </FeedStack.Navigator>
  );
}

const ProfileStack = createNativeStackNavigator();

function ProfileStackScreen() {
  return (
    <ProfileStack.Navigator>
      <ProfileStack.Screen name="Profile" component={ProfileScreen} />
    </ProfileStack.Navigator>
  );
}

const Tab = createBottomTabNavigator();

function HomeTabs() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Feed" component={FeedStackScreen} />
      <Tab.Screen name="Profile" component={ProfileStackScreen} />
    </Tab.Navigator>
  );
}

const RootStack = createNativeStackNavigator();

export default function App() {
  return (
    <NavigationContainer theme={DefaultTheme}>
      <RootStack.Navigator screenOptions={{ headerShown: false }}>
        <RootStack.Screen name="Home" component={HomeTabs} />
        <RootStack.Screen name="Settings" component={SettingsScreen} />
      </RootStack.Navigator>
    </NavigationContainer>
  );
}

Issue:

Notice how the header is getting a dark background / losing the Theme Styles

Versions:

{
    "@react-navigation/bottom-tabs": "^5.11.8",
    "@react-navigation/native": "^5.9.3",
    "@react-navigation/stack": "^5.14.3",
    "react-native": "0.63.4",
    "react-native-screens": "^3.0.0",
}