[v4] Modal does not return to snap-point on keyboard 'close/return'

[imprisonedmind]

Bug

As the title suggests, the BottomSheetModal does not collapse to the correct snap-point when the keyboard return button is pressed or when the keyboard is dismissed.

Environment info

Library	Version
@gorhom/bottom-sheet	^4
react-native	0.72.4
react-native-reanimated	~3.3.0
react-native-gesture-handler	~2.12.0

Steps To Reproduce

Simulator.Screen.Recording.-.iPhone.14.-.2023-09-22.at.19.49.11.mp4

Describe what you expected to happen:

1. Open Modal
2. Interact with <BottomSheetTextInput/>
3. Open Keyboard
4. Modal expands to fill screen
5. Dismiss Keyboard
6. Modal reverts back to original step point

Reproducible sample code

export const HomePage: React.FunctionComponent = () => {
  const { setBottomSheetChildren } = useBottomSheetContext();

  useEffect(() => {
    setBottomSheetChildren(<TransActionCreation />);
  }, []);

  return (
    <View className={`flex flex-col bg-zinc-950 h-full`}>
      <SafeAreaView />
      <ScrollView className={`flex-1 flex-col px-2`}>
        {arr.map((user, index) => {
          const isPos = user.recentTransaction > 0;
          return (
            <UserCard key={index} index={index} user={user} isPos={isPos} />
          );
        })}
      </ScrollView>
    </View>
  );
};

export const TransActionCreation: FunctionComponent<Props> = (props) => {
  return (
    <View className={`flex flex-col p-4 pr-0 gap-8`}>
      <View>
        <PickYourPaymates />
      </View>
      <View>
        <WhoOwesWho />
      </View>
      <View className={`pr-4`}>
        <AreaTitle title={"How much do they owe you? 🤑"} />
        <BottomSheetTextInput
          style={{
            backgroundColor: "#09090b",
            padding: 12,
            borderRadius: 8,
            color: "#a1a1aa",
          }}
          inputMode={"text"}
          placeholder={"Enter an amount"}
          placeholderTextColor={"#27272a"}
          onSubmitEditing={() => {
            console.log("test");
          }}
        />
      </View>
    </View>
  );
};

const BottomSheet: FunctionComponent = () => {
  const { isOpen, setIsOpen, bottomSheetChildren } = useBottomSheetContext();

  const bottomSheetModalRef = useRef<BottomSheetModal>(null);

  const snapPoints = useMemo(() => ["70%"], []);

  const handlePresentModalPress = useCallback(() => {
    bottomSheetModalRef.current?.present();
  }, []);

  const handleSheetChanges = useCallback((index: number) => {
    setIsOpen(index > 0);
  }, []);

  const renderBackdrop = useCallback(
    (props) => (
      <BottomSheetBackdrop
        {...props}
        opacity={0.4}
        disappearsOnIndex={-1}
        appearsOnIndex={0}
        pressBehavior="close"
      />
    ),
    [],
  );

  useEffect(() => {
    isOpen && handlePresentModalPress();
  }, [isOpen]);

  return (
    <BottomSheetModal
      ref={bottomSheetModalRef}
      index={0}
      snapPoints={snapPoints}
      onChange={handleSheetChanges}
      enablePanDownToClose={true}
      backgroundStyle={{ backgroundColor: "#18181b" }}
      backdropComponent={renderBackdrop}
    >
      <View className={`flex-1 `}>{bottomSheetChildren}</View>
    </BottomSheetModal>
  );
};

[imprisonedmind]

This solves my issue, The 'blur' in the naming threw me off.

keyboardBlurBehavior={"restore"}

<BottomSheetModal
      ref={bottomSheetModalRef}
      index={0}
      snapPoints={snapPoints}
      onChange={handleSheetChanges}
      enablePanDownToClose={true}
      backgroundStyle={{ backgroundColor: "#18181b" }}
      backdropComponent={renderBackdrop}
      keyboardBlurBehavior={"restore"}
    >
      <View className={`flex-1 `}>{bottomSheetChildren}</View>
    </BottomSheetModal>

Simulator.Screen.Recording.-.iPhone.14.-.2023-09-22.at.20.19.01.mp4