Bug

BottomSheetModal doesn't work specifically on this device (vivo Y31). On other android devices all works. When opening BottomSheetModal, nothing happens or a window is shown for a millisecond and then closes.

Environment info

Library	Version
@gorhom/bottom-sheet	^4.6.0
react-native	0.73.4
react-native-reanimated	~3.6.2
react-native-gesture-handler	~2.14.0
expo	~50.0.6

Steps To Reproduce

Launch the app in Android vivo Y31
Click the Present Modal button to trigger the bottom sheet modal

Reproducible sample code

import { useCallback, useMemo, useRef } from "react";
import { Button, StyleSheet, Text, View } from "react-native";
import { GestureHandlerRootView } from "react-native-gesture-handler";
import {
  BottomSheetModal,
  BottomSheetModalProvider,
} from "@gorhom/bottom-sheet";


export default function App() {
  const bottomSheetModalRef = useRef<BottomSheetModal>(null);

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

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

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

  const handleSheetChanges = useCallback((index: number) => {
    console.log("handleSheetChanges", index);
  }, []);

  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <BottomSheetModalProvider>
        <View style={styles.container}>
          <Text style={styles.text}>App working on your phone!</Text>
          <Button
            onPress={handlePresentModalPress}
            title="Present Modal"
            color="black"
          />
        </View>

        <BottomSheetModal
          ref={bottomSheetModalRef}
          index={1}
          snapPoints={snapPoints}
          onChange={handleSheetChanges}
          backgroundStyle={{
            backgroundColor: "gray",
            borderRadius: 22,
            borderColor: "black",
            borderWidth: 3,
          }}
        >
          <View style={styles.contentContainer}>
            <Text style={styles.text}>Awesome 🎉</Text>
            <Button
              onPress={handleCloseModalPress}
              title="Close Modal"
              color="black"
            />
          </View>
        </BottomSheetModal>
      </BottomSheetModalProvider>
    </GestureHandlerRootView>
  );
}

const styles = StyleSheet.create({
  text: {
    fontSize: 24,
    paddingVertical: 15,
  },
  container: {
    flex: 1,
    padding: 24,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
  contentContainer: {
    flex: 1,
    alignItems: "center",
  },
});

https://github.com/gorhom/react-native-bottom-sheet/assets/20333967/f246b5df-1f8a-4a13-8872-9402b2d4585c

Feb 15 '24 11:02 Benisy

Same on Huawei phone

@gorhom/bottom-sheet ^4.6.0
react-native 0.73.2
react-native-reanimated ~3.6.2
react-native-gesture-handler ~2.14.0
expo ~50.0.2

Feb 17 '24 12:02 eddi00

same on many phones from my userbase as well; the bottomsheet "blinks" for half a second and closes itself right away

@gorhom/bottom-sheet ^4.6.0 react-native 0.73.4 react-native-reanimated ~3.6.2 react-native-gesture-handler ~2.15.0

Did you guys try to test with earlier version of bottom-sheet if it works better? @eddi00 & @Benisy I am unable to replicate it on all my emulators, but seems like this happens on many different devices.

EDIT: I found this other thread guys: https://github.com/gorhom/react-native-bottom-sheet/issues/1674 Not sure but, if you guys are able to replicate the issue can you give it a try? Both the patch / the reduce motion config suggested at the bottom?

Feb 26 '24 15:02 pierroo

Same here : some Android devices have inconsistant behaviour from the bottom sheet. Sometimes it works perfectly, sometimes it never shows.

Mar 04 '24 07:03 Marcados

I've been getting reports of this happening recently for our app as well. Some Android devices, no obvious pattern.

Mar 08 '24 03:03 ericpoulinnz

I think it has to do with reduced motion accessibility settings. I had this issue, and disabling reduced motion fixed it. There are also other issues about it here.