After upgrading to EXPO SDK 54, pagination components looks so weird.

[elenitaex5]

Describe the bug
Hi! I'm using carousel with Expo and using it in Android, iOS and web, but after upgrading to EXPO SDK 54, reanimated v4 and worklets, Pagination component looks weird and do not respect my width and height measures.
In web is so thick and change width active one and not and in devices change to be very thick.

Image example in web.

A clear and concise description of what the bug is. If you intend to submit a PR for this issue, tell us in the description. Thanks!

To Reproduce
Include this pagination custom in your web:

<Pagination.Custom
          progress={progress}
          data={data}
          size={20}
          dotStyle={{
            minWidth: 10,
            flex: 1,
            height: 6,
            borderRadius: 3,
            backgroundColor: colors.white,
            borderWidth: 1,
            borderColor: colorByQuestionType
          }}
          activeDotStyle={{
            borderRadius: 3,
            width: 40,
            height: 6,
            overflow: 'hidden',
            backgroundColor: colorByQuestionType
          }}
          containerStyle={{
            width: 200,
            gap: 8,
            alignItems: 'center'
          }}
          horizontal
          customReanimatedStyle={(progress, index, length) => {
            let val = Math.abs(progress - index)
            if (index === 0 && progress > length - 1) {
              val = Math.abs(progress - length)
            }

            return {
              transform: [
                {
                  translateY: interpolate(val, [0, 1], [0, 0], Extrapolation.CLAMP)
                }
              ]
            }
          }}
          renderItem={(_, index) => (
            <View className="flex-1 shadow-abi-soft" style={{ backgroundColor: index <= progress.value ? colorByQuestionType : 'white' }} />
          )}
        />

Expected behavior
Respect the sizes include in custom styles.

Screenshots

Versions (please complete the following information):

• react: v19.1.0
• react-native: v0.81.4
• react-native-reanimated: ~4.1.0
• react-native-reanimated-carousel: 5.0.0-beta.0 (also happens in last v4.X with same other dependencies)
• react-native-gesture-handler: ~2.28.0

Smartphone (please complete the following information):

• Device: Mac Chrome (also change in iphone 15)
• OS: [e.g. iOS8.1]
• Browser all browsers
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

[dosubot]

Hi @elenitaex5! I'm Dosu and I’m helping the react-native-reanimated-carousel team.

The Pagination.Custom component calculates its sizing by taking the maximum of the size, dotStyle.width, and activeDotStyle.width (and similarly for height), then sets these as minWidth and minHeight on the container. It also merges your containerStyle and applies flexbox styles, which can interact unexpectedly with custom styles—especially on web, where flexbox and style propagation can differ from native platforms. If you use flex: 1 in your dot styles, this can cause the dots to stretch and appear thicker than expected, particularly when combined with explicit width or minWidth values. Try removing flex: 1 from your dotStyle and rely on explicit width and height for both dot and activeDot styles to get more predictable results. Also, ensure all sizing values are numbers, not strings, as the component enforces this strictly and may throw errors otherwise. These changes in dynamic sizing and style merging were introduced with the recent upgrade for Expo SDK 54 and Reanimated v4 support, which may explain the regression in appearance you’re seeing on web and devices [source][release notes].

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}    

[elenitaex5]

Closed, thanks to this help I resolve the bug changing the style to fit new design.