Flashlist caches scrolling carousels from previous cells

[ClemCornet]

Current behavior

I have a list with cells containing photo carousels. Each time a new batch of items is loaded, the cell keep in cache the scroll of the previous item.

Expected behavior

Is there a way to prevent this cell memoization behavior?

To Reproduce

Create a flashlist with a simple vertical carousel photo inside rows

Platform:

• iOS
• Android

Environment

"@shopify/flash-list": "1.4.0"
"react-native": "0.71.8"
"expo": "~48.0.18"

[ahmetares]

Using react-native-fast-image solved this problem on images for me

[ClemCornet]

@ahmetares Thank you for your reply. Even using react-native-fast-image (expo-image for me), I still have the same problem, it keep the scroll of previous cards >

Simulator.Screen.Recording.-.iPhone.14.Pro.-.2023-08-08.at.10.21.45.mp4

I don't know if it's possible to bypass the library's behavior 🤔

[misha-belokon]

@ClemCornet have you found any solution?

[ClemCornet]

@misha-belokon No, I'm sorry. I'm back to a flatlist, impossible to change this behavior with a slider in the cells.
I hope a contributor will see this!

[yaminyassin]

can you add a expo snack with reproducible code. My guess is that this might be a key problem.

[tanlucvo]

Yupp!! Assume is when Item1 out of screen and Item10 move into screnn, Flashlist will recycle Item1 by data of Item10, and keep current state of Item1, then cause issue above. Solution is reset carousel index when data change example

useEffect(() => {
  // Reset carousel position (view was recycled for another item),method move to index inside carousel. 
  carouselRef.current.moveToIndex(0);
}, [item.id]);

[galibov]

I encountered a similar issue and resolved it with the following approach:

const flashListRef = useRef(null);

useEffect(() => {
  flashListRef.current?.scrollToOffset({ offset: 0, animated: false });

//items as example you can use id prop or something better
}, [items]);

// ... other code ...

return (
    <FlashList
      ref={flashListRef}
      // ... other props ...
    />
);

[neaRRRRR]

Giving key for Carousel component solved the issue for me

[ClemCornet]

@neaRRRRR Thanks a lot for your solution, it appears to be working without any side effects!

[jspizziri]

@ClemCornet I actually think this should be reopened as it seems like something that would ideally be handled in FlashList. AFAIK, using a key isn't ideal as that is against the recommendations of flashlist as it causes another render and reduces performance.

Here's the homebrewed solution that I came up with:

// OuterList is a vertically scrolling list which. Each item will be a horizontally scrolling nested list
const OuterList = () => {
  // ...
  const scrollMap = useRef<Record<string, number | undefined>>({});
  
  return (
    <FlashList
      data={items}
      extraData={scrollMap}
      renderItem={(props) => (
        <InnerList
          item={props.item}
          scrollMap={props.extraData.current}
        />
      )}
    />
  )
}

// The nested, horizontally scrolling list. Recieves the `scrollMap`, updates it, and scrolls appropriately
const InnerList = ({
  item,
  scrollMap,
}: { 
  item: any;
  scrollMap: Record<string, number | undefined>;
}) => {
  // ...
  const flatListRef = useRef<FlashList<CollectionItem> | null>();
  const lastItem = useRef(item);

  // FlashList recycles components but it doesn't properly update their scroll
  // position. So we reset the scroll position here to the last known position.
  // This approach avoids an additional render from `useEffect`.
  if (lastItem.current.id !== item.id) {
    lastItem.current = item.id;
    const position = scrollMap[item.id] || 0;

    console.log(">>>>>>> scrolling to offset", item.id, position);
    flatListRef.current?.scrollToOffset({ offset: position, animated: false });
  }

  return (
    <FlashList
      ref={r => flatListRef.current = r}
      horizontal
      data={item.someData}
      extraData={scrollMap.current}
      renderItem={() => {
        // Item to render
      }}
      // NOTE: we need to track the scroll position
      onScroll={({ nativeEvent: { contentOffset: { x }}}) => {
        scrollMap[item.id] = x;
      }}
    />
  )
}

Anyways, this seems to be working for now. It'd be great if FlashList could take care of this internally somehow.

EDIT: this approach could also be used for a nested carousel, you'd just replace the scrollMap with a map of your carousel positions.

[alyosha]

+1 to reopen 🙏

[naqvitalha]

While we can automatically scroll to offset 0 internally, it may not be the best idea. In a lot of cases people generate new data array across renders and there's no reliable way to predict that the list has been recycled inside a parent list or due to some manipulation by the dev. My suggestion is to just scroll to 0 when the data array changes and make sure data is memoized correctly.