[v4] Request: smoother keyboard transition when the bottom sheet is dismissed programmatically

[SimpleCreations]

Feature Request

Currently, when the bottom sheet is dismissed via the dismiss method while the keyboard is open, the sheet first slides all the way under the keyboard, and the keyboard then stays on screen for about a second before disappearing.

This feels like a performance issue from the UX perspective, and it would be great if the keyboard started sliding down along with the bottom sheet at the same time, thus eliminating the delay.

Demo of the current behavior:

https://user-images.githubusercontent.com/12449725/133307532-c01d43bd-025c-4f5c-9d87-5af074d5b28a.mp4

Why it is needed

Possible implementation

Code sample

[hirbod]

This PR just got merged: https://github.com/facebook/react-native/pull/31402

It will fix all of our weird keyboard issues soon :)

[gorhom]

i think the solution would be, to close keyboard when modal gets dismiss and keyboard was opened by the sheet 💡

[mattgabor]

@gorhom the issue is that onDismiss seems to get called after the modal is dismissed, not when the user initiates the dismiss. Is there a way to detect when the user pressed the backdrop, or initiated the dismiss?

[github-actions[bot]]

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.

[mattgabor]

This is still an issue, please remove stale label.

[Engazan]

This is still an issue, please remove stale label.

if u want you can use onAnimate to HOTFIX this, its only option in our project, sadly this "fix" or "cheat" work only with 1 snap point :/

onAnimate={(from, to) => { if (to === -1) { // Keyboard.dismiss(); } }}

[github-actions[bot]]

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.

[SimpleCreations]

Not stale

[github-actions[bot]]

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.

[SimpleCreations]

Not stale

[mattgabor]

This PR just got merged: facebook/react-native#31402

It will fix all of our weird keyboard issues soon :)

This was finally merged in December after being reverted, but it looks like it's scoped for the RN 0.68 release. When you say this will fix the issue, do you mean that the author of react-native-bottom-sheet will have to implement the automaticallyAdjustKeyboardInsets prop or we can just include it in the scrollviews within the bottom sheet?

[hirbod]

Afaik it's part of 0.67 and already shipped. You need to add the prop to your scrollview

[jzxchiang1]

What if you don't use a ScrollView? I get this issue even when I just have a vanilla View inside of the BottomSheetModal.

[antFrancon]

Calling Keyboard.dismiss() from a TouchableWithoutFeedback that I pass to the backdropComponent prop works great for me.

[mattgabor]

~~I ended up just adding Keyboard.dismiss() to this line of BottomSheetBackdrop using patch-package and it fixed it: https://github.com/gorhom/react-native-bottom-sheet/blob/0010008906154f9a545f89d5826ea7af48336610/src/components/bottomSheetBackdrop/BottomSheetBackdrop.tsx#L45-L47~~

See @hirbod's solution below

[hirbod]

@mattgabor why are you using patch-package for this?

import { BottomSheetBackdrop, BottomSheetBackdropProps, BottomSheetModal } from '@gorhom/bottom-sheet';

const renderBackdrop: React.FC<BottomSheetBackdropProps> = (props) => {
  return (
    <BottomSheetBackdrop {...props} appearsOnIndex={0} disappearsOnIndex={-1}>
      <Pressable onPress={Keyboard.dismiss} style={{ flex: 1}} />
    </BottomSheetBackdrop>
  );
};

<BottomSheet
    ...
    backgroundComponent={renderBackground}
>
...

[mattgabor]

@hirbod thanks for the suggestion, this worked! Previously I was rendering the backdrop as a child of pressable which was incorrect.

[github-actions[bot]]

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.

[SimpleCreations]

Still relevant

[github-actions[bot]]

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.

[SimpleCreations]

Not stale

[github-actions[bot]]

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.

[SimpleCreations]

Not stale

[github-actions[bot]]

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.

[SimpleCreations]

Not stale

[github-actions[bot]]

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.

[SimpleCreations]

Not stale

[github-actions[bot]]

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.

[SimpleCreations]

Not stale

[github-actions[bot]]

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.