how can we make ListHeaderComponent as sticky header in SectionList

[numandev1]

Description

i am using horizontal tab bar inside ListHeaderComponent and I want make ListHeaderComponent as a sticky header in SectionList. we can make stickyheader in flatlist by stickyHeaderIndices={[0]} but it does not work in SectionList

React Native version:

React Native Environment Info:
    System:
      OS: macOS 10.14.6
      CPU: (12) x64 Intel(R) Core(TM) i7-8850H CPU @ 2.60GHz
      Memory: 38.35 MB / 16.00 GB
      Shell: 5.3 - /bin/zsh
    Binaries:
      Node: 12.15.0 - /usr/local/bin/node
      Yarn: 1.21.1 - /usr/local/bin/yarn
      npm: 6.13.4 - /usr/local/bin/npm
      Watchman: 4.9.0 - /usr/local/bin/watchman
    SDKs:
      iOS SDK:
        Platforms: iOS 12.4, macOS 10.14, tvOS 12.4, watchOS 5.3
      Android SDK:
        API Levels: 28, 29
        Build Tools: 28.0.3, 29.0.1, 29.0.2
        System Images: android-26 | Google Play Intel x86 Atom, android-27 | Google APIs Intel x86 Atom
    IDEs:
      Android Studio: 3.5 AI-191.8026.42.35.5791312
      Xcode: 10.3/10G8 - /usr/bin/xcodebuild
    npmPackages:
      react: 16.8.6 => 16.8.6
      react-native: 0.59.8 => 0.59.8
    npmGlobalPackages:
      rename-horizon: 1.1.0
      react-native-cli: 2.0.1

Steps To Reproduce

Provide a detailed list of steps that reproduce the issue.

1. make section list and add ListHeaderComponent props
2. add stickyHeaderIndices={[0]} in section list
   it will not make ListHeaderComponent as sticky header

Expected Results

it should be making ListHeaderComponent as a sticky header. or alternative way to make it sticky header

Repoducible example

https://snack.expo.io/@nomi9995/96ac08

[safaiyeh]

Hi @nomi9995 thanks for the issue! Could you provide a snack that show cases this issue?

[github-actions]

⚠️	Missing Reproducible Example
ℹ️	It looks like your issue is missing a reproducible example. Please provide a Snack or a repository that demonstrates the issue you are reporting in a minimal, complete, and reproducible manner.

[numandev1]

@safaiyeh I have added reproducible snack example.

[safaiyeh]

Thanks for the snack @nomi9995. It seems like it is working in iOS and not Android. I appreciate the repro

[numandev1]

@safaiyeh it is not working on both android and ios.

[ecreeth]

@nomi9995 Please, use SectionList prop: stickySectionHeadersEnabled. This works fine!

[numandev1]

@ecreeth stickySectionHeadersEnabled will make stick section header not ListHeaderComponent . i want to make stack ListHeaderComponent ``

[IoanaBdn]

I have the same issue as @nomi9995 , when I try to dock the ListHeaderComponent for SectionList.

[Patys]

You may try out this library: https://github.com/netguru/sticky-parallax-header

It supports your case: https://github.com/netguru/sticky-parallax-header#tabbed-header

[numandev1]

@Patys I can also use ScrolView and make list with map but I want to make ListHeaderComponent as sticky hander in SectionList

[lumotroph]

Thanks for the fantastic work, everyone!

You may try out this library: https://github.com/netguru/sticky-parallax-header

It supports your case: https://github.com/netguru/sticky-parallax-header#tabbed-header

Any suggestions on doing this within an existing UI library framework? We are using rn-ui-lib's TabController.

Setting stickyHeaderIndices to the correct component leads to a situation where scrolling works, the TabBar (or "tab header") is sticky, but the content within the rest of the component does not scroll (in the rn-ui-lib implementation this content is within a TabController.PageCarousel and then a TabController.TabPage).

Any ideas?

[babyrusa]

has you found a solution for this @numandev1? I've been searching for a couple days and everyone suggested using stickyHeaderIndices yet it never worked for me with FlatList.

[sreuter]

This would be really great to have.

[github-actions]

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]

This issue was closed because it has been stalled for 7 days with no activity.

[seco35]

Still not working...