Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
itsramiel opened this issue Sep 9, 2022 · 2 comments · Fixed by #1095
Closed
Labels
bug Something isn't working

Comments

@itsramiel
Copy link
Contributor

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

@princefishthrower
Copy link

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

@itsramiel
Copy link
Contributor Author

@princefishthrower you're welcome 🙏🏻

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants