Skip to content

[v4] | [v2] | [Android] Bottomsheet opens suddenly when keyboard opens and closes quickly #1094

@itsramiel

Description

@itsramiel

Bug

Bottom sheet component is expanding unexpectedly when the keyboard is presented and then closed quickly. It looks like the bottom sheet is filling the height of the keyboard as it expands to a height not equal to the snapPoint.

This happens only on Android and tested on Android 11/12.

In this video I am pressing on the text input and then quickly closing the keyboard using a button that invokes Keyboard.dismiss

Screenrecorder-2022-09-09-15-48-28-96.0.mp4

Environment info

Library Version
@gorhom/bottom-sheet 4.4.3
react-native 0.69.5
react-native-reanimated 2.9.1
react-native-gesture-handler 2.5.0

Steps To Reproduce

  1. add a bottomsheet that is initially hidden
  2. open and close the keyboard quickly(it may take a couple of tries since it has to be quick)
  3. observe the bottomsheet expanding

Describe what you expected to happen:

  1. open and closing of the keyboard should not cause the bottomsheet to expand

Reproducible sample code

import { GestureHandlerRootView } from "react-native-gesture-handler";
// Utility Imports
import BottomSheet from "@gorhom/bottom-sheet";
import { Button, Keyboard, StyleSheet, Text, TextInput } from "react-native";

const snapPoints = ["90%"];

export default function App() {
  return (
    <GestureHandlerRootView style={styles.container}>
      <Button title="close" onPress={() => Keyboard.dismiss()} />
      <TextInput style={styles.input} placeholder={"message"} />
      <BottomSheet
        snapPoints={snapPoints}
        index={-1}
        enablePanDownToClose
        backgroundStyle={{ backgroundColor: "#ccc" }}
      >
        <Text>Hello there</Text>
      </BottomSheet>
    </GestureHandlerRootView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "space-around",
    backgroundColor: "white",
  },
  input: {
    backgroundColor: "#eee",
    padding: 8,
  },
});

or use this github repo using expo: https://github.com/itsramiel/bottomsheet-keybaord-bug/blob/main/App.tsx

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions