FlashList "flickers" with state change

[dniccum]

I am currently using FlashList to show a list of results retrieved from the device's native contact list. The idea is when you select a contact(s) there is a checkbox that appears to each contact indicating it's select. However after this implementation, I have noticed that FlashList component flickers with each selection. I quickly switched to the React Native FlatList with no problems, so it clearly has to do with FlashList specifically.

I have verified that I have defined a unique key using the keyExtractor prop, and I have set the extraData prop using the selected data. Based on what I read from the documentation, this should have solved my issue but it did not. Any help would be appreciated.

My component view

<View style={{ display: 'flex', flex: 1, width: '100%', flexDirection: 'column' }}>
                <View style={{ flex: 1, width: '100%' }}>
                    <FlashList
                        data={contacts}
                        keyExtractor={(item, index) => `${item.id}-${index}`}
                        ref={contactList}
                        extraData={selectedContacts}
                        renderItem={renderItem}
                        estimatedItemSize={100}
                    />
                </View>
            </View>

Component Code

const contactList = useRef()
const [selectedContacts, setSelectedContacts] = useState<string[]>([]);

const renderItem = ({ item }) => (
        <ContactListResult item={item}
                           onPress={toggleSelection}
                           selectable={true}
                           selected={selectedContacts.indexOf(item.id) >= 0}
        />
    );

const toggleSelection = (item : ConnectionListItem) => {
        let currentList = [...selectedContacts];
        if (currentList.includes(item.id)) {
            currentList.splice(currentList.indexOf(item.id), 1)
        } else {
            currentList.push(item.id)
        }
        setSelectedContacts(currentList)
    }

ContactListItem component

<Pressable onPress={() => props.onPress ? props.onPress(props.item) : null} style={[ styles.wrapper, layout.wrapper ]}>
            <Avatar />
            <View style={styles.textWrapper}>
                <Text style={styles.connectionName}>{`${props.item.first_name} ${props.item.last_name}`}</Text>
                {props.item.last_interaction ? (
                    <Text style={styles.subLine}>{`${props.item.first_name} ${props.item.last_name}`}</Text>
                ) : null}
            </View>
            {props.selectable && props.selected ? (
                <View style={{ ...styles.checkWrapper, backgroundColor: colors.evergreen['50'], borderColor: 'transparent' }}>
                    <Image style={{ width: 16, height: 16, }} source={require('../../../assets/images/icons/check-light.png')} />
                </View>
            ) : (
                <View style={styles.checkWrapper}></View>
            )}
        </Pressable>

[chrisjarn]

anything on the above? im also haivng the same issue