react-native icon indicating copy to clipboard operation
react-native copied to clipboard

[iOS] SectionList - Weird ListHeaderComponent re-render when no section data

Open tylercote opened this issue 3 years ago • 1 comments

Description

Only on iOS, when using a SectionList ListHeaderComponent, providing sections = [] will cause a weird re-render, whereas if there is any section data, this re-render does not happen.

Basically, is there any reason that the HeaderComponent should be forced to re-render when "sections" changes?

2022-08-12 11 36 42

See Snack below of repro steps.

Version

0.67.2

Output of npx react-native info

System: OS: macOS 12.5 CPU: (10) arm64 Apple M1 Pro Memory: 581.61 MB / 32.00 GB Shell: 5.8.1 - /bin/zsh Binaries: Node: 14.18.1 - ~/.nvm/versions/node/v14.18.1/bin/node Yarn: 1.22.17 - ~/.nvm/versions/node/v14.18.1/bin/yarn npm: 6.14.15 - ~/.nvm/versions/node/v14.18.1/bin/npm Watchman: 2022.05.30.00 - /opt/homebrew/bin/watchman Managers: CocoaPods: 1.11.3 - /opt/homebrew/bin/pod SDKs: iOS SDK: Platforms: DriverKit 21.4, iOS 15.5, macOS 12.3, tvOS 15.4, watchOS 8.5 Android SDK: Not Found IDEs: Android Studio: Not Found Xcode: 13.4.1/13F100 - /usr/bin/xcodebuild Languages: Java: 17.0.1 - /usr/bin/javac npmPackages: @react-native-community/cli: Not Found react: 17.0.2 => 17.0.2 react-native: ^0.67.2 => 0.67.2 react-native-macos: Not Found npmGlobalPackages: react-native: Not Found

Steps to reproduce

See Snack below, and follow these steps (need to load on iOS device, doesn't happen in web/android)

  1. Scroll "filter pills" component to it's right-most state
  2. Click "One", notice how the section list data filters to only rows with "One"
  3. Deselect "One"
  4. Click "Seven", notice how the "filter pills" component has jolted all the way back to the left, as there is no data found to filter by

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

https://snack.expo.dev/@tyler16cote/section-list-empty-render

tylercote avatar Aug 12 '22 15:08 tylercote

https://github.com/facebook/react-native/issues/23400 this unresolved issue from 2019 seems to face the same issue.

tylercote avatar Oct 24 '22 15:10 tylercote

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

github-actions[bot] avatar Apr 22 '23 18:04 github-actions[bot]

Still an issue

tylercote avatar Apr 24 '23 14:04 tylercote

Still an issue :(

rodperottoni avatar Aug 17 '23 16:08 rodperottoni