1

Description

One of the FlatList's well-known bugs is probably about zIndex.

I'm working on drag and drop cards in FlatList, but zIndex doesn't work as expected.

So I customize CellRenderComponent as workaround(see this), but when I use CellRenderComponent, onEndReached doesn't work properly on real device.

Try my Sample Project to see how it acts.

React Native version:

System:
    OS: macOS 10.15.4
    CPU: (8) x64 Intel(R) Core(TM) i7-7820HQ CPU @ 2.90GHz
    Memory: 1.94 GB / 16.00 GB
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 12.16.3 - /usr/local/bin/node
    Yarn: 1.21.1 - /usr/local/bin/yarn
    npm: 6.14.4 - /usr/local/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  SDKs:
    iOS SDK:
      Platforms: iOS 13.5, DriverKit 19.0, macOS 10.15, tvOS 13.4, watchOS 6.2
    Android SDK:
      API Levels: 23, 28, 29
      Build Tools: 23.0.1, 28.0.3, 29.0.3
      System Images: android-23 | Intel x86 Atom_64, android-23 | Google APIs Intel x86 Atom_64, android-28 | Intel x86 Atom_64, android-28 | Google APIs Intel x86 Atom, android-29 | Google APIs Intel x86 Atom
  IDEs:
    Android Studio: 3.5 AI-191.8026.42.35.6010548
    Xcode: 11.5/11E608c - /usr/bin/xcodebuild
  npmPackages:
    react: ~16.9.0 => 16.9.0 
    react-native: https://github.com/expo/react-native/archive/sdk-37.0.1.tar.gz => 0.61.4 
  npmGlobalPackages:
    react-native-cli: 2.0.1

Steps To Reproduce

Provide a detailed list of steps that reproduce the issue.

  1. Having problem with zIndex in a list
  2. Customize CellRendererComponent
  3. Now onEndReached working weird.

Expected Results

FlatList should call onEndReached and load more cards when scroll reaches to the end, but it seems to call onEndReached at weird point and jump right to the end.

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

This is my sample project

Please don't hesitate to correct me: I'm quite new to react-native. Thank you in advance.

Seunghyun Woo
  • 51
  • 1
  • 1
  • 5

0 Answers0