gorhom / react-native-bottom-sheet

A performant interactive bottom sheet with fully configurable options 🚀
https://ui.gorhom.dev/components/bottom-sheet
MIT License
6.69k stars 741 forks source link

[v4] bugs with prop enableDynamicSizing={true} #1859

Closed kawasakime closed 2 days ago

kawasakime commented 3 months ago

Bug

  1. If you set the enableDynamicSizing parameter to true, then the backdrop appears sharply, there is no smoothness, like snapPoints.
  2. if the parameter is set to true and if there is an input (BottomSheetTextInput) with autofocus inside the bottom sheet, then the panel does not open - the keyboard appears for a moment, then disappears, while the bottom sheet itself does not appear (only IOS)
  3. After it became impossible to work with enableDynamicSizing={true}, I set the value to false and set the size via snapPoints. I discovered a bug that if the panel is less than or equal to 310 pixels, then when you focus on the input, the bottom sheet immediately closes (only Android)

Environment info

Library Version
@gorhom/bottom-sheet 4.6.3
react-native 0.72.14
react-native-reanimated 3.11.0
react-native-gesture-handler 2.16.2

Steps To Reproduce

Reproducible sample code

  const renderBackdrop = useCallback((backdropProps) => (
    <BottomSheetBackdrop
      {...backdropProps}
      disappearsOnIndex={-1}
      appearsOnIndex={0}
    />
  ), []);
    <BottomSheet
      ref={bottomSheetRef}
      onClose={onClose}
      topInset={100}
      backgroundStyle={{ backgroundColor: isDark ? colors.backgroundDark : colors.backgroundLight }}
      handleIndicatorStyle={{ backgroundColor: isDark ? colors.backgroundLight : colors.backgroundDark }}
      enablePanDownToClose={true}
      backdropComponent={renderBackdrop}
      enableContentPanningGesture={true}
      enableDynamicSizing={!!props.enableDynamicSizing}
      snapPoints={props.enableDynamicSizing ? null : points}
      keyboardBehavior='interactive'
      keyboardBlurBehavior='restore'
      android_keyboardInputMode='adjustResize'
      {...props}
    >
      {children}
    </BottomSheet>
github-actions[bot] commented 3 months ago

@kawasakime: hello! :wave:

This issue is being automatically closed because it does not follow the issue template.

cfragkos commented 3 months ago

I can confirm 3. Please look it up

kawasakime commented 3 months ago

+1 bug found, if the bottom sheet is open, next then open the modal component and after closing the modal component right away closing the bottom sheet (using method .close() or .forceClose() no difference), and as a result with a high probability bottom sheet will not close (there will be a closing animation, but will immediately open again)

github-actions[bot] commented 1 month ago

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.

bleszerd commented 1 month ago

I confirm that number 2 is not exclusive to iOS; I am experiencing the same behavior on Android.

github-actions[bot] commented 1 week ago

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.

github-actions[bot] commented 2 days ago

This issue was closed because it has been stalled for 5 days with no activity.