RN 0.44: On Android, ListView Section Header disappears, when the number of elements in the dataSource changes

[joeldalley]

Description

We're using RN 0.44 in combination with React 16.0.0-alpha.6, so that we can have sticky section headers on Android. It works! However, when the number of rows in the dataSource changes, the section header mysteriously disappears.

Unfortunately, the versions of React and RN used on the Snack website are older, but I still created a sample app that, if the site were to feature the upgraded versions of React and RN, should reproduce the problem: https://snack.expo.io/SkohIU4WZ

What we expect here is for the section header to not only stick on Android, but also not to disappear, should the number of rows in its dataSource change. (iOS works perfectly, for what that's worth.)

Reproduction Steps and Sample Code

List all the steps required to reproduce the issue you're reporting. These steps should be clear and concise.

<ListView
        dataSource={dataSource}
        enableEmptySections={true}
        removeClippedSubviews={false}
        renderSectionHeader={() => {
          return (
            <View style={{height: 100, width, backgroundColor: 'red'}}>
              <Text>TEST SECTION</Text>
            </View>
          );
        }}
        renderRow={row => {
          return <View style={{height: 40, width, backgroundColor: 'white'}}><Text>{row.name}</Text></View>;
        }}
        renderHeader={() => {
          return (
            <View style={{height: 50, width, backgroundColor: 'yellow'}}>
              <Text>THIS IS THE LISTVIEW HEADER</Text>
            </View>
          );
        }}
        stickySectionHeadersEnabled={true}
      />

Solution

I've combed through react-native/Libraries/Lists/ListView.js, and I'm unable to find the cause. It appears we always enter the if case on line 411: https://github.com/facebook/react-native/blob/master/Libraries/Lists/ListView/ListView.js#L410

And we always end up having a section header element, which gets pushed onto the bodyComponents array. It's just that it visually disappears, when the number of rows in dataSource changes.

Unfortunately, I don't know the root cause of the bug. :-(

Additional Information

• React Native version: 0.44.0
• Platform: Android
• Development Operating System: MacOS
• Dev tools: Android API levels 19, 22 and 23 have been tested

[avencat]

Having same problem here but on iOS (haven't test on Android yet), sticky section headers disappear sometimes (not all the time) when refreshing with the pull-to-refresh function, tested with ListView AND the new SectionList, both will disappear sometimes after refreshing the data.

[joeldalley]

We see it on dataSource size increase or decrease. Examples include filtering a displayed list to reduce the displayed number of ListView rows. Or when data loads and we re-render with the just-loaded data in our dataSource (typically going from a one-row display where the one row is a loading spinner to many rows per the back-end data).

So far, this happens in our application only on Android, but is very predictable--we can always reproduce the bug via changes to our ListView's dataSource.

[lslima91]

@avencat updating to 0.45 solved it for me

[avencat]

@lslima91 I will give it a try then! 😃 Thanks for the feedback! :)

[Edit] Still not solve for me! 😕

[mikelambert]

I believe this is fixed by 0518a0b , which is part of 0.46 (unless you cherry-pick it).

[kelset]

I think this issue and #10747 are probably related.
It still happens to me with version 0.46.4 - and the only PR directly related to this issue #15033 is still open :/

Any clue/suggestion on how to overcome/fix this issue?

[vonovak]

@kelset the issue and PR that you linked to are (probably) unrelated, since they occur on a different platform.

[kelset]

After some debugging yeah, I can confirm they are unrelated.

[stage88]

I have tested this on 0.47.1 in iOS and it happens consistently. For me it seems to start once I press on a list item to navigate to an item detail. When navigating back the section header is there, but if I press to view another tab and then navigate back the header disappears.

[gigeos]

I have this issue on Android too, not try on iOS. But in my case just some headers appear/disappears, not all. Is it your case too?
react :"16.0.0-alpha.6"
react-native :"0.44.0"

Edit: I use stickyHeaderIndices with ScrollView and I tried ListView with Section Headers.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Maybe the issue has been fixed in a recent release, or perhaps it is not affecting a lot of people. If you think this issue should definitely remain open, please let us know why. Thank you for your contributions.