Provide Hooks Example in docs and in Reanimated Library with most used animations

[luancurti]

Like this example:

import { useCallback, useEffect, useState } from 'react';
import type { LayoutChangeEvent } from 'react-native';
import {
  Easing,
  EasingFunction,
  cancelAnimation,
  useAnimatedStyle,
  useSharedValue,
  withTiming,
} from 'react-native-reanimated';

type CollapsibleConfig = {
  heightOffset?: number;
  duration?: number;
  easing?: EasingFunction;
  isVisible: boolean;
};

export function useCollapsible({
  isVisible,
  heightOffset = 0,
  duration = 300,
  easing = Easing.linear,
}: CollapsibleConfig) {
  const [componentHeight, setComponentHeight] = useState(0);
  const height = useSharedValue(heightOffset);

  useEffect(() => {
    cancelAnimation(height);
    if (isVisible) {
      height.value = withTiming(componentHeight, { duration, easing });
    } else {
      height.value = withTiming(heightOffset, { duration, easing });
    }
  }, [componentHeight, height, duration, heightOffset, isVisible, easing]);

  const onLayout = useCallback(
    (event: LayoutChangeEvent) => {
      const measuredHeight = event.nativeEvent.layout.height;

      if (componentHeight !== measuredHeight) {
        setComponentHeight(measuredHeight);
      }
    },
    [componentHeight]
  );

  const animatedStyles = useAnimatedStyle(() => ({
    height: height.value,
  }));

  return {
    onLayout,
    height,
    animatedStyles,
    maxHeight: componentHeight,
  };
}

[pdrfranca]

Hi @luancurti,

Thanks for sharing this hook — it's a great start for building reusable collapsible animations with Reanimated!

I have a few suggestions that might help improve robustness and flexibility:

1. Opacity animation: In addition to animating the height, you might consider animating the opacity for smoother transitions.
2. Completion callback: Allowing an optional onAnimationEnd callback could be useful for running actions after the animation finishes.
3. Performance tweaks: You could memoize callbacks and avoid unnecessary re-renders by optimizing with useMemo and useCallback.

Here’s a modified version of your useCollapsible hook with those suggestions:

import { useCallback, useEffect, useState } from 'react';
import type { LayoutChangeEvent } from 'react-native';
import {
  Easing,
  EasingFunction,
  cancelAnimation,
  useAnimatedStyle,
  useSharedValue,
  withTiming,
} from 'react-native-reanimated';

type CollapsibleConfig = {
  heightOffset?: number;
  duration?: number;
  easing?: EasingFunction;
  isVisible: boolean;
  onAnimationEnd?: () => void;
};

export function useCollapsible({
  isVisible,
  heightOffset = 0,
  duration = 300,
  easing = Easing.linear,
  onAnimationEnd,
}: CollapsibleConfig) {
  const [componentHeight, setComponentHeight] = useState(0);
  const height = useSharedValue(0);
  const opacity = useSharedValue(0);

  const onLayout = useCallback((event: LayoutChangeEvent) => {
    const { height: layoutHeight } = event.nativeEvent.layout;
    setComponentHeight(layoutHeight);
  }, []);

  useEffect(() => {
    height.value = withTiming(
      isVisible ? componentHeight + heightOffset : 0,
      { duration, easing },
      () => {
        if (onAnimationEnd) {
          onAnimationEnd();
        }
      }
    );

    opacity.value = withTiming(isVisible ? 1 : 0, { duration, easing });

    return () => {
      cancelAnimation(height);
      cancelAnimation(opacity);
    };
  }, [isVisible, componentHeight, heightOffset, duration, easing, onAnimationEnd]);

  const animatedStyle = useAnimatedStyle(() => ({
    height: height.value,
    opacity: opacity.value,
    overflow: 'hidden',
  }));

  return { animatedStyle, onLayout };
}

Let me know what you think — happy to iterate together on this!

[luancurti]

Thank you for your suggestions but my idea is to provide this hooks in the Reanimated library and in the docs. What do you think?

[pdrfranca]

Thank you for the clarification! I think that would be a great addition to the library. Having these hooks officially supported and documented in Reanimated would definitely improve the developer experience and make these patterns more accessible to the community. Looking forward to seeing how it evolves!

[MatiPl01]

Hey guys! I think that Reanimated shouldn't implement too many helper hooks and functions and the library will grow in size (and it is already quite large). I think that creating a separate library with useful hooks and utils might be a better idea than adding everything directly to Reanimated.

You can always create your own library with utilities and share it with others if you want to 😄.

[MatiPl01]

A few remarks from me about your implementation:

1. You don't have to call cancelAnimation manually, as the useSharedValue hook already performs the necessary cleanup and calls cancelAnimation automatically for you when the component is unmounted,
2. You should avoid unnecessary re-renders, like updating the componentHeight in the React's state as you do - it is better to create a SharedValue and update it instead - to react on the SharedValue changes, you would need to use the useAnimatedReaction hook instead of the useEffect