[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

[RobSteward]

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;

[NicoKevin]

Ok for those who have an issue i have a fix for you.

Just add a BottomSheetView component from the same library inside the BottomSheetModal

If you ask me why we need to add this with Expo 52 and not in expo 51 so go figure...cause i don't know

[kngf222]

I am still struggling with this after upgrading to 5.0.6 for bottom sheet.

when i press a button to open my bottom sheet, the sheet doesn't pull up at all and there's only a white sliver at the bottom of my screen that i have to carefully press and pull up to get it to open all the way to the top snap point. but the opacity layer that darkens the screen behind the sheet does show up like normal.

import React, { useCallback, useMemo, useRef } from 'react';
import { View } from 'react-native';
import BottomSheet, { 
  BottomSheetBackdrop,
  BottomSheetView,
} from '@gorhom/bottom-sheet';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { Portal } from '@rn-primitives/portal';
import { useTheme } from '~/lib/context/theme/theme';

// Export the BottomSheet type as SheetRef
export type SheetRef = BottomSheet;

interface SheetProps {
  isOpen: boolean;
  onClose: () => void;
  children: React.ReactNode;
  snapPoints?: (string | number)[];
  sheetRef?: React.RefObject<SheetRef>;
  topInset?: number;
  initialIndex?: number;
}

export function Sheet({ 
  isOpen, 
  onClose, 
  children, 
  snapPoints: initialSnapPoints = ['25%', '50%', '90%'],
  sheetRef: externalRef,
  topInset = 0,
  initialIndex = 0,
}: SheetProps) {
  const internalRef = useRef<BottomSheet>(null);
  const bottomSheetRef = externalRef || internalRef;
  const insets = useSafeAreaInsets();
  const { themeColors: theme } = useTheme();
  
  const initialSnapPointsArray = useMemo(() => initialSnapPoints, [initialSnapPoints]);
  
  const processedSnapPoints = useMemo(() => 
    initialSnapPoints.map(point => 
      typeof point === 'string' && point.endsWith('%') 
        ? point 
        : Number(point)
    ), 
    [initialSnapPoints]
  );

  const renderBackdrop = useCallback(
    (props: any) => (
      <BottomSheetBackdrop
        {...props}
        disappearsOnIndex={-1}
        appearsOnIndex={0}
        opacity={0.5}
        pressBehavior="close"
      />
    ),
    []
  );

  const handleSheetChange = useCallback((index: number) => {
    if (index === -1) {
      onClose();
    }
  }, [onClose]);

  React.useEffect(() => {
    if (isOpen) {
      bottomSheetRef.current?.expand();
    } else {
      bottomSheetRef.current?.close();
    }
  }, [isOpen]);

  if (!isOpen) return null;

  return (
    <Portal name="bottom-sheet">
      <BottomSheet
        ref={bottomSheetRef}
        index={initialIndex}
        snapPoints={processedSnapPoints}
        onChange={handleSheetChange}
        backdropComponent={renderBackdrop}
        handleIndicatorStyle={{
          backgroundColor: theme.border,
          width: 32,
          height: 4,
          borderRadius: theme.defaultBorderRadius / 2
        }}
        backgroundStyle={{
          backgroundColor: theme.background,
        }}
        handleStyle={{
          backgroundColor: theme.background,
          borderTopLeftRadius: theme.cardRadius,
          borderTopRightRadius: theme.cardRadius,
        }}
        topInset={topInset}
        enablePanDownToClose
        enableOverDrag={false}
        style={{
          borderTopLeftRadius: theme.cardRadius,
          borderTopRightRadius: theme.cardRadius,
          overflow: 'hidden',
          shadowColor: theme.muted.color,
          shadowOffset: { width: 0, height: -2 },
          shadowOpacity: 0.1,
          shadowRadius: 3,
          elevation: 2
        }}
      >
        <BottomSheetView 
          style={{ 
            flex: 1,
            backgroundColor: theme.background,
          }}
        >
          {children}
        </BottomSheetView>
      </BottomSheet>
    </Portal>
  );
} 

[kngf222]

I am still struggling with this after upgrading to 5.0.6 for bottom sheet.

when i press a button to open my bottom sheet, the sheet doesn't pull up at all and there's only a white sliver at the bottom of my screen that i have to carefully press and pull up to get it to open all the way to the top snap point. but the opacity layer that darkens the screen behind the sheet does show up like normal.

import React, { useCallback, useMemo, useRef } from 'react';
import { View } from 'react-native';
import BottomSheet, { 
  BottomSheetBackdrop,
  BottomSheetView,
} from '@gorhom/bottom-sheet';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { Portal } from '@rn-primitives/portal';
import { useTheme } from '~/lib/context/theme/theme';

// Export the BottomSheet type as SheetRef
export type SheetRef = BottomSheet;

interface SheetProps {
  isOpen: boolean;
  onClose: () => void;
  children: React.ReactNode;
  snapPoints?: (string | number)[];
  sheetRef?: React.RefObject<SheetRef>;
  topInset?: number;
  initialIndex?: number;
}

export function Sheet({ 
  isOpen, 
  onClose, 
  children, 
  snapPoints: initialSnapPoints = ['25%', '50%', '90%'],
  sheetRef: externalRef,
  topInset = 0,
  initialIndex = 0,
}: SheetProps) {
  const internalRef = useRef<BottomSheet>(null);
  const bottomSheetRef = externalRef || internalRef;
  const insets = useSafeAreaInsets();
  const { themeColors: theme } = useTheme();
  
  const initialSnapPointsArray = useMemo(() => initialSnapPoints, [initialSnapPoints]);
  
  const processedSnapPoints = useMemo(() => 
    initialSnapPoints.map(point => 
      typeof point === 'string' && point.endsWith('%') 
        ? point 
        : Number(point)
    ), 
    [initialSnapPoints]
  );

  const renderBackdrop = useCallback(
    (props: any) => (
      <BottomSheetBackdrop
        {...props}
        disappearsOnIndex={-1}
        appearsOnIndex={0}
        opacity={0.5}
        pressBehavior="close"
      />
    ),
    []
  );

  const handleSheetChange = useCallback((index: number) => {
    if (index === -1) {
      onClose();
    }
  }, [onClose]);

  React.useEffect(() => {
    if (isOpen) {
      bottomSheetRef.current?.expand();
    } else {
      bottomSheetRef.current?.close();
    }
  }, [isOpen]);

  if (!isOpen) return null;

  return (
    <Portal name="bottom-sheet">
      <BottomSheet
        ref={bottomSheetRef}
        index={initialIndex}
        snapPoints={processedSnapPoints}
        onChange={handleSheetChange}
        backdropComponent={renderBackdrop}
        handleIndicatorStyle={{
          backgroundColor: theme.border,
          width: 32,
          height: 4,
          borderRadius: theme.defaultBorderRadius / 2
        }}
        backgroundStyle={{
          backgroundColor: theme.background,
        }}
        handleStyle={{
          backgroundColor: theme.background,
          borderTopLeftRadius: theme.cardRadius,
          borderTopRightRadius: theme.cardRadius,
        }}
        topInset={topInset}
        enablePanDownToClose
        enableOverDrag={false}
        style={{
          borderTopLeftRadius: theme.cardRadius,
          borderTopRightRadius: theme.cardRadius,
          overflow: 'hidden',
          shadowColor: theme.muted.color,
          shadowOffset: { width: 0, height: -2 },
          shadowOpacity: 0.1,
          shadowRadius: 3,
          elevation: 2
        }}
      >
        <BottomSheetView 
          style={{ 
            flex: 1,
            backgroundColor: theme.background,
          }}
        >
          {children}
        </BottomSheetView>
      </BottomSheet>
    </Portal>
  );
} 

lol it just randomly started working. i made an update to an animated view on the same page where the bottom sheet is rendered. react native 0.76 changed the way they deal with animated views so i suppose fixing that somehow played a role i in fixing the issue with my bottom sheet? not sure but that's the only thing i changed that made the bottom sheet start working properly without changing any of the code in the bottom sheet

Update: yes it was completely random because now it randomly stopped working again. man, this upgrade to Expo SDK 52 is gonna be fun...

[JoshIri360]

enableDynamicSizing={false}

May have fixed it for me

[shihabist]

enableDynamicSizing={false}

May have fixed it for me

This worked for me as well. Made no other change. Thanks man.

[diazdell91]

@shihabist Thanks, This worked for me as well

[imran443]

It worked for me as well!

enableDynamicSizing={false}

May have fixed it for me

Any reason why this is the case?

[pasza01]

enableDynamicSizing={false}

May have fixed it for me

I have been looking for this solution for past 4 days . I was about to lose my mind.. thank you for solution

[rajput7772]

enableDynamicSizing={false}

May have fixed it for me

Thanks for the fix

[endritbajrami]

enableDynamicSizing={false}

May have fixed it for me

Worked for me as well!

[trimi]

enableDynamicSizing={false}

May have fixed it for me

This fixed it for some users, but not all (which is super strange), does anyone have an alternative solution?

[globalesur-df]

enableDynamicSizing={false} works for me too!! Thanks a lot!

[haydencrain]

I felt that since there's still reports here that this issue is still occurring (and I'm able to reproduce in Expo Snack) I thought that we'd best re-open it 🙏 #2126