Change width for pagination dot current index

[Splicer97]

Hello! I use this example for pagination dots https://github.com/dohooo/react-native-reanimated-carousel/blob/fae0fb7d8e8d6afb03247e55f12fe57dacc57859/exampleExpo/src/parallax/index.tsx#L56 but I don't know, how can I change size (width or height) slowly for my pagination dots with current index. This is a picture to understand my problem.

[Splicer97]

I found only this solution:

const PaginationItem: FC<{ index: number; length: number; animValue: Animated.SharedValue; }> = ({animValue, index, length}) => { const width = 28; const animatedWidth = useAnimatedStyle(() => { let dotWidth = withTiming( Math.round(animValue.value) === index ? 28 : 14, ); if (index === 0 && Math.round(animValue.value) > length - 1) { dotWidth = 28; } return { width: dotWidth, }; }); const animStyle = useAnimatedStyle(() => { let inputRange = [index - 1, index, index + 1]; let outputRange = [-width, 0, width]; if (index === 0 && animValue?.value > length - 1) { inputRange = [length - 1, length, length + 1]; outputRange = [-width, 0, width]; } return { transform: [ { translateX: interpolate( animValue?.value, inputRange, outputRange, Extrapolate.CLAMP, ), }, ], }; }, [animValue, index, length]); return ( <Animated.View style={[styles.animDot, animatedWidth]}> <Animated.View style={[styles.animView, animStyle]} /> </Animated.View> ); };

[NadeemKhanFh]

@dohooo can you please implement this.

[minhchienwikipedia]

@NadeemKhanFh you can check my PR https://github.com/dohooo/react-native-reanimated-carousel/pull/164/files I don't know why Dohooo (owner) don't accept it to this lib

[dohooo]

See this example for more details: https://reanimated-carousel.dev/usage