[Bug]: dynamicSzing doesn't work in Android with Bottom Sheet Modal

[zhrgns]

Version

v5

Reanimated Version

v3

Gesture Handler Version

v2

Platforms

Android

What happened?

I have an issue with Bottom Sheet Modal on Android. Created a component for CustomBottomSheet. Then Used Provider in screen where i want to call my custom sheet component. And when i click to open sheet, sheet extends to full screen size, it happens only in android simulator. Here are snapshots.

Reproduction steps

    type Props = {
  icon?: FC<SvgProps> | string;
  iconColor?: string;
  title: string;
  subtitle?: string;
  iconContainerStyle?: ViewStyle;
  children?: React.ReactNode;
  button1Props?: ButtonProps;
  button2Props?: ButtonProps;
  enablePanDownToClose?: boolean;
  disableDraggableIcon?: boolean;
  onChange?: (...args: any) => void;
} & Omit<BottomSheetModalProps, 'children'>;

const DynamicBottomSheet = React.forwardRef<RefObject<any>, Props>(
  (
    {
      icon: Icon,
      iconColor,
      title,
      subtitle,
      iconContainerStyle,
      children,
      button1Props,
      button2Props,
      enablePanDownToClose = true,
      disableDraggableIcon = false,
      onChange,
      ...rest
    },
    ref: Ref<any> | undefined
  ) => {
    const { bottomWithPadding } = useSafeArea();

    const renderBackdrop = useCallback(
      (props: any) => (
        <BottomSheetBackdrop
          {...props}
          disappearsOnIndex={-1}
          appearsOnIndex={1}
        />
      ),
      []
    );

    return (
      <BottomSheetModal
        ref={ref}
        onChange={onChange}
        enablePanDownToClose={enablePanDownToClose}
        backdropComponent={renderBackdrop}
        handleIndicatorStyle={
          disableDraggableIcon
            ? styles.disabledDraggableIcon
            : styles.draggableIcon
        }
        {...rest}>
        <BottomSheetView
          style={[
            styles.contentContainer,
            paddingBottom(bottomWithPadding(24)),
            { maxHeight: 330 },
          ]}>
          {Icon ? (
            <View style={[styles.icon, iconContainerStyle]}>
              {typeof Icon === 'string' &&
              Icon?.toString().startsWith('http') ? (
                <Image
                  svgType="normal"
                  image={Icon}
                  style={[width(24), height(24)]}
                />
              ) : (
                <Icon height={24} width={24} color={iconColor} />
              )}
            </View>
          ) : null}
          <Text pl semibold style={marginTop(20)}>
            {title}
          </Text>
          {subtitle ? (
            <Text ps regular style={styles.subText}>
              {subtitle}
            </Text>
          ) : null}
          {children}
          <View style={marginTop(24)}>
            {button1Props ? <Button size="l" {...button1Props} /> : null}
            {button2Props ? (
              <>
                <Separator size={12} type="vertical" />
                <Button size="l" {...button2Props} />
              </>
            ) : null}
          </View>
        </BottomSheetView>
      </BottomSheetModal>
    );
  }
);

export default DynamicBottomSheet;

Reproduction sample

https://snack.expo.dev/6HM9hNjYc88gceakoz9bN

Relevant log output

No response

[zhrgns]

i had a style named contentContainer which includes flex:1, it causes this issue in android. removed and fixed this bug.

[github-actions]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.