Shopify Flashlist re-render issue in android

37 Views Asked by At

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).

0

There are 0 best solutions below