Реагировать на родной, от ListView до FlatList

Question

Я хочу сделать приложение с React native и firebase, с фидом. С новыми сообщениями, измененными сообщениями и бесконечной прокруткой. После безуспешных попыток сделать это с помощью FlatList мне удалось сделать это с помощью ListView:

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

с

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()))) })
   }

и

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()))),
     });
   }
  }
}

Можно ли сделать то же самое с FlatList?

Мне не удается корректно обновить this.data (который я даю flatList) без перерисовки всех сообщений (и моргания) и одновременного обновления новых сообщений.

Answer 1

Вы можете достичь того же самого с помощью экстраданных FlatList.

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