ReactNative Flatlist - Performance of item rendering

415 Views Asked by At

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:

http://screencast-o-matic.com/watch/cbQIbkIoT3

0

There are 0 best solutions below