[Question] Best practice for using Animated nodes in functional components / hooks

When using animated nodes in functional components or inside custom hooks, simply assigning them to a variable (in every render) seems to work fine, but is there a significant cost or other issue to it?

I started out using useMemo like this, because I thought that would match what I was doing before with class fields:

const saw = useMemo(() => Animated.sub(1, ramp), [ramp]);

But maybe it’s not neccessary at all?

[alwex]

Thanks to this video https://www.youtube.com/watch?v=1Q9efh7OcR8 from William Candillon, I managed to get my head around using the library with functional components. Here is my solution highly inspired from the video.

// ...
import Animated, { Easing } from "react-native-reanimated";
import { runTiming, bInterpolate } from "react-native-redash";
import { useMemoOne } from "use-memo-one";

const {
  set,
  Value,
  Clock,
  useCode
};

const MyComponent:React.FC<Props> = ({isVisible, action}) => {
  // using useMemoOne from use-memo-one
  const { animation, clock } = useMemoOne(
    () => ({
      animation: new Value(isVisible ? 0 : 1),
      clock: new Clock()
    }),
    [isVisible]
  );

  useCode(
    set(
      animation,
      // runTiming is a helper from react-native-redash
      runTiming(clock, animation, {
        toValue: selected ? 1 : 0,
        duration: 250,
        easing: Easing.inOut(Easing.ease)
      })
    ),
    [animation]
  );

  // interpolated value, bInterpolate is a helper from react-native-redash
  const transY = bInterpolate(animation, -20, 0);

  return (
    <TouchableOpacity onPress={action}>
      <Animated.View
        style={{ transform: [{ translateY: transY }] }}
      >
        <Text>I slide down or up based on isVisible value</Text>
      </Animated.View>
    </TouchableOpacity>
  );
}

when isVisible change, the animation is restarted and the animation value get interpolated again in the other direction, from 0 to 1, or 1 to 0 depending on the visibility flag.

I hope this would help people having difficulty with functional component implementation and reanimated.

[Ashkan-Oliaie]

@alwex What about gesture based animations ? because the state change at the middle of running animations seems to interrupt the animation 🤕
or at least in my case 😄 before I get to know useMemoOne , I used to define some animation values outside of the component function so they won’t get rerender and reset every time state changes