FlatList Weird Behavior after appending new data

[Abdelrahman-Nabil]

I have a list of data that shows posts feed, whenever user scrolls, the list automatically scrolls multiple times up or down which results in a very bad UX

React Native Environment Info:

System:
  OS: Windows 10
  CPU: (4) x64 Intel(R) Core(TM) i5-4200M CPU @ 2.50GHz
  Memory: 3.67 GB / 5.91 GB
Binaries:
  Yarn: 1.12.3 - C:\Users\Abdu\AppData\Roaming\npm\yarn.CMD
  npm: 6.4.1 - C:\Program Files\nodejs\npm.CMD
IDEs:
  Android Studio: Version  3.2.0.0 AI-181.5540.7.32.5056338

Steps To Reproduce

1.render a flatlist component with initial data
2.append new data to the end of data array

a GIF explaining the issue:
https://gifyu.com/image/9gDD

Expected To Happen:

automatic scrolls shouldn't happen

Sample Code:

<FlatList
    keyboardDismissMode = 'on-drag'
    keyboardShouldPersistTaps = 'always'
    getItemLayout={(data, index) => (
    {length: 575, offset: 575 * index, index}
)}
    onScroll = {(event) => {
        this.flatListOffset = event.nativeEvent.contentOffset.y
        this.setState({
            scrollOffset: event.nativeEvent.contentOffset.y
        })
    }}
    contentContainerStyle={{
        flexGrow: 1,
        width: Dimensions.get('window').width
    }}
    refreshControl={
        <RefreshControl
            progressViewOffset={120}
            refreshing={this.state.refreshing}
            onRefresh={this._onRefresh.bind(this)}
        />
    }
    ref={(feedView) => (this.feedView = feedView)}
    data={this.state.feed}
    onEndReached={() => {
        if (this.state.hasNextPage && !this.state.loadingMore) {
                this.paginateFeed()
        }
    }}
    
    ListHeaderComponent={this._renderCirclesBar}
    ListEmptyComponent={this._renderEmptyState}
    ListFooterComponent={() =>
        !this.state.loadingMore ? null : (
            <ActivityIndicator color="#2962FF" size="large" />
        )
    }
    keyExtractor={this._keyExtractor}
    renderItem={this._renderItem}		
/>

Then at some point: this.setState({ feed: this.state.feed.concat(....) })

[matt-oakes]

👋 Thanks for the report.

Are you able to create a simple demo project (using expo snack or a fresh react-native init project) which demonstrates the issue. It's not clear what the issue is from the gif and we can't run the sample code contains a lot of additional code which might not be relevant.

[Abdelrahman-Nabil]

Had to replace it with recyclerlistview which resolves my problem, thanks. https://github.com/Flipkart/recyclerlistview