Skip to content

zIndex in FlatList #28751

Open
Open
@ShaMan123

Description

@ShaMan123

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

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions