Active Dot Style behaves differently on setting height and widtth

[sinanverve7]

Describe the bug
My active dot has different width and height than other dots.but when i set width and height doesnot have any effect on pagination dots. instead all pagination dots takes active color
To Reproduce

  const photosLength = photos?.length;
  return (
    <>
      <Carousel
        ref={ref}
        onConfigurePanGesture={(gestureChain) => {
          gestureChain.activeOffsetX([-10, 10]);
        }}
        style={{
          height: "100%",
          width: "100%",
          overflow: "hidden",
        }}
        loop={false}
        width={widthPercentageToDP(100)}
        height={parentHeight}
        data={photos}
        key={photos.length}
        onProgressChange={progress}
        renderItem={RenderItem}
      />
      <Pagination.Basic
        progress={progress}
        data={photosLength > 1 ? [...new Array(photosLength).keys()] : []}
        dotStyle={{
          height: 8,
          width: 8,
          marginRight: 8,
          borderRadius: 3,
          backgroundColor: "#ffffff80",
        }}
        activeDotStyle={{
          backgroundColor: "#ff0004",
          height: 3,
          width: 20,
        }}
        containerStyle={{
          gap: 5,
          marginTop: 10,
          position: "absolute",
          bottom: 18,
        }}
      />
    </>
  );

Expected behavior
Active dot item need to be with specified width and height

Screenshots
If applicable, add screenshots to help explain your problem.

All 2 carousel has same dot color which active dot color ( width and height not applied )

**Slided to second slide active dot color correctly applying but still height and width didn't apply **

Versions (please complete the following information):

• react: v18.2.0
• react-native: v0.74.3
• react-native-reanimated: v3.10.1
• react-native-reanimated-carousel: v4.0.0-alpha.12
• react-native-gesture-handler: v2.16.1

Smartphone (please complete the following information):

• Device: iPhone 15 Simulator
• OS: iOS 17.5

Additional context
Add any other context about the problem here.

[dosubot]

Hey @sinanverve7! I'm here to help you with the issue you've encountered. Let's tackle this together!

The issue you're experiencing with the activeDotStyle not affecting the width and height of the pagination dots is due to the fact that the width and height properties from activeDotStyle are not currently being used in the component. The code has a commented-out section that mentions a future implementation for changing the size of the active dot with animation, but it is not currently active.

Here is the relevant part of the code:

/**
 * TODO: Keep this for future implementation
 * Used to change the size of the active dot with animation
 */
// const animatedSize = {
//   width: activeDotStyle?.width,
//   height: activeDotStyle?.height,
// };

Since this part is commented out, the width and height from activeDotStyle are not applied. Only the backgroundColor and other styles are applied from activeDotStyle.

To fix this, you would need to uncomment and properly implement the animatedSize logic to include the width and height from activeDotStyle.

Additionally, ensure that activeDotStyle is correctly passed and includes the desired width and height properties. The PaginationItem component uses the useAnimatedStyle hook to interpolate the styles based on the animation value. Here is the relevant part of the PaginationItem component:

const animStyle = useAnimatedStyle(() => {
    const {
      width = size || defaultDotSize,
      height = size || defaultDotSize,
      borderRadius,
      backgroundColor = "#FFF",
      ...restDotStyle
    } = dotStyle ?? {};
    const {
      width: activeWidth = width,
      height: activeHeight = height,
      borderRadius: activeBorderRadius,
      backgroundColor: activeBackgroundColor = "#000",
      ...restActiveDotStyle
    } = activeDotStyle ?? {};
    let val = Math.abs(animValue?.value - index);
    if (index === 0 && animValue?.value > count - 1)
      val = Math.abs(animValue?.value - count);

    const inputRange = [0, 1, 2];
    const restStyle = (val === 0 ? restActiveDotStyle : restDotStyle) ?? {};

    return {
      width: interpolate(
        val,
        inputRange,
        [activeWidth, width, width],
        Extrapolation.CLAMP,
      ),
      height: interpolate(
        val,
        inputRange,
        [activeHeight, height, height],
        Extrapolation.CLAMP,
      ),
      borderRadius: interpolate(
        val,
        inputRange,
        [activeBorderRadius ?? borderRadius ?? 0, borderRadius ?? 0, borderRadius ?? 0],
        Extrapolation.CLAMP,
      ),
      backgroundColor: interpolateColor(val, inputRange, [
        activeBackgroundColor,
        backgroundColor,
        backgroundColor,
      ]),
      ...restStyle,
      ...(customReanimatedStyleRef.value ?? {}),
      transform: [
        ...(restStyle?.transform ?? []),
        ...(customReanimatedStyleRef.value?.transform ?? []),
      ],
    };
  }, [
    animValue,
    index,
    count,
    horizontal,
    dotStyle,
    activeDotStyle,
    customReanimatedStyle,
  ]);

Ensure that the width and height properties in activeDotStyle are numbers and not strings. This will help in correctly applying the styles to the active pagination dot ^[1][2][3].

To continue talking to Dosu, mention @dosu.

[gitteraz]

Facing the same limitation. I used a parent view with transform: [{ scale: 0.5 }] to reduce dots size in half.