[Bug]: BottomSheetModal won't show up in EXPO SDK 52

[PrinceSP]

Version

v5

Reanimated Version

v3

Gesture Handler Version

v2

Platforms

iOS, Android

What happened?

I have a pressable button to open the bottomsheetmodal, and when I use the SDK 51, it works perfectly. So, the onPress function fires the bottomsheetRef.current.present() method, and the bottom sheet modal gonna show up to the snapPoints.

But yesterday I started to upgrade to expo SDK 52 and then update all the libraries to its latest version base on what expo-doctor ordered me to install.

And when I already finished upgrading the expo sdk, react native, and all libraries version, then I start and test the bottomsheetmodal if its still workin. But it doesn't show up anything, and when I checked using console.log, it gave me undefined for the bottomsheetRef.current.present() method. And the reanimated always gave me warnings about the value from bottom sheet everytime it got re-rendered on the screen.

I can't even open the bottommodalsheet on sdk 52 in this snack below that I got from ur sample code template:
https://snack.expo.dev/@gorhom/bottom-sheet---issue-reproduction-template

You can check the codes in Reproduction sample below.

Reproduction steps

Reproduction sample

https://snack.expo.dev/@princesp/test-maps

Relevant log output

No response

[whycody]

Same bug

[NicoKevin]

Have the same issue, please fix soon !

[rogeriojacome]

Mesmo problema aqui

[lmiguelm]

same

[robin-scharf]

Same

[benny-conn]

I am also having the same issue on SDK 52 with version 5.0.5. I find it only seems to not appear when I use a BottomSheetFlatList inside of a BottomSheetModal. I replaced the BottomSheetFlatList with a BottomSheetFlashList and it would show up only if there are items in the list. If the list was empty, even if there was a ListEmptyComponent the bottom sheet modal would not show up. There seems to be something wonky with the index parameter as well. Sometimes setting index={1} was required to make the sheet show up at the snap point I set. If I didn't it seemed to dynamically size.

Finally, the animation on appear for the flashlist when I was able to get it to appear seems to be a lot less performant than it was in expo SDK 51. The slide up is jerky when it was previously smooth.

[kurumicake]

Having the same issue with the update of Expo SDK 52, BottomSheet shows on Android devices but not IOS.

[trempoling69]

Same issue here in SDK 52 and version 5.0.5, looks like adding BottomSheetView inside BottomSheetModal work.

<BottomSheetModal
    index={1}
    ref={ref}
    snapPoints={snapPoints}
    backdropComponent={renderBackdrop}
    enablePanDownToClose={true}
    keyboardBehavior="interactive"
    footerComponent={renderFooter}
    onDismiss={onDismiss}
 >
    <BottomSheetView style={styles.contentSheetContainer}>
      <Text style={styles.contentSheetHeadline}>{title}</Text>
        {children}
    </BottomSheetView>
 </BottomSheetModal>

But I tried with BottomSheetScrollView inside BottomSheetModal and it don't want to show up

[Axhref11]

I recommend following this great tutorial to build a BottomSheet from Scratch.

https://www.youtube.com/watch?v=KvRqsRwpwhY

[hsmr29]

Same issue!

[gorhom]

it should be fixed with the latest release, thanks for reporting it

[PrinceSP]

it should be fixed with the latest release, thanks for reporting it

Thank you so much for your attention on this issue @gorhom ✨🥳

[NicoKevin]

it should be fixed with the latest release, thanks for reporting it

After upgrading to your latest release, I noticed that nothing has changed. Moreover, since Expo 52, your BottomSheet is not working as well as before.

Take a look at this simple component that was working perfectly before Expo 52, but now it doesn’t open :

import React, { useCallback } from "react";
import { View, Text, Dimensions } from "react-native";
import {
BottomSheetModal,
useBottomSheetSpringConfigs,
BottomSheetBackdrop,
} from "@gorhom/bottom-sheet";
import LinearGradientButton from "@/components/GradientButton";

const BottomSheetConfirmation = ({
refBottomSheet,
snapPoints,
isVisible,
onDismiss,
bottomSheetTitle,
onPressCancel,
iconNameCancel,
cancelText,
onPressConfirm,
iconNameConfirm,
confirmText,
}) => {
const animationConfigs = useBottomSheetSpringConfigs({
damping: 50,
overshootClamping: false,
restDisplacementThreshold: 100,
restSpeedThreshold: 100,
stiffness: 700,
});

const renderBackdrop = useCallback(
(props) => (
<BottomSheetBackdrop
{...props}
appearsOnIndex={1}
pressBehavior="close"
animatedIndex={{
value: 0.5,
}}
style={{
position: 'absolute',
width: Dimensions.get('window').width,
height: Dimensions.get('window').height,
top: -100,
}}
/>
),
[]
);

return (
<BottomSheetModal
ref={refBottomSheet}
snapPoints={snapPoints}
backdropComponent={renderBackdrop}
index={isVisible ? 0 : -1}
animationConfigs={animationConfigs}
backgroundStyle={{
borderRadius: 20,
shadowColor: "#000",
shadowOffset: { width: 0, height: 3 },
shadowOpacity: 0.27,
shadowRadius: 4.65,
elevation: 6,
}}
onDismiss={onDismiss}
>
<View
style={{
backgroundColor: "#fff",
justifyContent: "center",
alignItems: "center",
padding: 10,
marginBottom: 30,
}}
>
<Text
style={{
fontSize: 20,
fontFamily: "sg-m",
textAlign: "center",
}}
>
{bottomSheetTitle}

    <View
      style={{
        marginTop: 10,
        flexDirection: "row",
        justifyContent: "space-between",
        width: "80%",
      }}
    >
      <LinearGradientButton
        iconName={iconNameCancel}
        text={cancelText}
        onPress={onPressCancel}
        width={130}
        colors={["#000000", "#1F0F40"]}
      />
      <LinearGradientButton
        iconName={iconNameConfirm}
        text={confirmText}
        onPress={onPressConfirm}
        width={130}
      />
    </View>
  </View>
</BottomSheetModal>

);
};

export default BottomSheetConfirmation;