Flatlist zIndex not working when using onRefresh prop

Description

Hi, I tried to put an element under Flatlist items. I used zIndex for this purpose. It worked well, until I only added "onRefresh" prop to the flatlist. Therefore the element became above the flatlist items.

React Native version:

System:
    OS: Windows 10 10.0.18363
    CPU: (8) x64 Intel(R) Core(TM) i5-9300H CPU @ 2.40GHz
    Memory: 1.00 GB / 7.81 GB
  Binaries:
    Node: 12.13.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.10 - C:\Program Files\nodejs\yarn.CMD
    npm: 6.12.0 - C:\Program Files\nodejs\npm.CMD
    Watchman: Not Found
  SDKs:
    Android SDK:
      API Levels: 23, 25, 27, 28, 29
      Build Tools: 28.0.3, 29.0.2, 29.0.3, 30.0.3
      System Images: android-28 | Google APIs Intel x86 Atom, android-29 | Google APIs Intel x86 Atom, android-29 | Google Play Intel x86 Atom
      Android NDK: Not Found
    Windows SDK: Not Found
  IDEs:
    Android Studio: Version  3.5.0.0 AI-191.8026.42.35.6010548
    Visual Studio: Not Found
  Languages:
    Java: 1.8.0_231 - C:\Program Files\Java\jdk1.8.0_231\bin\javac.EXE
    Python: 2.7.17 - C:\Python27\python.EXE
  npmPackages:
    @react-native-community/cli: Not Found
    react: 16.13.1 => 16.13.1
    react-native: 0.63.2 => 0.63.2
  npmGlobalPackages:
    *react-native*: Not Found

Steps To Reproduce

1. Case1: Not using onRefresh (The result is Good):
   

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

const MyFlatlist = ({ refreshing = false }) => {

    const data = [
        { id: '1', name: 'Item 1' },
        { id: '2', name: 'Item 2' },
        { id: '3', name: 'Item 3' },
        { id: '5', name: 'Item 4' },
        { id: '6', name: 'Item 4' },
        { id: '7', name: 'Item 5' },
        { id: '8', name: 'Item 5' },
        { id: '9', name: 'Item 6' },
        { id: '10', name: 'Item 7' }
    ]

    const renderItem = (item) => (
        <View style={styles.item}>
            <Text style={styles.itemName}>{item.name}</Text>
        </View>
    )

    const onRefresh = () => console.log('refreshing...')

    return (
        <View style={[styles.container]}>
            <FlatList
                data={data}
                keyExtractor={item => item.id.toString()}
                renderItem={({ item }) => renderItem(item)}
                style={{ zIndex: 1 }}
                refreshing={refreshing}
               // onRefresh={onRefresh}  <-- This line has caused the issue
            />

            <View style={[styles.elementStyle, styles.elementPosition]} />
        </View>
    )
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        width: "100%",
        height: '100%',
        position: 'absolute',
        backgroundColor: '#fff'
    },
    item: {
        width: '90%',
        height: 100,
        backgroundColor: 'green',
        alignSelf: 'center',
        justifyContent: 'center',
        marginVertical: 10
    },
    itemName: {
        textAlign: 'center',
        fontWeight: 'bold',
        fontSize: 18,
        color: '#fff'
    },
    elementStyle: {
        width: 200,
        height: 200,
        backgroundColor: 'blue'
    },
    elementPosition: {
        position: 'absolute',
        left: 0,
        bottom: 0,
        zIndex: 0,
    }
})

export default MyFlatlist

2. Case2: Using onRefresh (onRefresh = {onRefresh})
   

Commencez par la reproduction de FlatList dans l’issue et comparez les deux cas, avec et sans onRefresh. Suivez la manière dont FlatList gère zIndex et le comportement de rafraîchissement dans la configuration Android signalée. C’est terminé lorsque l’élément bleu reste sous les éléments de la liste quand onRefresh est fourni, tandis que l’ordre existant sans onRefresh continue de fonctionner.