I have a multi select list in which items can be marked as selected. I'm using a state to pass the data prop to the Flashlist and I'm storing the selected item in a separate state. An already selected item will get deselected if pressed again.
An item gets marked as selected and deselected on first and second press as expected. My issue is that the list is failing to re-render after that in android even if I am passing the extraData
prop. A previously deselected item is not getting marked as selected upon new press. It is working as expected in iOS though with the extraData prop. Am I missing something here? Any help will be appreciated.
const [assets, setAssets] = useState<AssetType[]>([
{
id: "1",
uri: "file:///storage/emulated/0/Pictures/image-7 (1).jpg",
},
]);
const [selectedMedia, setSelectedMedia] = useState<AssetType[]>([]);
const onPressMedia = useCallback((media: AssetType) => {
setSelectedMedia((selected) => {
const index = selected.findIndex((m) => m.id === media.id);
if (index !== -1) {
return [...selected.slice(0, index), ...selected.slice(index + 1)];
} else {
return [...selected, media];
}
});
}, []);
const renderItem = useCallback(
({ item, index }) => {
return (
<List
item={item}
onPressMedia={onPressMedia}
selectedMedia={selectedMedia}
/>
);
},
[selectedMedia],
);
And inside return:
<FlashList
estimatedItemSize={height / 6}
data={assets}
numColumns={3}
keyExtractor={(item) => item.id}
renderItem={renderItem}
extraData={selectedMedia}
/>
And inside the List component:
const indexInSelectedMedia = selectedMedia.findIndex((m) => m.id === item.id);
return (
{indexInSelectedMedia > -1 && (
<View
position="absolute"
height={24}
width={24}
style={{
backgroundColor: "#1D3557",
}}
>
<Text variant="body-s-bold" color="textOnPrimary">
{indexInSelectedMedia + 1}
</Text>
</View>
)}
I tried adding the extraData
prop as mentioned in the documents which will trigger a re-render. But it only re-renders twice in android. After that a previously deselected item is not getting marked as selected on press. I'm using the latest version of Flashlist (1.6.3) and expo (50.0.14).