-
Notifications
You must be signed in to change notification settings - Fork 365
-
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} /> );
Beta Was this translation helpful? Give feedback.
All reactions
Replies: 1 comment 1 reply
-
Hey, did you figure out how to do this?
Beta Was this translation helpful? Give feedback.
All reactions
-
@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 😄
Beta Was this translation helpful? Give feedback.