0

I have a datasource with more than 800 entries which I'm using FlatList to render it.

Each renderItem receives a function to navigate to another screen on item press.

The problem is that the transition between screens is extremely slow.

I noticed that even with scrolling working fast, renderItem is still being called for all 800 entries in DOM. When all items are finally rendered, then the navigation works fine.

I've tried using initialNumToRender, getItemLayout and waitForInteraction props, as well tried to change my renderItem component (now is a stateless component) to a pure component. Nothing seems to work so far.

Any suggestion will be appreciated.

Here's some code if may help: 

 <FlatList
   data={this.state.listDataSource}
   renderItem={({ item, index }) => this.renderListItem(item, index)}
   keyExtractor={this._keyExtractor}
   style={{
     flex: 1,
     marginHorizontal: 30,
     borderTopWidth: 1,
     borderColor: '#919191',
   }}/>


renderListItem(item, index) {
    return <ListItem dotFunc={() => this.onListItemPress(index)} item={item} />;
  }

onListItemPress(index) {
    Actions.itemDetail({
      index
    });
  }


// ListItem.js correctly exported
const ListItem = ({ dotFunc, item }) => (
<TouchableOpacity onPress={() => Actions.contactDetail({rowID})}>
<Text>{Item}</Text>
</TouchableOpacity>
}

Thanks

Brandon Culley
  • 5,219
  • 1
  • 28
  • 28
soutot
  • 3,531
  • 1
  • 18
  • 22
  • Using the `InteractionManager` might be useful. [Example](https://stackoverflow.com/a/41112462/5908974) – MattyK14 Sep 28 '17 at 18:23
  • 1
    Thanks, I tried it out but the transition keeps slow. I appreciate if you have any other suggestion – soutot Sep 28 '17 at 19:53
  • @soutot did you find any solution? – Anjana Feb 16 '18 at 08:53
  • @Anjana-Systematix Since the slow transition was caused due the list still loading items, the solution was using pagination to limit the number of items returned from the server to be rendered. I loaded more items everytime ```onEndReached``` was called. – soutot Feb 18 '18 at 22:16

0 Answers0