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

Start with the FlatList reproduction in the issue and compare the two cases with and without onRefresh. Trace how FlatList handles zIndex and refresh behavior on the reported Android setup. Done means the blue element remains underneath the list items when onRefresh is supplied, while the existing ordering without onRefresh still works.