Closed PrinceSP closed 4 days ago
Same bug
Have the same issue, please fix soon !
Mesmo problema aqui
same
Same
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.
Having the same issue with the update of Expo SDK 52, BottomSheet shows on Android devices but not IOS.
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
I recommend following this great tutorial to build a BottomSheet from Scratch.
Same issue!
it should be fixed with the latest release, thanks for reporting it
it should be fixed with the latest release, thanks for reporting it
Thank you so much for your attention on this issue @gorhom ✨🥳
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;
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
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>
);
}
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...
enableDynamicSizing={false}
May have fixed it for me
enableDynamicSizing={false}
May have fixed it for me
This worked for me as well. Made no other change. Thanks man.
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 thevalue
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