react-native-reanimated-carousel icon indicating copy to clipboard operation
react-native-reanimated-carousel copied to clipboard

[sponsored] customAnimation callback is not called when customAnimation changes

Open altarrok opened this issue 1 year ago • 0 comments

Describe the bug When customAnimation callback is changed, the Carousel does not call customAnimation to get updated values. I am trying to make a scaling animation when the carousel is focused. Here is my code:

    const focusedItemScale = useSharedValue(0.8);

    useEffect(() => {
        focusedItemScale.value = withTiming(carouselFocused ? 1 : 0.8, { duration: 1000, easing: Easing.linear });
    }, [carouselFocused]);

    const customAnimation = useCallback(
        (value: number) => {
            'worklet';

            const zIndex = interpolate(value, [-1, 0, 1], [10, 20, 30]);
            const translateX = interpolate(
                value,
                [-1, 0, 1],
                [-itemGap, 0, itemGap],
            ) + centerOffset;

            const scale = interpolate(
                value,
                [-1, 0, 1],
                [0.8, focusedItemScale.value, 0.8],
            );

            return {
                transform: [{ translateX }, { scale }],
                zIndex,
            };
        },
        [focusedItemScale.value],
    );

So the callback is updated when focusedItemScale.value changes, which does so through a timing animation, when the carouselFocused prop is changed. I would expect the Carousel component to call the customAnimation callback when it changes, to get updated values.

To Reproduce Steps to reproduce the behavior:

  1. Using Android
  2. Create a custom animation callback function that depends on another animated value (will refer to this as X)
  3. Update the animated value (X) using useEffect, depending on a prop
  4. Observe that when the animated value (X) is updated, the changes are not reflected to the Carousel

Expected behavior I would expect the Carousel to call the customAnimation callback whenever it changes to get updated values

Versions (please complete the following information):

  • react: v18.2.0
  • react-native: v0.71.7
  • react-native-reanimated: v2.14.4
  • react-native-reanimated-carousel: v3.3.2
  • react-native-gesture-handler: v2.9.0

Smartphone (please complete the following information):

  • Device: Pixel 6
  • OS: Android v13

altarrok avatar Jun 01 '23 15:06 altarrok