Nativebase: FlatList onEndReached invoked endlessly

[yongpingchen]

Implemented pull up to load more feature in my app. The FlatList of react-native component is utilized, nested inside Content.

      <Container>
        <Header />
        <Content padder={false}>
          <FlatList
              data={this.state.data}
              renderItem={({ item }) => (
                <Text>{`${item.name.first} ${item.name.last}`}</Text>
              )}
              keyExtractor={item => item.email}
              ItemSeparatorComponent={this.renderSeparator}
              ListHeaderComponent={this.renderHeader}
              ListFooterComponent={this.renderFooter}
              onEndReached={this.handleLoadMore}
              onEndReachedThreshold={0.01}
            />
          </Content>
      </Container>

node, npm, react-native, react and native-base version

node: v9.11.1
react-native: 0.56.0
react: 16.4.1
native-base: 2.7.2

Expected behaviour

scroll list until end of current page, then onEndReached is triggered to load more items of next pages.

Actual behaviour

as soon as screen loaded, onEndReached is invoked endlessly.

Steps to reproduce should include code snippet and screenshot

use the uploaded sample source code can reproduced this issue.
(Note that in the sample source code, only allow load up to 5 page. )
FlatListInNativeBase.zip

cd FlatListInNativeBase
npm install
react-native run-android

As soon as app launched, you can see from debug log

handleLoadMore was invoked five times, so that handling loadmor output five times.

Is the bug present in both iOS and Android or in any one of them?

• presented in Android device (Galaxy S7 edge, Android 7.0)
• presented in iOS simulator iPhon6 iOS 11.4
  

  Any other additional info which would help us debug the issue quicker.

[yongpingchen]

duplicate with issue #1736
and comment https://github.com/GeekyAnts/NativeBase/issues/1736#issuecomment-401815949 solved the issue.

[ivanfranchi]

contentContainerStyle={{flex: 1}} fixes the onEndReached issue but after it the refreshControl doesn't work properly anymore. It triggers the pull to refresh loader even if scroll isn't at the top of the page :(

[ikeliec]

Implemented pull up to load more feature in my app. The FlatList of react-native component is utilized, nested inside Content.

      <Container>
        <Header />
        <Content padder={false}>
          <FlatList
              data={this.state.data}
              renderItem={({ item }) => (
                <Text>{`${item.name.first} ${item.name.last}`}</Text>
              )}
              keyExtractor={item => item.email}
              ItemSeparatorComponent={this.renderSeparator}
              ListHeaderComponent={this.renderHeader}
              ListFooterComponent={this.renderFooter}
              onEndReached={this.handleLoadMore}
              onEndReachedThreshold={0.01}
            />
          </Content>
      </Container>

node, npm, react-native, react and native-base version

node: v9.11.1
react-native: 0.56.0
react: 16.4.1
native-base: 2.7.2

Expected behaviour

scroll list until end of current page, then onEndReached is triggered to load more items of next pages.

Actual behaviour

as soon as screen loaded, onEndReached is invoked endlessly.

Steps to reproduce should include code snippet and screenshot

use the uploaded sample source code can reproduced this issue.
(Note that in the sample source code, only allow load up to 5 page. )
FlatListInNativeBase.zip

cd FlatListInNativeBase
npm install
react-native run-android

As soon as app launched, you can see from debug log

handleLoadMore was invoked five times, so that handling loadmor output five times.

Is the bug present in both iOS and Android or in any one of them?

* presented in Android device (Galaxy S7 edge, Android 7.0)

* presented in iOS simulator iPhon6 iOS 11.4

Any other additional info which would help us debug the issue quicker.

A quick one. Just remove the FlatList from Content