I have this sourcecode to render my Flatlist with reactNative:
render() {
const {navigate} = this.props.navigation;
return (
<View >
<FlatList
extraData={this.state.searchResult.contacts}
data={this.state.searchResult.contacts}
keyExtractor={item => item.id}
ListHeaderComponent={this.renderHeader(this.state.selected)}
initialListSize={8}
initialNumToRender={20}
pagingEnabled={true}
pageSize={8}
scrollRenderAheadDistanc={470}
//removeClippedSubviews={true}
renderItem={({item}) => (
<MyListItem key={item.key}
item={item}
navigate={navigate}/>
)}
/>
</View >
);
}
}
class MyListItem extends React.PureComponent {
render() {
const item = this.props.item;
return (<ListItem
key={item.id}
title={`${item.Name}`}
subtitle={`${item.Adresse}`}
onPress={() => {
this.props.navigate('ContactDetail',
{
contact: item,
}
)
}}
/>);
}
}
I have round about 950 Contacts to list. If I change to the Contact-Screen, I can't click any of the ListItems till the scrollbar is gone. ..the scrollbar is gone, if all items are loaded.
Please have a look at this Video... here you see what I mean: