When to call react-native's LayoutAnimation.configureNext?

[jzxchiang1]

Imagine a mobile UI that displays a list of todos, where these todos are fetched from a backend using react-query.

Let's say the useQuery has a refetchInterval set, so every 2 seconds the backend will be polled for any new or deleted todos.

LayoutAnimation is a magical library that lets us animate the creation and deletion of UI elements in react-native. However... the configureNext function needs to be called prior to the rendering of the created/deleted elements.

Where can we call this in react-query? It's not clear to me when and how often a useQuery hook triggers a re-render. I tried calling LayoutAnimation.configureNext inside select, but it was too early. I also tried inside onSuccess but it was too late. I tried calling it in a useEffect (and useLayoutEffect) hook with query.data as a dependency but neither of these methods worked.

The only thing that worked was calling it inside the render function itself, but that leads to excessive calls and excessive animations.

Any thoughts? Thanks.

[TkDodo]

can you show how you would do this without react-query with that library? That would likely help me understand how it works, and then we can hopefully "port" it to react-query :)

[jzxchiang1]

You would typically call configureNext right before updating state in a callback.

For example, this is from the RN docs:

const App = () => {
  const [boxPosition, setBoxPosition] = useState("left");

  const toggleBox = () => {
    LayoutAnimation.configureNext(
      LayoutAnimation.create(
        500,
        LayoutAnimation.Types.spring,
        LayoutAnimation.Properties.scaleXY
      )
    );
    setBoxPosition(boxPosition === "left" ? "right" : "left");
  };

  return (
    <View style={styles.container}>
      <View style={styles.buttonContainer}>
        <Button title="Toggle Layout" onPress={toggleBox} />
      </View>
      <View
        style={[styles.box, boxPosition === "left" ? null : styles.moveRight]}
      />
    </View>
  );
}

[TkDodo]

hm, no idea how we could do that, as state updates are internal to react-query. Maybe @arnaudbzn has some experience with LayoutAnimation ?

[dkulakov]

Hello, here is our example, works like a charm:

import React, { PropsWithChildren, useMemo } from 'react';
import Animated, { FadeOut, Layout } from 'react-native-reanimated';
/*
  TODO: Animated.FlatList from react-native-reanimated has different API.
  In this case, we have preferred to use the FlatList from react-native.
/*
import { FlatList } from 'react-native';

const AnimatedFlatList: typeof Animated.FlatList = Animated.createAnimatedComponent(FlatList) as any;

const wishlist = useWishlist(); // useQuery()
const deleteFromWishlist = useDeleteFromWishlist(); // useMutation()

const CellRenderer = useMemo(
  () =>
    ({ children }: PropsWithChildren<unknown>) =>
      (
        <Animated.View
          layout={Layout.delay(300)}
          exiting={FadeOut.duration(300)}
        >
          {children}
        </Animated.View>
      ),
  [],
);

<AnimatedFlatList
  data={wishlist.data}
  keyExtractor={(item) => item.key}
  CellRendererComponent={CellRenderer}
  renderItem={({ item }) => (
    <Item
      product={item.product}
      onRemove={() => {
        deleteFromWishlist.mutate(item.key);
      }}
    />
  )}
/>

[ravindraguptacapgemini]

@dkulakov how to do the same with class components?