[Android] headers show strange artifacts after unfocus -> focus since v3.32

[arjovanramshorst]

Description

After updating to react-native 0.73 I also updated many packages that weren't locked to exact versions, including react-native-screens, which introduced a bug (android only) in how headers are rendered. It only occurs when focusing a screen for the second time (the initial render looks good, but navigating away and back leads to a 'ghost' header underneath the original header. It's mostly visible because the 'ghost' header appears to have shadows, even though my app does not have shadows below headers. Every screen that renders a native stack header is affected.

Initial render (how it's supposed to look):

After switching to a different screen (tab or stack does not matter) and going back:

Steps to reproduce

1. Run the following code on an android emulator/device with dependencies (or checkout the reproduction in https://github.com/arjovanramshorst/react-native-screens-bug-repro)

// package.json
{
    "react-native-screens": "3.32.0",
    "@react-navigation/native": "^6.1.6",
    "@react-navigation/native-stack": "^6.9.12",
}

import React from 'react';
import {NavigationContainer} from '@react-navigation/native';
import {createNativeStackNavigator} from '@react-navigation/native-stack';
import {Button, Text, View} from 'react-native';

const Stack = createNativeStackNavigator();

export const StorybookNavigation: React.FC<{}> = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen
          name="Screen1"
          options={{title: 'Screen 1', headerTransparent: true}}
          component={Screen1}
        />
        <Stack.Screen
          name="Screen2"
          options={{title: 'Screen 2', headerTransparent: true}}
          component={Screen2}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

const Screen1 = ({navigation}: any) => {
  return (
    <View
      style={{
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: 'white',
      }}>
      <Text>Screen 1 </Text>
      <Button
        title={'Go to screen 2'}
        onPress={() => {
          navigation.push('Screen2');
        }}
      />
    </View>
  );
};

const Screen2 = () => {
  return (
    <View
      style={{
        flex: 1,
        backgroundColor: 'white',
        alignItems: 'center',
        justifyContent: 'center',
      }}>
      <Text>Screen 2 </Text>
    </View>
  );
};

2. Navigate to screen 2 and back to screen 1, and notice the difference between before and after navigating. It is very apparent with headerTransparent: true, however, it is also visible with other changes to options.

Snack or a link to a repository

https://github.com/arjovanramshorst/react-native-screens-bug-repro

Screens version

3.32.0

React Native version

0.73.8

Platforms

Android

JavaScript runtime

None

Workflow

React Native (without Expo)

Architecture

None

Build type

Release mode

Device

None

Device model

Every device (emulator/real/debug/release build)

Acknowledgements

Yes

[alduzy]

@arjovanramshorst Thanks for reporting 👍