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

fix: check if next and current indices are different before animating to a snap position #1095

Merged
merged 1 commit into from
Sep 9, 2022
Merged

fix: check if next and current indices are different before animating to a snap position #1095

merged 1 commit into from
Sep 9, 2022

Conversation

itsramiel
Copy link
Contributor

Fixes #1094

Motivation

On Android the bottomsheet was getting stuck to the height of keyboard when a user would open and close the keyboard really quickly. It was because of the following lines:

if (animatedAnimationState.value === ANIMATION_STATE.RUNNING) {
nextPosition =
animatedNextPositionIndex.value !== -1
? snapPoints[animatedNextPositionIndex.value]
: animatedNextPosition.value;
} else if (animatedCurrentIndex.value === -1) {

while doing the check if animation state is running and snapping to that point, it also has to make sure current and next indices are not equal since in that case the user did not try to snap to any point.

Using the following example:

import { GestureHandlerRootView } from "react-native-gesture-handler";
// Utility Imports
import BottomSheet from "./src";
import { Button, Keyboard, StyleSheet, Text, TextInput } from "react-native";
import { useRef } from "react";

const snapPoints = ["20%", "90%"];

export default function App() {
  const bottomsheetRef = useRef<BottomSheet>(null);

  return (
    <GestureHandlerRootView style={styles.container}>
      <Button title="close keyboard" onPress={() => Keyboard.dismiss()} />
      <Button
        title="first snapPoint"
        onPress={() => bottomsheetRef.current?.snapToIndex(0)}
      />
      <Button
        title="second snapPoint"
        onPress={() => bottomsheetRef.current?.snapToIndex(1)}
      />
      <TextInput style={styles.input} placeholder={"message"} />
      <BottomSheet
        ref={bottomsheetRef}
        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,
  },
});

Before:

Screenrecorder-2022-09-09-19-29-22-33.mp4

After:

Screenrecorder-2022-09-09-19-29-42-302.mp4

@gorhom
Copy link
Owner

gorhom commented Sep 9, 2022

thanks @itsramiel for submitting this PR, im reviewing it right now

@gorhom gorhom self-assigned this Sep 9, 2022
@gorhom gorhom added the v4 Written in Reanimated v2 label Sep 9, 2022
@gorhom gorhom merged commit 3b75d5d into gorhom:master Sep 9, 2022
@itsramiel itsramiel deleted the fix-bottom-sheet-random-snap branch September 9, 2022 19:51
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
v4 Written in Reanimated v2
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[v4] | [v2] | [Android] Bottomsheet opens suddenly when keyboard opens and closes quickly
2 participants