Issue with Extra White Space Above Keyboard Inside ActionSheet

[mksmanishp]

I'm facing an issue where there's unexpected white space appearing above the keyboard when the keyboard opens inside a custom ActionSheet (react-native-actions-sheet). All of my content, including form fields, is rendered within the ActionSheet.

Even though I’ve wrapped the inner content with KeyboardAvoidingView and handled keyboardVerticalOffset, the keyboard doesn’t seem to push the content up correctly. As a result, a large empty space appears above the keyboard instead of adjusting the visible layout.

[genesisbell]

Have you had any luck with this one? I'm facing the same issue

[genesisbell]

I made it work with the help of this comment

import { Platform } from "react-native";

const isIos = Platform.OS === "ios";

const YourtComponet = () => {

// other code

return (

<ActionSheet keyboardHandlerEnabled={isIos}>
...
</ActionSheet>
)
}

[ankurbit1997]

This is happening on android version < 15.
@ammarahm-ed can you just help with the hint what to do here?

[ammarahm-ed]

@ankurbit1997 i am working on version 10 of the library that fixes this.

[ammarahm-ed]

@ankurbit1997 i am working on version 10 of the library that fixes this. You can try the v10 alpha if want an early fix

[ankurbit1997]

Okay i tried the alpha @ammarahm-ed
But the issue is still there.
However in alpha the height is reduced by 10% from top.
But still it stretches to 90%.
Turning off keyboard handling fixes this for <15 android.
But then there's a flicker .

Are you exposing any prop in Alpha to handle this issue.
I saw in the PR for v10 you have commits related to this issue.

Thanks for your time.

[ammarahm-ed]

@ankurbit1997 can you share the example sheet component you are rendering? And maybe a video of what's happening exactly? A little repro will help me fix this.

[ankurbit1997]

Sure i will add it here in sometime.

[ammarahm-ed]

Fixed in https://github.com/ammarahm-ed/react-native-actions-sheet/releases/tag/v10.0.1

[ankurbit1997]

hey @ammarahm-ed i tried the new version i am adding a screenshot on whats happening right now.

1. Works fine with same code on pixel 8 android 16
2. Extra space on android pixel with android version 14

this is happening on devices below 14.

<View> <ActionSheet containerStyle={{ backgroundColor: 'red' }} snapPoints={[50]} keyboardHandlerEnabled={true} gestureEnabled ref={actionSheetRef} onClose={onClose}> <View style={{ padding: 10 }}> <Text>Please Enter your name</Text> <TextInput autoFocus placeholder="Enter your name" style={{ borderWidth: 1, borderColor: 'black', padding: 10, borderRadius: 5 }} /> </View> </ActionSheet> </View>

this is the code which is used.

Sorry for not framing this properly.
let me know if you need a repository for this.

RCA - i tried looking into the code and
setDimensions({ width: event.nativeEvent.layout.width, height: event.nativeEvent.layout.height, }); in line no 1236 gets lesser height for android 15.

i will also try to solve this and let you know

[ammarahm-ed]

@ankurbit1997 thanks for sharing this. Can you try reproducing this with the example app on the repo?

Pull the example repo
npm install
npm run build
cd example
npm install
npm run android

I will also try running on android 14 and below

[ankurbit1997]

hmmmm.

seems like problem with that particular react native version. e.g 0.78.3
because now that's the only difference.

[ankurbit1997]

for someone seeing this thread in future
make sure to enable edgeToEdgeEnabled for this to work properly for android below 15.

thanks @ammarahm-ed for the time.