[iOS/Android] Keyboard covers input fields in bottom sheets

[mateuszurbas]

Before submitting a new issue

• I tested using the latest version of the library, as the bug might be already fixed.
• I tested using a supported version of react native.
• I checked for possible duplicate issues, with possible answers.

Bug summary

Current Behavior

When using a bottom sheet with fixed sizing configurations, the keyboard overlaps input fields positioned at the bottom of the sheet, making them inaccessible to users.
This occurs in two specific cases:

Fixed height bottom sheet:

• When the bottom sheet has a fixed size (e.g., auto) and the content takes up nearly the entire screen height
• Input fields positioned at the bottom of the sheet become hidden behind the keyboard when focused
• User cannot see what they're typing

Scrollable bottom sheet:

• Same issue occurs with scrollable type sheets
• The sheet doesn't automatically adjust its position or scroll to keep the focused input visible
• Keyboard overlays the input field instead of pushing the content up

Expected Behavior

When an input field inside the bottom sheet is focused:

• The bottom sheet should automatically adjust its position or scroll the content
• The focused input field should remain visible above the keyboard
• User should be able to see their typing without manual scrolling
• The sheet should handle keyboard appearance/dismissal gracefully on both iOS and Android

Library version

3.0.4

Environment info

Platform: iOS & Android
react-native-true-sheet version: "3.0.4",
React Native version: "0.81.5"

Steps to reproduce

1. Create a bottom sheet with fixed or scrollable content
2. Add multiple input fields so the last one is near the bottom of the sheet (sheet should have at least 80% of the screen)
3. Open the bottom sheet on iOS or Android device
4. Tap on the bottom-most input field
5. Observe that the keyboard covers the input field

Reproducible example repository

N/A

[artem-kliuev]

+1. While ios works ok, android always overlap text input with keyboard if detent < sheet content height + keyboard height. It should change height of sheet on keyboard appears. Now it is hard to use on android. Tested on 3.04 and 3.1.0-beta.4 and android v9 and v15. Please fix android behaviour :)

Btw awesome work, thank you!

PS: React Native version: "0.81.5"

[lodev09]

I tried but I can't replicate on Android. Create a repro to make things easier for me

[Stonlifer]

Im facing the same issue not only that but the edge-to-edge also doesn't work on android

Even though it works perfectly in the formSheet presentation of react-native-screens

[lodev09]

@Stonlifer that doesn't give me any information at all. Provide more details here.. device, RN version, etc.

[Stonlifer]

@lodev09

Device/Platform: Android with edgeToEdgeEnabled: true in Expo config
React Native: 0.81.5
Expo SDK: 54.0.25
New Architecture: Enabled (newArchEnabled: true)
react-native-screens: ~4.16.0
@lodev09/react-native-true-sheet: 3.1.0

running on android emu API31

[lodev09]

ah probably need to add backwards compatibility for api31 :/

[JClackett]

Hey just jumping in here to mention that I have an almost identical setup to @Stonlifer, on android I open the sheet to display a OTP input, but the keyboard doesnt show and neither does the text?

expo 54.0.25
true sheet 3.1.0
react-native-screens 4.16.0
new arch enabled

Not doing anything special:

 <TrueSheet
    ref={verificationSheetRef}
    detents={Platform.select({ ios: ["auto"], android: [1] })}
    blurOptions={{ intensity: 100 }}
  >

Here's some images showing the difference between android and ios