KeyboardToolbar visible behind modal

[RobertPetricevic]

Describe the bug
The screen component has KeyboardAwareScrollView wrapped around the children and KeyboardToolbar as its sibling.
On that screen I have a modal using gorhom bottom sheet and a TextInput inside it. When the input is focused an the keyboard is opened, the toolbar beneath it gets visible.

Repo for reproducing
For now I don't have a repo

Expected behavior
I know there is a section for KeyboardAwareScrollView and groom sheet, but I thought, obviously wrong, that it only needs to be done if for example I want to have KeyboardStickyView inside modal.

Screenshots

ScreenRecording_03-29-2025.23-46-25_1.MP4

Smartphone (please complete the following information):
happening on ios simulator and ios device (I don't use toolbar on android cause I'm postponing some issue when having it there :))

Additional context
"@gorhom/bottom-sheet": "^5.1.2"
"react-native-keyboard-controller": "^1.15.0"
"react-native": "0.74.5"
"expo": "^51.0.32"

[kirillzyusko]

@RobertPetricevic can you provide a layout (code) example/structure? 👀

[RobertPetricevic]

@kirillzyusko rapid answers as always, thanks

Here it is

return (
    <>
      <KeyboardAwareScrollView
        className="bg-bg-primary"
        contentContainerStyle={{
          flexGrow: 1,
          paddingHorizontal: withHorizontalPadding ? 20 : 0,
          paddingBottom,
        }}
        alwaysBounceVertical={false}
        keyboardShouldPersistTaps="handled"
        keyboardDismissMode="interactive"
        bottomOffset={isIos ? 62 : 0}>
        {children}
      </KeyboardAwareScrollView>
      {isIos && withKeyboard ? <KeyboardToolbar /> : null}
    </>
  );

[kirillzyusko]

@RobertPetricevic and where is Modal in this case?..

Based on the issue description I would suggest to specify enabled={false} for KeyboardToolbar when Modal gets shown 🤔

Do you think it will fix the issue?

[RobertPetricevic]

@kirillzyusko Sorry, the modal is one of the screen components children

Yes, this fixed the issue, I'll keep track and if at least one modal is opened, I'll disable the toolbar, thanks :)

One quick question please, in order to have a toolbar in the modal itself when input is focused, I need to follow this guide I suppose: https://kirillzyusko.github.io/react-native-keyboard-controller/docs/next/api/components/keyboard-aware-scroll-view#gorhombottom-sheet?

[kirillzyusko]

One quick question please, in order to have a toolbar in the modal itself when input is focused, I need to follow this guide I suppose: https://kirillzyusko.github.io/react-native-keyboard-controller/docs/next/api/components/keyboard-aware-scroll-view#gorhombottom-sheet?

I think no one has tried to add KeyboardToolbar to bottom-sheet. But basically I think you'll need to put KeyboardToolbar component in non-gesture area (i. e. KeyboardToolbar should be defined in the BottomSheet screen, but when you drag the sheet - it shouldn't affect KeyboardToolbar position). And it should work, I believe - let me know if it's tricky and if you find a way how to do it.

I think it's worth to add such integration to the documentation 👀

[RobertPetricevic]

aha I get it. Yes, yes, if I make it work, I'll let you know

thanks @kirillzyusko