Random extra space appears at bottom of ActionSheet

[jeremiahlachica]

Environment:

• react-native: 0.83.1
• react-native-actions-sheet: 10.1.2

Issue:

• When opening the action sheet, it occasionally adds extra blank space or bottom padding. This behavior occurs randomly and is not consistent.

Notes:

• Sometimes the sheet displays correctly with no extra bottom padding.
• The issue seems intermittent and hard to reproduce reliably.

Expected behavior:

• The action sheet should open without any unexpected extra space at the bottom. This is how it should look like:

[ammarahm-ed]

Hi, can you share an example action sheet component and the props you are using?

[milandexiaozhen]

Hi, can you share an example action sheet component and the props you are using?你好，能分享一个动作表组件示例和你使用的道具吗？

This bug occurs consistently on Android devices when the bottom virtual navigation bar is enabled and the ActionSheet component is opened for the first time. It is 100% reproducible.

[ThugBaby]

Hi, can you share an example action sheet component and the props you are using?你好，能分享一个动作表组件示例和你使用的道具吗？

This bug occurs consistently on Android devices when the bottom virtual navigation bar is enabled and the ActionSheet component is opened for the first time. It is 100% reproducible.

me too. please fix it quickly.🙏🏻🙏🏻🙏🏻 @ammarahm-ed

[ziga-hvalec]

Same here. only notice it on android for now. It's also random but once it happens it happens every time. My code did not change from 0.9.7 to 10.1.2

This happens both on navigation bar and old navigation buttons(samsung)

[cameronmurphy]

Also seeing this. Using this patch to fix.

diff --git a/dist/src/index.js b/dist/src/index.js
--- a/dist/src/index.js
+++ b/dist/src/index.js
@@ -122,9 +122,10 @@
     var closing = useRef(false);
     var draggableNodes = useRef([]);
     var layoutTimeoutRef = useRef(null);
+    var _windowDims = Dimensions.get('window');
     var _2 = useState({
-        width: -1,
-        height: -1,
+        width: _windowDims.width,
+        height: _windowDims.height,
     }), dimensions = _2[0], setDimensions = _2[1];
     var dimensionsRef = useRef(dimensions);
     dimensionsRef.current = dimensions;
@@ -1040,6 +1041,12 @@
                   <Animated.View onLayout={function (event) {
                 if (event.nativeEvent.layout.height < 10)
                     return;
+                if (Platform.OS === 'android' && dimensionsRef.current.height > 0) {
+                    var diff = Math.abs(dimensionsRef.current.height - event.nativeEvent.layout.height);
+                    if (diff > 0 && diff <= insets.bottom + 10) {
+                        return;
+                    }
+                }
                 setDimensions({
                     width: event.nativeEvent.layout.width,
                     height: event.nativeEvent.layout.height,

[dwaipayan7]

Any solution for this bug?

[ilyasssan2]

I'm facing the same issue

[dwaipayan7]

var closing = useRef(false);

how to apply this and where?

[ilyasssan2]

just patch it

[hakansaglamgermany]

I used this patch and seems to be working. Did you send pull request? @cameronmurphy Tnx!

[Andre-Capelli]

Still happening, any fix without the patch?

[Leykwan132]

Just checking, on android, the sheet only work as expected on the second click, is that what everyone else is experiencing?

[efstathiosntonas]

Can confirm the patch above works as a charm. @ammarahm-ed can you please take a look into it? Thank you.

[hosam-hubspire]

+1

[AdamLee321]

For me, the root cause turned out to be SafeAreaProvider not being initialized with initialWindowMetrics. Without it, insets.bottom reports as 0 on the first render and then "settles" to the real value, this causes the sheet to re-layout and reposition after it's already opened, which appears as extra padding animating in.

Fixing it in App.js:

import { SafeAreaProvider, initialWindowMetrics } from 'react-native-safe-area-context';

<SafeAreaProvider initialMetrics={initialWindowMetrics}>