[SectionList] sticky headers disappers after scroll - Section List - Android

[victorkvarghese]

Description

I used section list in react native android. While the sticky headers work perfect for sometime. When user scrolls up and down repeatedly, the sticky headers disappear/ do not get rendered. Tried this with stickySectionHeadersEnabled={false}, everything works fine.

Reproduction Steps and Sample Code

<SectionList
       renderItem={this.renderItem}
       renderSectionHeader={this.renderHeader}
       sections={dataSource}
       keyExtractor={(item) => item.name}
       stickySectionHeadersEnabled={true}
     />

Solution

Sticky headers Enabled: http://imgh.us/Screen_Shot_2017-05-24_at_9.52.13_PM.png
Sticker headers after Scroll : http://imgh.us/Screen_Shot_2017-05-24_at_9.52.39_PM.png

Additional Information

• React Native version: 0.44.0
• Platform: Android
• Development Operating System: macOS
• Dev tools: [Android studio 2.3]
• Tested in emulator Nexus 5 API 25

[hramos]

Is there a Snack that demonstrates this behavior?

[victorkvarghese]

@hramos See this video it shows the behaviour.
https://youtu.be/fL3Y2Fyh0tM

[victorkvarghese]

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  SectionList
} from 'react-native';

import _ from 'lodash'

const dataSource = [
  {name : 'The Matrix', genre:'Scifi1'},
  {name : 'Star Wars', genre:'Scifi'},
  {name : 'Alien', genre:'Horror'},
  {name : 'Inception', genre:'Scifi1'},
  {name : 'Avatar', genre:'Scifi'},
  {name : 'Interstellar', genre:'Scifi'},
  {name : 'The Conjuring', genre:'Horror'},
  {name : 'The Uninvited', genre:'Horror'},
  {name : 'The Orphanage', genre:'Horror'},
  {name : 'Annabelle', genre:'Horror'},
  {name : 'The Dictator', genre:'Comedy1'},
  {name : 'The Kid', genre:'Comedy'},
  {name : 'Forrest Gump', genre:'Comedy1'},
  {name : 'The Matrix1', genre:'Scifi'},
  {name : 'Star Wars1', genre:'Scifi'},
  {name : 'Alien1', genre:'Horror'},
  {name : 'Inception1', genre:'Scifi'},
  {name : 'Avatar1', genre:'Scifi'},
  {name : 'Interstellar1', genre:'Scifi'},
  {name : 'The Conjuring1', genre:'Horror1'},
  {name : 'The Uninvited1', genre:'Horror1'},
  {name : 'The Orphanage1', genre:'Horror'},
  {name : 'Annabelle1', genre:'Horror'},
  {name : 'The Dictator1', genre:'Comedy'},
  {name : 'The Kid1', genre:'Comedy'},
  {name : 'Forrest Gump1', genre:'Comedy'},
  {name : 'The Matrix2', genre:'Scifi'},
  {name : 'Star Wars2', genre:'Scifi'},
  {name : 'Alien2', genre:'Horror'},
  {name : 'Inception2', genre:'Scifi'},
  {name : 'Avatar2', genre:'Scifi'},
  {name : 'Interstellar2', genre:'Scifi'},
  {name : 'The Conjuring2', genre:'Horror1'},
  {name : 'The Uninvited2', genre:'Horror1'},
  {name : 'The Orphanage2', genre:'Horror'},
  {name : 'Annabelle2', genre:'Horror'},
  {name : 'The Dictator2', genre:'Comedy'},
  {name : 'The Kid2', genre:'Comedy'},
  {name : 'Forrest Gump2', genre:'Comedy'},


]

dataSource = _.groupBy(dataSource, d => d.genre)

dataSource = _.reduce(dataSource, (acc, next, index) => {
  acc.push({
    key: index,
    data: next
  })
  return acc
}, [])

// const dataSource = [
//   {data: [{name: 'Profesor X'}, {name: 'Jain'}], key: 'FRIENDS'},
//   {data: [{name: 'Logan'}, {name: 'Victor'}], key: 'BROTHERS'}
// ]

export default class StickyApp extends Component {
  renderItem(item){
    return(
      <View style={{paddingLeft:18}}>
      <Text style={styles.text}>{item.item.name}</Text>
      </View>
    );
  }

  renderHeader(headerItem){
    return(
      <View style={{backgroundColor:'#000000'}}>
      <Text style={styles.headerText}>{headerItem.section.key}</Text>
      </View>
    );
  }

  render() {
    return (
      <View style={styles.container}>
      <SectionList
        renderItem={this.renderItem}
        renderSectionHeader={this.renderHeader}
        sections={dataSource}
        keyExtractor={(item) => item.name}
        stickySectionHeadersEnabled={true}
      />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: '#FFFFFF',
  },
  text:{
    fontSize:20,
    color:'black',
  },
  headerText: {
    fontSize:30,
    color:'red'
  }

});

AppRegistry.registerComponent('StickyApp', () => StickyApp);

[wvteijlingen]

Might be related, I'm seeing a lot of sticky header related bugs as well. Sometimes they disappear completely, but then come back after the scrolling slows down.

I've uploaded an example: https://youtu.be/3QyWi17uBNI

[mikelambert]

It might possibly be fixed by 0518a0b , which is part of 0.46 (unless you cherry-pick it).

[hramos]

Hi there! This issue is being closed because it has been inactive for a while. Maybe the issue has been fixed in a recent release, or perhaps it is not affecting a lot of people. Either way, we're automatically closing issues after a period of inactivity. Please do not take it personally!

If you think this issue should definitely remain open, please let us know. The following information is helpful when it comes to determining if the issue should be re-opened:

• Does the issue still reproduce on the latest release candidate? Post a comment with the version you tested.
• If so, is there any information missing from the bug report? Post a comment with all the information required by the issue template.
• Is there a pull request that addresses this issue? Post a comment with the PR number so we can follow up.

If you would like to work on a patch to fix the issue, contributions are very welcome! Read through the contribution guide, and feel free to hop into #react-native if you need help planning your contribution.