Action sheet bottom space sometimes

[MoRa2297]

Sometimes when I open the Action sheet it gives me some space on the button and sometimes it doesn't give me. The yellow border in the video should stay ever at the bottom of the screen....

<ActionSheet
      drawUnderStatusBar={true}
      ref={actionSheetRef}
      closable={true}
      backgroundInteractionEnabled={false}
      // useBottomSafeAreaPadding={isKeyboardOpen}
      useBottomSafeAreaPadding={true}
      closeOnTouchBackdrop
      // gestureEnabled
      isModal={false}
      defaultOverlayOpacity={0.2}
      containerStyle={{
        display: 'flex',
        // flexDirection: 'column',
        // backgroundColor: theme['color-primary-BK'],
        backgroundColor: 'red',
        borderTopLeftRadius: GLOBAL_BORDER_RADIUS,
        borderTopRightRadius: GLOBAL_BORDER_RADIUS,
        borderColor: 'yellow',
        borderWidth: 1,
        paddingBottom: 0,
      }}
      keyboardHandlerEnabled={true}>
      <CategoryForm category={{}} />
    </ActionSheet>

This is the code of how I have implemented it.

I tried also to remove the CategoryForm component but it isn't the cause of the issue. The problem is in the Action sheet.

Pls help me!

https://github.com/ammarahm-ed/react-native-actions-sheet/assets/17024202/473b14a7-2e0f-47aa-ad94-c091b730a8f1

[CallbackDan]

Hey @MoRa2297 did you find a fix for this ?

[GreedyWhale]

The same problem occurs whenever isModal={false} is set

[Malexs]

This patch fixed an issue for me, but basically not even close to guarantee it works in 100% of cases, so don't blame too much :)

Btw, tested for action sheets with IsModal flag

diff --git a/node_modules/react-native-actions-sheet/dist/src/index.js b/node_modules/react-native-actions-sheet/dist/src/index.js
index 1215a5c..ef58935 100644
--- a/node_modules/react-native-actions-sheet/dist/src/index.js
+++ b/node_modules/react-native-actions-sheet/dist/src/index.js
@@ -227,7 +227,7 @@ export default forwardRef(function ActionSheet(_a, ref) {
     var onDeviceLayoutReset = useRef({});
     var onDeviceLayout = React.useCallback(function (event) {
         var _a;
-        var windowDimensions = Dimensions.get('window');
+        var windowDimensions = Dimensions.get('screen');
         var isPortraitMode = windowDimensions.height > windowDimensions.width;
         if (isOrientationChanging.current)
             return;
@@ -560,16 +560,17 @@ export default forwardRef(function ActionSheet(_a, ref) {
             ? safeAreaPaddingTop.current || 0
             : StatusBar.currentHeight || 0;
         var windowDimensions = Dimensions.get('window');
-        var height = windowDimensions.height - safeMarginFromTop;
+        var height = dimensions.height ?? windowDimensions.height - safeMarginFromTop;
         var orientationChanged = dimensions.portrait !==
             windowDimensions.width < windowDimensions.height;
         if (orientationChanged)
             isOrientationChanging.current = true;
         (_a = deviceContainerRef.current) === null || _a === void 0 ? void 0 : _a.setNativeProps({
             style: {
-                height: Dimensions.get('screen').height - safeMarginFromTop
+                height
             }
         });
+
         setDimensions(function (dim) {
             return __assign(__assign({}, dim), { height: height, portrait: windowDimensions.width < windowDimensions.height });
         });
@@ -632,6 +633,7 @@ export default forwardRef(function ActionSheet(_a, ref) {
         animations.translateY,
         animations.underlayTranslateY,
         dimensions.portrait,
+        dimensions.height
     ]);
     var getRef = useCallback(function () { return ({
         show: function () {
@@ -811,6 +813,7 @@ export default forwardRef(function ActionSheet(_a, ref) {
         return topPadding;
     };
     var paddingBottom = getPaddingBottom() || 0;
+
     return (<>
         {Platform.OS === 'ios' && !safeAreaInsets ? (<SafeAreaView pointerEvents="none" collapsable={false} onLayout={function (event) {
                 var height = event.nativeEvent.layout.height;
@@ -857,7 +860,6 @@ export default forwardRef(function ActionSheet(_a, ref) {
               <Animated.View pointerEvents="box-none" style={__assign(__assign({ borderTopRightRadius: ((_c = props.containerStyle) === null || _c === void 0 ? void 0 : _c.borderTopRightRadius) || 10, borderTopLeftRadius: ((_d = props.containerStyle) === null || _d === void 0 ? void 0 : _d.borderTopLeftRadius) || 10, backgroundColor: ((_e = props.containerStyle) === null || _e === void 0 ? void 0 : _e.backgroundColor) || 'white', borderBottomLeftRadius: ((_f = props.containerStyle) === null || _f === void 0 ? void 0 : _f.borderBottomLeftRadius) || undefined, borderBottomRightRadius: ((_g = props.containerStyle) === null || _g === void 0 ? void 0 : _g.borderBottomRightRadius) || undefined, borderRadius: ((_h = props.containerStyle) === null || _h === void 0 ? void 0 : _h.borderRadius) || undefined, width: ((_j = props.containerStyle) === null || _j === void 0 ? void 0 : _j.width) || '100%' }, getElevation(typeof elevation === 'number' ? elevation : 5)), { flex: undefined, height: dimensions.height, maxHeight: dimensions.height, paddingBottom: keyboard.keyboardShown
                     ? keyboard.keyboardHeight || 0
                     : 0,
-                //zIndex: 10,
                 transform: [
                     {
                         translateY: animations.translateY

[sabuhiteymurov]

Same problem happens, is there going to be a fix for this issue?

[jonxssc]

For anyone searching for a solution, removing the code i pointed at in https://github.com/ammarahm-ed/react-native-actions-sheet/pull/328 this request, should fix the weird spacing, tested it on version 0.8.29