On Android, `zIndex` stops being respected once the screen transition animation starts, causing the content to flash

SimpleCreations commented 2 years ago

Description

As the title says. Curiously, the problem only reproduces when using a FlatList and when specifying screenOptions (an empty object is enough). See the code sample.

Screenshots

Notice how the red box disappears right as the back button is pressed.

https://user-images.githubusercontent.com/12449725/181281496-4f00c668-f1f5-4cd7-8ba0-e0dbfee23419.mp4

Steps To Reproduce

See the code sample.

Reproduction

import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import {NavigationContainer} from '@react-navigation/native';
import {createNativeStackNavigator} from '@react-navigation/native-stack';
import {Button, FlatList, View} from 'react-native';
import React from 'react';

const Stack = createNativeStackNavigator();
const Tab = createBottomTabNavigator();

const Parent = ({navigation}) => (
  <Button title="Press me" onPress={() => navigation.navigate('Child')} />
);

const Child = () => (
  <>
    <View
      style={{
        position: 'absolute',
        zIndex: 1,
        width: '100%',
        height: 200,
        backgroundColor: 'tomato',
      }}
    />
    <FlatList // <-- 🛑 important
      style={{backgroundColor: 'pink'}}
      data={[]}
      renderItem={() => null}
    />
  </>
);

const Tabs = () => (
  <Tab.Navigator initialRouteName="Events">
    <Tab.Screen name="Parent" component={Parent} />
  </Tab.Navigator>
);

const App = () => (
  <NavigationContainer>
    <Stack.Navigator screenOptions={{}}>  // <-- 🛑 important
      <Stack.Screen name="Tabs" component={Tabs} />
      <Stack.Screen name="Child" component={Child} />
    </Stack.Navigator>
  </NavigationContainer>
);

export default App;

Platform

[ ] iOS
[x] Android
[ ] Web
[ ] Windows
[ ] tvOS

Architecture

[x] Paper
[ ] Fabric

Workflow

[ ] Managed workflow
[x] Bare workflow

Package versions

  {
    "@react-navigation/bottom-tabs": "^6.3.2",
    "@react-navigation/native": "^6.0.11",
    "@react-navigation/native-stack": "^6.7.0",
    "react": "18.0.0",
    "react-native": "0.69.3",
    "react-native-safe-area-context": "^4.3.1",
    "react-native-screens": "^3.15.0"
  }