react-native-reanimated-carousel
react-native-reanimated-carousel copied to clipboard
[sponsored] customAnimation callback is not called when customAnimation changes
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:
- Using Android
- Create a custom animation callback function that depends on another animated value (will refer to this as X)
- Update the animated value (X) using useEffect, depending on a prop
- 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