gorhom / react-native-bottom-sheet

A performant interactive bottom sheet with fully configurable options 🚀
https://gorhom.dev/react-native-bottom-sheet/
MIT License
7.04k stars 768 forks source link

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

Closed itsramiel closed 2 years ago

itsramiel commented 2 years ago

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

https://user-images.githubusercontent.com/80689446/189354910-7fcc2aec-7649-40be-b6a5-922fc910c83c.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

princefishthrower commented 2 years ago

Omg you guys fixed this! Thank you @gorhom and @itsramiel so much for continuing to maintain such a powerful and awesome library 😎

itsramiel commented 2 years ago

@princefishthrower you're welcome 🙏🏻