[v5] [v4] Android keyboard issue in combination with Reanimated 3

[callaars]

Bug

On Android, when using Reanimated 3 (any 3.x version) the BottomSheetModal immediately closes itself when it is of a relatively small height (<200) and focuses a BottomSheetTextInput. This does not happen when using a regular BottomSheet.

Incorrect:

Correct (when using a larger height):

Logs:

Incorrect:

[BottomSheetModal::handlePresent] 
[BottomSheet::render] animatedSnapPoints:781.3333129882812 animatedCurrentIndex:-1 providedIndex:0
[BottomSheetHandleContainer::handleContainerLayout] height:24
[fun::useAnimatedReaction::OnMount] isLayoutCalculated:true animatedSnapPoints:781.3333129882812 nextPosition:781.3333129882812
[fun::bound animateToPosition] currentPosition:1029.3333333333333 position:781.3333129882812 velocity:0
[BottomSheet::handleOnAnimate] toIndex:0 fromIndex:-1
[fun::bound animateToPositionCompleted] animatedCurrentIndex:-1 animatedNextPosition:781.3333129882812 animatedNextPositionIndex:0
[fun::useAnimatedReaction::OnChange] animatedCurrentIndex:-1 animatedIndex:0
[BottomSheet::handleOnChange] index:0 animatedCurrentIndex:0
[BottomSheetModal::handleBottomSheetOnChange] minimized:false forcedDismissed:false
[BottomSheetContainer::handleContainerLayout] height:669.3333129882812
[fun::useAnimatedReaction::OnSnapPointChange] snapPoints:469.33331298828125
[fun::bound animateToPosition] currentPosition:781.3333129882812 position:469.33331298828125 velocity:0
[BottomSheet::handleOnAnimate] toIndex:0 fromIndex:-1
[fun::bound animateToPositionCompleted] animatedCurrentIndex:0 animatedNextPosition:469.33331298828125 animatedNextPositionIndex:0
[fun::useAnimatedReaction::OnChange] animatedCurrentIndex:0 animatedIndex:-1
[BottomSheet::handleOnChange] index:-1 animatedCurrentIndex:-1
[BottomSheetModal::handleBottomSheetOnChange] minimized:false forcedDismissed:false
[fun::useAnimatedReaction::onClose] animatedCurrentIndex:-1 animatedIndex:-1
[BottomSheetModal::handleBottomSheetOnClose] minimized:false forcedDismissed:false
[BottomSheetModal::unmount] 
[BottomSheetModal::resetVariables] 
[BottomSheetModal::handlePortalOnUnmount] minimized:false forcedDismissed:false
[fun::useAnimatedReaction::OnChange] animatedCurrentIndex:-1 animatedIndex:0
[BottomSheet::handleOnChange] index:0 animatedCurrentIndex:0
[BottomSheetModal::handleBottomSheetOnChange] minimized:false forcedDismissed:false
[BottomSheetContainer::handleContainerLayout] height:981.3333129882812

Correct:

[BottomSheetModal::handlePresent] 
[BottomSheet::render] animatedSnapPoints:581.3333129882812 animatedCurrentIndex:-1 providedIndex:0
[BottomSheetHandleContainer::handleContainerLayout] height:24
[fun::useAnimatedReaction::OnMount] isLayoutCalculated:true animatedSnapPoints:581.3333129882812 nextPosition:581.3333129882812
[fun::bound animateToPosition] currentPosition:1029.3333333333333 position:581.3333129882812 velocity:0
[BottomSheet::handleOnAnimate] toIndex:0 fromIndex:-1
[fun::bound animateToPositionCompleted] animatedCurrentIndex:-1 animatedNextPosition:581.3333129882812 animatedNextPositionIndex:0
[fun::useAnimatedReaction::OnChange] animatedCurrentIndex:-1 animatedIndex:0
[BottomSheet::handleOnChange] index:0 animatedCurrentIndex:0
[BottomSheetModal::handleBottomSheetOnChange] minimized:false forcedDismissed:false
[BottomSheetContainer::handleContainerLayout] height:669.3333129882812
[fun::useAnimatedReaction::OnSnapPointChange] snapPoints:269.33331298828125
[fun::bound animateToPosition] currentPosition:581.3333129882812 position:269.33331298828125 velocity:0
[BottomSheet::handleOnAnimate] toIndex:0 fromIndex:0
[fun::bound animateToPositionCompleted] animatedCurrentIndex:0 animatedNextPosition:269.33331298828125 animatedNextPositionIndex:0

Environment info

Library	Version
@gorhom/bottom-sheet	4.4.5
react-native	0.71.7
react-native-reanimated	3.1.0
react-native-gesture-handler	2.9.0

Steps To Reproduce

1. Have a BottomSheetModal with a relative small height (<200) and a BottomSheetTextInput.
2. Run the app on Android
3. Try to focus the BottomSheetTextInput

Describe what you expected to happen:

When focussing the TextInput on a BottomSheetModal of any size I expect it not to close the bottom sheet.

Reproducible sample code

https://github.com/callaars/bottom-sheet-android-keyboard-issue

[github-actions]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.

[callaars]

Not stale.

[larsmunkholm]

I was experiencing this as well.
Solved it by snapping the bottom sheet at 100%

[callaars]

Using adjustPan as the window resize mode seems to help in a lot of cases but still has similar issues with multiple modals. Not to mention that moving a whole app to work with adjustPan is just crazy talk.

I unfortunately cannot snap my bottom sheet to a 100%.

[varshith5c]

@larsmunkholm @callaars Is there a code example that I can see to solve this issue

[larsmunkholm]

@varshith5c This is a simplification, but essentially what I did:

export const Component = (props) => {
    const [inputHasFocus, setInputHasFocus] = useState(false);

    return (
        <BottomSheet
            snapPoints={[inputHasFocus ? "100%" : 200, "100%"]}
            onClose={props.onClose}
        >
            <TextInput
                onFocus={() => setInputHasFocus(true)}
                onBlur={() => setInputHasFocus(false)}
            />
        </BottomSheet>
    );
};

[callaars]

Yes I put the reproducible code in the top issue description.

https://github.com/callaars/bottom-sheet-android-keyboard-issue

[AkmalFairuz]

I can confirm this, when TextInput focused, onClose function on BottomSheet props will called

bottom.sheet.bug.mp4

[emilioschepis]

Hello, did anyone find a more stable solution to this issue? I started looking into it today and found a couple of interesting things.

The most important part is: I was able to get a definite value for how high the snap point must be before the whole sheet is closed. Turns out it is exactly the height of the expanded keyboard.

If the bottom sheet is even one pixel shorter than the keyboard, this condition momentarily evaluates to true and also this block of code is executed.

Unfortunately I am testing on a pretty complex project so there are a ton of moving parts, I plan on trying on a brand new project to hopefully find a suitable patch either for this library or reanimated itself.

With that said, I'd be curious to know if a more "official" solution is in the works.