FlatList - while list is scrolling/rendering items the JS thread is blocked, onPress are super delayed.

Description

While FlatList is scrolling and/or rendering items the JS thread is blocked… any events (onPress etc) on TocuchableWhatever are ingored or processed after FlatList finishes rendering. How can I pause FlatList rendering and process onPress?

Content rendered by FlatList while scrolling uses InteractionManager so if you want to pause it you just need to create an interaction handle. © @sahrens

I’ve tried that on my ListItem:

export default class ListItem extends Component { 

    shouldComponentUpdate() {
        return false;
    }

    render() {
        const {item} = this.props;

        return (
                <TouchableHighlight style={styles.item} underlayColor='rgba(255,255,255,.3)' activeOpacity={0.7} onPress={this._onPress}>
                     <View style={styles.row}>
                        <Image style={styles.image} source={{ uri: item.imgUrl}} />
                        <View style={styles.details}>
                            <BaseText style={styles.caption} weight={600}>{item.caption}</BaseText>
                            <BaseText style={styles.points}>{item.points} points</BaseText>
                        </View>
                        <TouchableOpacity hitSlop={{top: 10, left: 10, right: 10, bottom: 10}} >
                            <Icon style={styles.icon} name={item.favorite ? 'heart' : 'heart-outline'} size={24} color={'white'} />
                        </TouchableOpacity>
                    </View>
                </TouchableHighlight>
                )
    }

    _onPress = () => {
        const handle = InteractionManager.createInteractionHandle();
        this.props.onPress(this.props.item.key);
        InteractionManager.clearInteractionHandle(handle);
    }

}

but it does not fix the issue. Am I doing it wrong?

Additional Information

• React Native version: 0.42.0
• Platform: tired only on iOS (device)
• Operating System: MacOS
• Dev tools: Xcode

[farhanfahrezi]

as an alternative and cleaner solution, I ended up wrap FlatList over ScrollView.

something like this:

<ScrollView>
  <FlatList />
</ScrollView>

it worked for me.

[sahrens]

Yeah, it is is pretty tricky balancing memory, fill rate, responsiveness, and frame rate but we’ll keep optimizing!