gorhom / react-native-bottom-sheet

A performant interactive bottom sheet with fully configurable options 🚀
https://gorhom.dev/react-native-bottom-sheet/
MIT License
7.08k stars 777 forks source link

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

Closed PrinceSP closed 4 days ago

PrinceSP commented 1 week ago

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.

Screen Shot 2024-11-14 at 16 51 38

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 commented 1 week ago

Same bug

NicoKevin commented 1 week ago

Have the same issue, please fix soon !

rogeriojacome commented 1 week ago

Mesmo problema aqui

lmiguelm commented 1 week ago

same

RobSteward commented 1 week ago

Same

benny-conn commented 1 week ago

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 commented 6 days ago

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

trempoling69 commented 6 days ago

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 commented 5 days ago

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

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

hsmr29 commented 5 days ago

Same issue!

gorhom commented 4 days ago

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

PrinceSP commented 3 days ago

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

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

NicoKevin commented 3 days ago

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 commented 3 days ago

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 commented 2 days ago

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 commented 2 days ago

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 commented 22 hours ago

enableDynamicSizing={false}

May have fixed it for me

shihabist commented 19 hours ago

enableDynamicSizing={false}

May have fixed it for me

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