[v4] | Don't work on Android device - vivo Y31

[Benisy]

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

1. Launch the app in Android vivo Y31
2. 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",
  },
});

original-3EA678F3-B4C8-41A7-BE67-5866790FC900.mp4

[eddi00]

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

[pierroo]

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: #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?

[Marcados]

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

[ericpoulinnz]

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

[danieldunderfelt]

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.

[starrymedia]

It is related to reanimated with reduced motion, here is a patch that can temporarily fix this issue.

@gorhom+bottom-sheet+4.6.0.patch

[next6leo]

happen to me also "@gorhom/bottom-sheet": "^4.5.1", "react-native-reanimated": "3.3.0",

[github-actions]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.

[github-actions]

This issue was closed because it has been stalled for 5 days with no activity.