Flatlist zIndex not working when using onRefresh prop

[meliodev]

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

[ralph-dev]

Can you try setting your item z-index's to 1 as well? Might be a quick fix to get you moving :)

[rectified95]

This might a duplicate or a close related issue to: #28751

[chrisglein]

Copied this into a Snack here.
Note this does not repro on Web or iOS, does on Android. Does that match your experience?

[meliodev]

Can you try setting your item z-index's to 1 as well? Might be a quick fix to get you moving :)

I have tried it but it doesn't solve the issue

[meliodev]

Copied this into a Snack here.
Note this does not repro on Web or iOS, does on Android. Does that match your experience?

Yes I tested on Android only.

[AlenToma]

Incase you still have the problem, here is the workaround if you want it.

      <View style={{ zIndex: 1 }}>
        <FlatList
          data={data}
          keyExtractor={(item) => item.id.toString()}
          renderItem={({ item }) => renderItem(item)}
          refreshing={refreshing}
          onRefresh={onRefresh} // This line should work now
        />
      </View>