[Bug]: Style arrays with 3+ elements are not fully applied

[pkhc4025]

Version

v5

Reanimated Version

v3

Gesture Handler Version

v2

Platforms

iOS, Android

What happened?

There is an issue when passing an array of three or more style objects to style-related props in certain components:

• For scrollable components like BottomSheetScrollView, the problem occurs when using the contentContainerStyle prop.
• For BottomSheetView, the problem occurs when using the style prop.

// ✅ This works
contentContainerStyle={style}

// ✅ This also works
contentContainerStyle={[style1, style2]}

// ❌ This does NOT work — only the first two styles are applied
contentContainerStyle={[style1, style2, style3]}

After inspecting the source code, the issue appears to come from how the style is flattened inside the useBottomSheetContentContainerStyle hook.
Currently, it uses StyleSheet.compose(..._style), which only supports composing two style objects. When more than two are passed, the extras are silently ignored.

As a result, any additional styles (such as those injected dynamically or conditionally) are not applied, which may also cause layout issues, including incorrect paddingBottom calculation inside the hook.

This can be fixed by using StyleSheet.flatten() instead, which safely handles arrays of any length:

// ❌ current implementation (incorrect with more than two styles)
const flattenStyle = useMemo<ViewStyle>(() => {
  return !_style
    ? {}
    : Array.isArray(_style)
      ? // @ts-ignore
        (StyleSheet.compose(..._style) as ViewStyle)
      : (_style as ViewStyle);
}, [_style]);

// ✅ suggested fix
const flattenStyle = useMemo<ViewStyle>(() => {
  return StyleSheet.flatten(_style);
}, [_style]);

Reproduction steps

1. Install @gorhom/bottom-sheet and set up a basic BottomSheetModal.
2. Use one of the scrollable components, such as BottomSheetScrollView.
3. Pass a contentContainerStyle prop as an array with three or more style objects.

Example:

<BottomSheet>
  <BottomSheetScrollView
    contentContainerStyle={[
      { paddingTop: 20 },
      { backgroundColor: 'green' },
      { backgroundColor: 'red' }, // <- This will NOT be applied
    ]}
  >
    <Text>Example</Text>
  </BottomSheetScrollView>
</BottomSheet>

4. Observe that only the first two styles are applied. The third (e.g., backgroundColor) is ignored.

Reproduction sample

https://snack.expo.dev/@pkhc4025/bottom-sheet---style-issue

Relevant log output