zIndex in FlatList

Description

Related? #23614 #23615 Setting zIndex on items of a FlatList yields no result across different rows. However, it does work in the same row across it’s columns if existing. I have tried using CellRenderComponent without success. This is crucial for dragging items in a list etc. I can confirm it is cross platform. See the snack below.

React Native version:

React Native version

System:
    OS: Windows 10 10.0.18362
    CPU: (4) x64 Intel(R) Core(TM) i5-7200U CPU @ 2.50GHz
    Memory: 2.84 GB / 7.87 GB
  Binaries:
    Node: 12.14.0 - C:\Users\DELL\AppData\Local\Temp\yarn--1587809387421-0.6934667812958264\node.CMD
    Yarn: 1.22.0 - C:\Users\DELL\AppData\Local\Temp\yarn--1587809387421-0.6934667812958264\yarn.CMD
    npm: 6.13.4 - C:\Program Files (x86)\nodejs\npm.CMD
    Watchman: Not Found
  SDKs:
    Android SDK:
      API Levels: 22, 23, 25, 26, 27, 28, 29
      Build Tools: 23.0.1, 23.0.3, 24.0.1, 26.0.2, 27.0.1, 27.0.3, 28.0.0, 28.0.3, 29.0.3, 30.0.0
      System Images: android-22 | Google APIs Intel x86 Atom, android-22 | Google APIs Intel x86 Atom_64, android-23 | Intel x86 Atom_64, android-23 | Google APIs Intel x86 Atom, android-23 | Google APIs Intel x86 Atom_64, android-25 | Google APIs Intel x86 Atom, android-26 | Google APIs Intel x86 Atom_64, android-26 | Google Play Intel x86 Atom, android-27 | Google APIs Intel x86 Atom, android-27 | Google Play Intel x86 Atom, android-28 | Google APIs Intel x86 Atom, android-28 | Google APIs Intel x86 Atom_64, android-28 | Google Play Intel x86 Atom, android-28 | Google Play Intel x86 Atom_64, android-29 | Google APIs Intel x86 Atom, android-R | Google APIs Intel x86 Atom, android-R | Google Play Intel x86 Atom_64
      Android NDK: 17.2.4988734
  IDEs:
    Android Studio: Version  3.5.0.0 AI-191.8026.42.35.5791312
  Languages:
    Java: 1.8.0_172 - C:\Program Files\Java\jdk1.8.0_172\bin\javac.EXE
    Python: 3.6.5 - C:\Users\DELL\AppData\Local\Programs\Python\Python36-32\python.EXE
  npmPackages:
    @react-native-community/cli: Not Found
    react: ^16.13.0 => 16.13.1
    react-native: ^0.62.2 => 0.62.2
  npmGlobalPackages:
    *react-native*: Not Found
Done in 13.98s.

Steps To Reproduce

1. Render a list of items with FlatList.
2. Change items’ position and zIndex so an item should render above other items placed after it in the list (descending zIndex).

Expected Results

zIndex should behave the same in FlatList items as it does in other view hierarchies. Meaning a greater value should result in rendering above other views.

Snack, code example, screenshot, or link to a repository:

https://snack.expo.io/VHjFLB_Dz

[bboure]

Hi,

I am having the same issue. (I am trying to implement a drag-and-drop sort FastList) Setting zIndex inside the renderItem function does not work.

I also tried to use CellRendererComponent and set the zIndex in the Wrapping component, but that would block my animations for some reason.

I finally made it work by making sure that CellRendererComponentis always the exact same instance of the function across re-renders.

Here is a simplified version of my code

  // make sure to use `.bind(this)` in the constructor or use auto binding. 
  renderCell = ({ index, style, ...props }) => {
	const { currentDragIndex } = this.state;
	const zIndex = {
      zIndex: index === currentDragIndex ? 2 : 0,
    };

    return <View style={[style, zIndex]} {...props} />;
  };

  render() {
    const {
      data,
    } = this.props;

    return (
      <FlatList
        data={data}
        // renderCell is always the same instance.
        CellRendererComponent={this.renderCell}
        // ...
      />
    );
  }

In a functional component, you would probably want to use useCallback.

Hope that helps

[ShaMan123]

Check out how it behaves across rows/columns. zIndex works in the row but not across rows.