question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

how can we make ListHeaderComponent as sticky header in SectionList

See original GitHub issue

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

foodpanda

Repoducible example

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

Issue Analytics

  • State:open
  • Created 3 years ago
  • Reactions:4
  • Comments:13 (5 by maintainers)

github_iconTop GitHub Comments

10reactions
numandev1commented, Aug 14, 2020

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

2reactions
numandev1commented, Oct 12, 2020

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

Read more comments on GitHub >

github_iconTop Results From Across the Web

how can we make ListHeaderComponent as sticky header in ...
i am using horizontal tab bar inside ListHeaderComponent and I want make ListHeaderComponent as a sticky header in SectionList. we can make ......
Read more >
SectionList with sticky headers - Expo Snack
SectionList with sticky headers. No description. Open with Expo Go. Open in editor. Need Expo? Don't have the Expo Go? Download the app...
Read more >
how can we make ListHeaderComponent as sticky header in ...
Coding example for the question how can we make ListHeaderComponent as sticky header in SectionList?-React Native.
Read more >
SectionList - React Native
Make sure all your data is captured in the item data or external ... by a sticky header), 1 at the bottom, and...
Read more >
A React Native component that implements SectionList with ...
The sticky header of inverted SectionList component of React Native is not working ... we build a standalone InvertedSectionList component.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found