Reanimated Layout Transitions with TanStack Query

[thecoorum]

Hey everybody!

So, if I understood correctly the main purpose of the prepareForLayoutAnimationRender is to disable the recycling for the next render? I was wondering how and when I can call this method if I'm using the TanStack Query (infinite query if to be precise) for fetching and caching the data. Any suggestions are welcome and appreciated!

Also, is this the correct CellRendererComponent definition if I want to support Layout Transitions on inserts and removals?

const CellRenderer = (props: any) => (
  <Animated.View
    {...props}
    entering={SpringFadeIn}
    exiting={SpringFadeOut}
    layout={Layout}
  />
);

[lsarni]

Hey, did you figure out how to do this?

[thecoorum]

@lsarni hey, yeah, but not sure if this is the most correct approach. Basically, I'm just calling prepareForLayoutAnimationRender on infinite query data change in useMemo. Here is how it's implemented in my code

export const useSortedQueryData = (
  query: InfiniteQueryResult,
  ref: AnimatedRef<FlashListRef<ListInterface>>
) => {
  return useMemo(() => {
    ref.current?.prepareForLayoutAnimationRender();

    const data = transformInfiniteData(query);

    return data.sort((a, b) => {
      if ("__type" in a && "__type" in b) {
        return 0;
      }

      if ("__type" in a) {
        return 1;
      }

      if ("__type" in b) {
        return -1;
      }

      return new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime();
    });
  }, [query]);
};

Hope that will help you 🙂

P.S. transformInfiniteData here is just for flattening the infinite query and inserting skeleton items if the query is loading
P.P.S. The sorting is of course also optional 😄