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})
   

Comienza con la reproducción de FlatList en el issue y compara los dos casos con y sin onRefresh. Rastrea cómo FlatList gestiona zIndex y el comportamiento de actualización en la configuración de Android indicada. Se considera terminado cuando el elemento azul permanece debajo de los elementos de la lista al proporcionar onRefresh, mientras que el orden existente sin onRefresh sigue funcionando.