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

Bắt đầu với bản tái hiện FlatList trong issue và so sánh hai trường hợp có và không có onRefresh. Theo dõi cách FlatList xử lý zIndex và hành vi làm mới trong thiết lập Android được báo cáo. Hoàn tất khi phần tử màu xanh vẫn nằm bên dưới các mục trong danh sách khi cung cấp onRefresh, đồng thời thứ tự hiện có khi không có onRefresh vẫn hoạt động.