[Bug]: keyboardBlurBehavior={'restore'} not working

[florian-deroo]

Version

v5

Reanimated Version

v3

Gesture Handler Version

v2

Platforms

Android, iOS

What happened?

keyboardBlurBehavior={'restore'} isn't working, the position of the modal does not restore when i close the keyboard and there is a topInset

Reproduction steps

• Open input
• Close input

Reproduction sample

https://snack.expo.dev/@florianfrdev/bottom-sheet---issue-reproduction-template?platform=ios

Relevant log output

[doguyilmaz]

<BottomSheetModal
    ref={bottomSheetModalRef}
    snapPoints={["60%", "100%"]}
    enableDynamicSizing={false}
    topInset={100}
    keyboardBlurBehavior={'restore'} 
>

actually adding "100%" to snapPoints helped in my case and your snack, yeah probably wont fit all the cases but could solve your issue temporarily.

your sample with the fix

[krishnan-456]

yes, same issue here with latest version

[florian-deroo]

@gorhom

[krishnan-456]

does anyone find solution for this or do we have any hack to temporary fix this ?

[Akyna]

The same issue

"expo": "~53.0.22",
"react-native": "0.79.5",
"@gorhom/bottom-sheet": "^5.2.6"

[krishnan-456]

this is happening only when enableDynamiceSize={true}

[krishnan-456]

does anyone faced this issue with IOS ?

[mefjuu]

@krishnan-456 Yup, this is flawed on Android as well.

[Akyna]

We downgraded to the previous version (5.1.2) - works like a charm.

"expo": "~53.0.22",
"react-native": "0.79.5",
"@gorhom/bottom-sheet": "5.1.2"

[krishnan-456]

@Akyna can you share the reanimated version ? because it's throwing error.

[Akyna]

@Akyna can you share the reanimated version ? because it's throwing error.

"react-native-reanimated": "~3.17.5",

[BoavistaLudwig]

We downgraded to the previous version (5.1.2) - works like a charm.

"expo": "~53.0.22",
"react-native": "0.79.5",
"@gorhom/bottom-sheet": "5.1.2"

yes, this fixed it for me as well!!

[kvntzn]

<BottomSheetModal ref={bottomSheetModalRef} snapPoints={["60%", "100%"]} enableDynamicSizing={false} topInset={100} keyboardBlurBehavior={'restore'}

actually adding "100%" to snapPoints helped in my case and your snack, yeah probably wont fit all the cases but could solve your issue temporarily.

your sample with the fix

This worked for me without downgrading.

[Mavludin]

does anyone faced this issue with IOS ?

Still having it

[FabianUntermoser]

I solved this issue by waiting for the keyboard to fully close.

My flow was this:

1. BottomSheet with BottomSheetTextInput
2. User types and sends a message - the BottomSheetTextInput blurs and a keyboard hide is triggered
3. I wait for the keyboard to be fully closed
4. Then send the message

The problem seemed to be that my send message code triggered a rerender of the component that holds my BottomSheet. Waiting for the keyboard to be fully closed ensures the restoring of the BottomSheet height.

Test by calling setTimeout(() => Keyboard.dismiss(), 500); explicitly and see if it restores.

Heres a hook I use that waits until the keyboard is closed for up to 450ms.

import { useCallback, useEffect, useState } from "react";
import { Keyboard, Platform } from "react-native";

/**
 * useKeyboard
 * Listens to keyboard show/hide events and exposes visibility state.
 * - iOS: listens to willShow/didShow and willHide/didHide for better responsiveness
 * - Android: listens to didShow/didHide
 * - Web: returns false (no-op)
 */
export const useKeyboard = () => {

  const waitForHide = useCallback((timeoutMs = 450) => {
    if (Platform.OS === "web") return Promise.resolve();
    return new Promise<void>((resolve) => {
      let done = false;
      const finish = () => {
        if (done) return;
        done = true;
        try {
          subWillHide?.remove();
        } catch {}
        try {
          subDidHide?.remove();
        } catch {}
        resolve();
      };

      const subWillHide = Platform.OS === "ios" ? Keyboard.addListener("keyboardWillHide" as any, finish) : null;
      const subDidHide = Keyboard.addListener("keyboardDidHide" as any, finish);

      setTimeout(finish, timeoutMs);
    });
  }, []);

  // Dismiss the keyboard and resolve once it's hidden (or timeout).
  const dismissSync = useCallback(
    async (timeoutMs = 450) => {
      Keyboard.dismiss();
      await waitForHide(timeoutMs);
    },
    [waitForHide]
  );

  return { isVisible, waitForHide, dismissSync };
};

[SSylvain1989]

Something weird happen , i have the same issue , but if i do :

          ref={bottomSheetRef}
          title={t('modal.incomplete_address.edit.title')}
          snapPoints={['30%', '60%']}
          enableDynamicSizing={false}
          keyboardBlurBehavior={'restore'}

working fine ✅ , but the modal is showing too height

https://github.com/user-attachments/assets/26e02de4-c688-4071-a594-ac0395906d69

so i wanted to lower the snapPoints this is working fine

        <BottomSheetV2
          ref={bottomSheetRef}
          title={t('modal.incomplete_address.edit.title')}
          snapPoints={['56%']}
          enableDynamicSizing={false}
          keyboardBlurBehavior={'restore'}
        >

this is NOT working ( lower than 55% ) don't know why

       <BottomSheetV2
         ref={bottomSheetRef}
         title={t('modal.incomplete_address.edit.title')}
         snapPoints={['55%']} 👈👈
         enableDynamicSizing={false}
         keyboardBlurBehavior={'restore'}
       >

https://github.com/user-attachments/assets/00bdd4cd-0793-4f27-bb47-4067fc2b232e

even if i remove all this props ( commented code ) :

      <BottomSheet
        ref={ref}
        index={-1}
        // enableDynamicSizing
        // enablePanDownToClose={dismissible}
        // keyboardBehavior="interactive"
        // keyboardBlurBehavior="restore"
        // maxDynamicContentSize={Dimensions.get('window').height - 100}
        // enableBlurKeyboardOnGesture
        // topInset={100}
        {...props}

i don't get the expected behavior

[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.

[Akyna]

Any updates?

[Fortidude]

👀 is lib still maintained?

[Mavludin]

This fix solves the problem https://github.com/gorhom/react-native-bottom-sheet/pull/2511

Just patch it.