ScrollView rendered incorrectly with RefreshControl if push back a bit before finish refreshing

[nihgwu]

to reproduce:
Open the RefreshControl example in UIExplorer for iOS, pull to refresh and then push back a bit(not hide the RefreshControl) before turning off refreshing, and you will see the issue every time with the latest code in master branch of React Native, the ScrollView bounces back with a space for RefreshControl witch is already disappeared instead of scroll to the top

[tsteele2013]

Having the same issue described by @nihgwu in my ListView. If I scroll down while the refresh is still processing, the space for the RefreshControl is still being rendered, which pushes down my stickyHeader and makes things look quite ugly.

The Today sectionHeader should be directly underneath the StatusBar.

[kylekampy]

My team has been encountering the same issue:

Corresponding render code snippet looks like:

return (
  <ListView
    style={styles.listView}
    dataSource={dataSource}
    renderRow={renderRow}
    renderSeparator={renderSeparator}
    renderSectionHeader={renderSectionHeader}
    onEndReached={this.loadMoreAppointments}
    onEndReachedThreshold={800}
    initialListSize={appointments.length}
    refreshControl={refreshControl}
  />
);

With RefreshControl being a simple:

<RefreshControl
  refreshing={loadingAppointments}
  onRefresh={this.handleRefresh}
  tintColor={'#01A191'}
  title={'Loading...'}
  titleColor={'#01A191'}
  colors={['#01A191', '#41CFBD']}
  progressBackgroundColor={'#FFFFFF'}
/>

When this #11700 makes it into a release, we are debating just disabling section sticky headers (or just rendering them as normal rows now to disable them).

Finally, just to add some more context; it does appear there was an intentional commit a while back to resolve this issue: 34389c5.

[stief510]

+1

[VansonLeung]

+1

[MataHu]

+1

[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.