Closed devoren closed 1 month ago
Same issue here, this was fine in v4
@enchorb yeah same :( iam using v5 because of web support
Same problem in v4.5.1
.
My temporary solution is to add a delay function in the middle :
xxx.current?.close();
await delay(600);
xxx.current?.present();
@Simoon-Fyes, I use delay too, but it looks laggy :(
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.
the bug still exists
yeap, I confirm, still exists!
anyone find a work around?
I'm using delays now, but it's still buggy
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.
the bug still exists
any suggestion to solve this problem?
my workaround is..
if (!sheetOpen) { return null; }
The downside to this approach is that you don't get the animation of the modal closing when it switches to sheetOpen=false. I would love to use a better solution if someone has one!! This is a work around.
const Sheet = ({
sheetOpen,
setSheetOpen,
bottomSheetProps,
children,
onSheetClose,
footerComponent,
}: {
sheetOpen: boolean;
setSheetOpen: React.Dispatch<React.SetStateAction<boolean>>;
bottomSheetProps?: BottomSheetProps;
children?: React.ReactNode;
onSheetClose?: () => void;
footerComponent?: React.FC<BottomSheetFooterProps>;
}) => {
const bottomSheetRef = useRef<BottomSheet>(null);
// Snap points
const snapPoints = useMemo(() => ["80%"], []);
// Handle sheet state changes
const handleSheetChanges = useCallback(
(index: number) => {
if (index < 0) {
setSheetOpen(false);
Keyboard.dismiss();
onSheetClose && onSheetClose();
} else {
setSheetOpen(true);
}
},
[setSheetOpen, onSheetClose]
);
// Sync the sheet open state with the component's prop
useEffect(() => {
if (sheetOpen) {
bottomSheetRef.current?.expand();
} else {
bottomSheetRef.current?.close();
}
}, [sheetOpen]);
// Bottom sheet has a bug where another modal will open after closing one, so this is a workaround
// to not render the modal at all if it's not open.
// In order for this to work, the initial index had to be set to 0, which is the open state. -1 is closed.
if (!sheetOpen) {
return null;
}
return (
<Portal>
<BottomSheet
footerComponent={footerComponent}
ref={bottomSheetRef}
index={0}
snapPoints={snapPoints}
onChange={handleSheetChanges}
enablePanDownToClose={true}
backgroundStyle={{
borderTopRightRadius: 30,
borderTopLeftRadius: 30,
backgroundColor: "#f8f6ff",
}}
{...bottomSheetProps}
>
<View style={styles.contentContainer}>{children}</View>
</BottomSheet>
</Portal>
);
};
Same here
my workaround is..
- Create a custom component called Sheet to use for all bottom sheets in my app. (see code below)
- manage the close state from a parent component. So if the modal closes, the parent component sets a state variable sheetOpen to false.
- If sheetOpen is false, don't render the modal. This ensures there aren't other instances of the Sheet opening.
if (!sheetOpen) { return null; }
The downside to this approach is that you don't get the animation of the modal closing when it switches to sheetOpen=false. I would love to use a better solution if someone has one!! This is a work around.
const Sheet = ({ sheetOpen, setSheetOpen, bottomSheetProps, children, onSheetClose, footerComponent, }: { sheetOpen: boolean; setSheetOpen: React.Dispatch<React.SetStateAction<boolean>>; bottomSheetProps?: BottomSheetProps; children?: React.ReactNode; onSheetClose?: () => void; footerComponent?: React.FC<BottomSheetFooterProps>; }) => { const bottomSheetRef = useRef<BottomSheet>(null); // Snap points const snapPoints = useMemo(() => ["80%"], []); // Handle sheet state changes const handleSheetChanges = useCallback( (index: number) => { if (index < 0) { setSheetOpen(false); Keyboard.dismiss(); onSheetClose && onSheetClose(); } else { setSheetOpen(true); } }, [setSheetOpen, onSheetClose] ); // Sync the sheet open state with the component's prop useEffect(() => { if (sheetOpen) { bottomSheetRef.current?.expand(); } else { bottomSheetRef.current?.close(); } }, [sheetOpen]); // Bottom sheet has a bug where another modal will open after closing one, so this is a workaround // to not render the modal at all if it's not open. // In order for this to work, the initial index had to be set to 0, which is the open state. -1 is closed. if (!sheetOpen) { return null; } return ( <Portal> <BottomSheet footerComponent={footerComponent} ref={bottomSheetRef} index={0} snapPoints={snapPoints} onChange={handleSheetChanges} enablePanDownToClose={true} backgroundStyle={{ borderTopRightRadius: 30, borderTopLeftRadius: 30, backgroundColor: "#f8f6ff", }} {...bottomSheetProps} > <View style={styles.contentContainer}>{children}</View> </BottomSheet> </Portal> ); };
This works for me!!!
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.
bug still exists
my workaround is..
- Create a custom component called Sheet to use for all bottom sheets in my app. (see code below)
- manage the close state from a parent component. So if the modal closes, the parent component sets a state variable sheetOpen to false.
- If sheetOpen is false, don't render the modal. This ensures there aren't other instances of the Sheet opening.
if (!sheetOpen) { return null; }
The downside to this approach is that you don't get the animation of the modal closing when it switches to sheetOpen=false. I would love to use a better solution if someone has one!! This is a work around.
const Sheet = ({ sheetOpen, setSheetOpen, bottomSheetProps, children, onSheetClose, footerComponent, }: { sheetOpen: boolean; setSheetOpen: React.Dispatch<React.SetStateAction<boolean>>; bottomSheetProps?: BottomSheetProps; children?: React.ReactNode; onSheetClose?: () => void; footerComponent?: React.FC<BottomSheetFooterProps>; }) => { const bottomSheetRef = useRef<BottomSheet>(null); // Snap points const snapPoints = useMemo(() => ["80%"], []); // Handle sheet state changes const handleSheetChanges = useCallback( (index: number) => { if (index < 0) { setSheetOpen(false); Keyboard.dismiss(); onSheetClose && onSheetClose(); } else { setSheetOpen(true); } }, [setSheetOpen, onSheetClose] ); // Sync the sheet open state with the component's prop useEffect(() => { if (sheetOpen) { bottomSheetRef.current?.expand(); } else { bottomSheetRef.current?.close(); } }, [sheetOpen]); // Bottom sheet has a bug where another modal will open after closing one, so this is a workaround // to not render the modal at all if it's not open. // In order for this to work, the initial index had to be set to 0, which is the open state. -1 is closed. if (!sheetOpen) { return null; } return ( <Portal> <BottomSheet footerComponent={footerComponent} ref={bottomSheetRef} index={0} snapPoints={snapPoints} onChange={handleSheetChanges} enablePanDownToClose={true} backgroundStyle={{ borderTopRightRadius: 30, borderTopLeftRadius: 30, backgroundColor: "#f8f6ff", }} {...bottomSheetProps} > <View style={styles.contentContainer}>{children}</View> </BottomSheet> </Portal> ); };
Hey, I'm trying to reproduce your workaround. However you didn't provide your imports, could you tell me what is "Portal" ? Also, are you importing "BottomSheet" from "@gorhom/bottom-sheet" ? Because it says this :
"'"@gorhom/bottom-sheet"' has no exported member named 'BottomSheet'. Did you mean 'useBottomSheet'?ts(2724) import BottomSheet"
when I type
import { BottomSheet } from "@gorhom/bottom-sheet";
Thank you.
Here are my imports, I'm not sure why BottomSheet isn't resolving for you..
import React, { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
import BottomSheet, { BottomSheetBackdrop, BottomSheetFooterProps, BottomSheetProps } from "@gorhom/bottom-sheet";
import { BottomSheetDefaultBackdropProps } from "@gorhom/bottom-sheet/lib/typescript/components/bottomSheetBackdrop/types";
import { Keyboard, StyleSheet, View } from "react-native";
import { Portal } from "@gorhom/portal";
Thank you very much, It was because I was writing "{ BottomSheet }" instead of "BottomSheet"
H
Could you please provide an example of a use the Sheet component you created ? Thank you.
<Sheet
sheetOpen={sheetOpen}
setSheetOpen={setSheetOpen}
bottomSheetProps={{
snapPoints: ["70%"],
backgroundStyle: {
backgroundColor: "#5423E7",
},
children: <></>,
}}
key={"recommend-sheet"}
>
put stuff in the sheet here
</Sheet>```
setSheetOpen is a function to set state and sheetOpen is the boolean from useState
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.
bug still exists
bug still exists
I solved this issue using a sleepAsync
function.
The bottom sheet needs to be fully closed before any rendering changes happen on your screen, otherwise it pops back up (for some reason).
Here's what I did;
bottomSheetModalRef.current?.close();
await sleepAsync(200);
// Do anything else with the page
@gorhom i get this issue when i set the first modal to be enableDismissonClose={false}
Facing this and similar possibly related issue in latest alpha as well.
Using dismiss() makes the dismissed sheet pop back up no matter what you do in case there is some change in state or data that triggers rendering in the sheet.
Using close() fixes the issue partially but in my case I also had to delay any data/state changes for more than 250ms (this is the time for the sheet to fully animate).
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.
This issue was closed because it has been stalled for 5 days with no activity.
Bug
Maybe similiar to https://github.com/gorhom/react-native-bottom-sheet/issues/204 I have 2 modals and global state. When global state updates i dismiss first modal and open second modal 1) If i dismiss first modal, then: second modal reopens while opening
https://github.com/gorhom/react-native-bottom-sheet/assets/99968085/85e760d6-c800-47f5-a4bf-983c9dab2a2b
2) If i close first modal, then: second modal opens fine but if i close second modal, first modal reopens. (or is even not closed?)
https://github.com/gorhom/react-native-bottom-sheet/assets/99968085/c653b295-c0c4-4907-83bf-e1f020cd38b3
Environment info
Steps To Reproduce
Describe what you expected to happen:
Reproducible sample code
I thought that the modal is reopened because the global state changes, but this is not the case: while opening the second modal and closing the first modal, the second modal still reopens