React Native, from ListView to FlatList

Question

I want to do an app with React native and firebase, with a feed. With new posts, modified posts, and infinite scroll. After trying with no success to do it with FlatList, I managed to do it with ListView :

<ListView
      automaticallyAdjustContentInsets={false}
      initialListSize={1}
      dataSource={this.state.dataSource}
      renderRow={this.renderItem}
      renderFooter={this.renderFooter}
      onEndReached={this.onEndReached}
      onEndReachedThreshold={1}
/>

with

ComponentDidMount() { firebase.database().ref(`/posts/${this.props.auth.group}`)
.limitToLast(this.state.counter)on('value', async snapshot => {
   if (snapshot.val()) {
     this.setState({ 
       dataSource: 
       this.state.dataSource.cloneWithRows(_.reverse(_.toArray(snapshot.val()))) })
   }

and

onEndReached = () => {
   this.setState({ counter: this.state.counter + 7 });
   this.setState({ isLoading: true });
   firebase.database().ref(`/posts/${this.props.auth.group}`).off();


  firebase.database().ref(`/posts/${this.props.auth.group}`).orderByChild('updatedAt').limitToLast(this.state.counter+7).on('value',
 (snapshot) => {
   if (snapshot.val()) {
     this.setState({ isEmpty: false });
     this.setState({
       dataSource: this.state.dataSource.cloneWithRows(_.reverse(_.toArray(snapshot.val()))),
     });
   }
  }
}

Is it possible to do the same thing with FlatList?

I don't succeed to update the this.data (which I give to flatList) correctly without making all the posts rerender (and blink) and getting the new posts updated at the same time.

Answer 1

You can achieve the same with the extraData prop of FlatList.

https://facebook.github.io/react-native/docs/0.56/flatlist#extradata