Android Keyboard Handling

Bug

Keyboard handling with Android is a nightmare, so @gorhom I’m grateful for your patience and hard work on this.

Here is a clean example that will highlight the different bugs I am facing. Please check each point using an iPhone and an Android device to compare.

If I find new bugs, I will update this issue. Also, when you introduce a new fix, we can use this issue to make sure the bugs are resolved and test to see no other exist.

Everyone else is welcome to comment. If you can suggest a new way to produce a bug with clean code, please share and I will update the snack to demonstrate.

Environment info

I’m using alpha 12 because I cannot use the https://github.com/gorhom/react-native-bottom-sheet/tree/fix/489-improve-keyboard-handling fix on snack. If something has already been resolved by the fix, please let me know. Also, alpha 13 has a bug https://github.com/gorhom/react-native-bottom-sheet/issues/507 that needs to be resolved.

Library	Version
@gorhom/bottom-sheet	4.0.0-alpha.12

Steps To Reproduce

Android Specific

Snap points are set on iOS but not Android

When clicking inside the TextInput, the BottomSheet expands. Check the console log and click inside the TextInput

• iOS: it updates the BS snap point.
• Android: not updating snap point.

Because searchSheet hasn’t snapped to point 2, as it does on iOS, resultsCarouselRef.current?.close(); never fires so the resultsCarousel sheet never closes.

Another consequence of the same issue:

Drag searchSheet to the middle snap point. resultsCarousel will hide. Now click inside the TextInput. searchSheet will expand but not update the snap point on Android. Then manually drag the sheet to the bottom. resultsCarousel will not restore because it doesn’t know anything changed.

BottomSheet gets stuck

Click inside the TextInput, the BottomSheet will expand. Submit on the keyboard and SearchHandle will setRunningSearch(true), which will kick off a useEffect on App.tsx that will collapse the BottomSheet.

Try to drag the BottomSheet up. It will snap back to the bottom. Again, because it never updated the snap points.

BottomSheet stops responding

Click inside the TextInput, the BottomSheet will expand. Submit on the keyboard and SearchHandle will setRunningSearch(true), which will kick off a useEffect on App.tsx that will collapse the BottomSheet.

• Drag the Results BottomSheet down. Search BottomSheet will expand.
• Drag the Search BottomSheet down. Results BottomSheet will not expand as expected.

Both Android and iOS

1. Drag down the resultsCarousel and before it closes, click inside the TextInput. Search BottomSheet will not expand to the top as expected.
2. Drag down resultsCarousel. Search BottomSheet will start expanding. While it’s expanding, drag it down. resultsCarousel will not expand as expected

Reproducible sample code

https://snack.expo.io/@kickbk/android-keyboard-handling

[KingAmo]

is it possible to disable keyboard handling ? i think we should provide a props enableKeyboardHandling @gorhom any help please?

[moyolvera]

@kickbk can you check again? i did forgot to click on the save button