[v5] Modal reopens while opening second, and while dismissing first modal #1561

devoren · 2023-10-05T09:16:02Z

Bug

Maybe similiar to #204
I have 2 modals and global state. When global state updates i dismiss first modal and open second modal

If i dismiss first modal, then: second modal reopens while opening

1.mp4

If i close first modal, then: second modal opens fine but if i close second modal, first modal reopens. (or is even not closed?)

2.mp4

Environment info

Library	Version
@gorhom/bottom-sheet	^5.0.0-alpha.3
react-native	0.72.5
react-native-reanimated	^3.5.1
react-native-gesture-handler	~2.12.0

Steps To Reproduce

Create 2 modals in 2 component
Open first modal
Close first modal and present second modal

Describe what you expected to happen:

When I dismiss first modal and present second modal
Second modal wont reopen

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

const presentBottomSheet = useCallback(() => {
bottomSheetModalRef.current?.present();
}, []);

const closeBottomSheet = useCallback(() => {
bottomSheetModalRef.current?.dismiss();
}, []);

const presentTeamBottomSheet = useCallback(() => {
bottomSheetModalRef.current?.dismiss();
teamBottomSheetModalRef.current?.present();
}, []);

const closeTeamBottomSheet = useCallback(() => {
teamBottomSheetModalRef.current?.dismiss();
}, []);

return <>
...
<BottomSheetModal
		ref={bottomSheetModalRef}
		index={0}
		snapPoints={snapPoints}
		backdropComponent={renderBackdrop}
		handleComponent={null}
		enableOverDrag={false}
		enablePanDownToClose={false}>
		<BottomSheetView
			style={{
				flex: 1,
			}}>
			<View style={styles.header}>
				<Text style={styles.name}>Список участников</Text>
				<Pressable style={styles.close} onPress={closeBottomSheet}>
					<View style={styles.icon}>
						<Icons.Close
							color={colors.gray400}
							width={scale.lg}
							height={scale.lg}
						/>
					</View>
				</Pressable>
			</View>
			<ScrollView
				contentContainerStyle={{
					paddingBottom: insets.bottom + scale.md,
					marginHorizontal: scale.md,
				}}>
				{teams.map((team) => {
					return (
						<Pressable
							key={team.id}
							style={styles.item}
							onPress={() => {
								presentTeamBottomSheet();
							}}>
							<TeamItem team={team} />
						</Pressable>
					);
				})}
			</ScrollView>
		</BottomSheetView>
	</BottomSheetModal>
	<BottomSheetModal
		ref={teamBottomSheetModalRef}
		snapPoints={animatedSnapPoints as any}
		contentHeight={animatedContentHeight}
		handleHeight={animatedHandleHeight}
		backdropComponent={renderTeamBackdrop}
		bottomInset={scale.md + insets.bottom}
		handleComponent={null}
		enableOverDrag={false}
		enablePanDownToClose={false}>
		<BottomSheetView
			style={{
				flex: 1,
			}}
			onLayout={handleContentLayout}>
			<View style={styles.header}>
				<Text style={styles.name}>{t('participateToOrder')}</Text>
				<Pressable style={styles.close} onPress={closeTeamBottomSheet}>
					<View style={styles.icon}>
						<Icons.Close
							color={colors.gray400}
							width={scale.lg}
							height={scale.lg}
						/>
					</View>
				</Pressable>
			</View>
			<View style={styles.contentContainer}>
				<Text>Some longh text about team round</Text>
				<Button label={t('joinToOrder')} onPress={joinToOrder} />
			</View>
		</BottomSheetView>
	</BottomSheetModal>
</>

The text was updated successfully, but these errors were encountered:

enchorb · 2023-10-05T21:21:43Z

Same issue here, this was fine in v4

devoren · 2023-10-15T16:30:34Z

@enchorb yeah same :( iam using v5 because of web support

Simoon-F · 2023-10-23T05:39:32Z

Same problem in v4.5.1.

Close the first modal and open the second modal
Close the second modal, the first modal pops up automatically

My temporary solution is to add a delay function in the middle :

xxx.current?.close();

await delay(600);

xxx.current?.present();

devoren · 2023-10-23T06:47:35Z

@Simoon-Fyes, I use delay too, but it looks laggy :(

github-actions · 2023-11-22T09:40:02Z

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.

devoren · 2023-11-22T10:05:01Z

the bug still exists

Bad-Listener · 2023-11-27T16:18:16Z

yeap, I confirm, still exists!

michaelbrant · 2023-12-19T23:15:01Z

anyone find a work around?

devoren · 2023-12-20T04:10:47Z

I'm using delays now, but it's still buggy

github-actions · 2024-01-19T09:40:07Z

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.

devoren · 2024-01-19T09:44:42Z

the bug still exists

cristiano-linvix · 2024-02-05T19:21:41Z

any suggestion to solve this problem?

michaelbrant · 2024-02-05T19:36:11Z

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>
  );
};

flodlc · 2024-02-15T23:41:48Z

Same here

cristiano-linvix · 2024-02-16T11:45:36Z

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!!!

github-actions · 2024-03-18T09:40:00Z

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.

devoren · 2024-03-18T10:17:48Z

bug still exists

POLEC4T · 2024-04-03T17:02:14Z

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.

michaelbrant · 2024-04-03T17:04:56Z

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";

POLEC4T · 2024-04-03T17:07:46Z

Thank you very much, It was because I was writing "{ BottomSheet }" instead of "BottomSheet"

POLEC4T · 2024-04-03T17:14:53Z

H

Could you please provide an example of a use the Sheet component you created ? Thank you.

michaelbrant · 2024-04-03T17:58:55Z

    <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

github-actions · 2024-05-04T09:40:10Z

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.

POLEC4T · 2024-05-04T15:16:15Z

bug still exists

SorooshDeveloper · 2024-06-02T12:34:33Z

bug still exists

MrgSub · 2024-06-05T21:03:49Z

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

SorooshDeveloper · 2024-06-06T18:43:01Z

@gorhom i get this issue when i set the first modal to be enableDismissonClose={false}

igorm-cr · 2024-06-14T13:32:58Z

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).

github-actions · 2024-07-15T09:40:01Z

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.

github-actions · 2024-07-20T09:40:11Z

This issue was closed because it has been stalled for 5 days with no activity.

R0LLeX · 2024-11-01T20:37:35Z

bug still exists

BR1G00 · 2024-11-11T22:37:41Z

You can fix this using this props on the modalstackBehavior="replace"

kipertech · 2024-12-02T17:38:04Z

Maybe not perfect but this is what I'm doing to work around both the "Reduce Motion" issue and this issue. When "Reduce Motion" is off then I just don't use this animation override at all.

(I am on 4.4.7 of this library, which doesn't have the ReduceMotion.Never implemented always).

// Reduce Motion issue: https://github.com/gorhom/react-native-bottom-sheet/pull/1743
const animationConfigs = useBottomSheetSpringConfigs({
    reduceMotion: ReduceMotion.Never,
    // Make it super fast so that it doesn't get blocked by subsequent animations / setStates
    mass: 0.1,
    duration: 10,
});

devoren added the bug Something isn't working label Oct 5, 2023

devoren changed the title ~~[v5] Modal reopens while opening, while dismissing another modal~~ [v5] Modal reopens while opening second, and while dismissing first modal Oct 5, 2023

github-actions bot added the no-issue-activity label Nov 22, 2023

github-actions bot removed the no-issue-activity label Nov 23, 2023

github-actions bot added the no-issue-activity label Jan 19, 2024

github-actions bot removed the no-issue-activity label Jan 20, 2024

github-actions bot added the no-issue-activity label Mar 18, 2024

github-actions bot removed the no-issue-activity label Mar 19, 2024

github-actions bot added the no-issue-activity label May 4, 2024

github-actions bot removed the no-issue-activity label May 5, 2024

github-actions bot added the no-issue-activity label Jul 15, 2024

github-actions bot closed this as completed Jul 20, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[v5] Modal reopens while opening second, and while dismissing first modal #1561

[v5] Modal reopens while opening second, and while dismissing first modal #1561

devoren commented Oct 5, 2023

enchorb commented Oct 5, 2023

devoren commented Oct 15, 2023

Simoon-F commented Oct 23, 2023 •

edited

Loading

devoren commented Oct 23, 2023

github-actions bot commented Nov 22, 2023

devoren commented Nov 22, 2023

Bad-Listener commented Nov 27, 2023

michaelbrant commented Dec 19, 2023

devoren commented Dec 20, 2023

github-actions bot commented Jan 19, 2024

devoren commented Jan 19, 2024

cristiano-linvix commented Feb 5, 2024

michaelbrant commented Feb 5, 2024

flodlc commented Feb 15, 2024

cristiano-linvix commented Feb 16, 2024

github-actions bot commented Mar 18, 2024

devoren commented Mar 18, 2024

POLEC4T commented Apr 3, 2024 •

edited

Loading

michaelbrant commented Apr 3, 2024

POLEC4T commented Apr 3, 2024

POLEC4T commented Apr 3, 2024 •

edited

Loading

michaelbrant commented Apr 3, 2024

github-actions bot commented May 4, 2024

POLEC4T commented May 4, 2024

SorooshDeveloper commented Jun 2, 2024

MrgSub commented Jun 5, 2024

SorooshDeveloper commented Jun 6, 2024

igorm-cr commented Jun 14, 2024

github-actions bot commented Jul 15, 2024

github-actions bot commented Jul 20, 2024

R0LLeX commented Nov 1, 2024

BR1G00 commented Nov 11, 2024

kipertech commented Dec 2, 2024 •

edited

Loading

[v5] Modal reopens while opening second, and while dismissing first modal #1561

[v5] Modal reopens while opening second, and while dismissing first modal #1561

Comments

devoren commented Oct 5, 2023

Bug

Environment info

Steps To Reproduce

Reproducible sample code

enchorb commented Oct 5, 2023

devoren commented Oct 15, 2023

Simoon-F commented Oct 23, 2023 • edited Loading

devoren commented Oct 23, 2023

github-actions bot commented Nov 22, 2023

devoren commented Nov 22, 2023

Bad-Listener commented Nov 27, 2023

michaelbrant commented Dec 19, 2023

devoren commented Dec 20, 2023

github-actions bot commented Jan 19, 2024

devoren commented Jan 19, 2024

cristiano-linvix commented Feb 5, 2024

michaelbrant commented Feb 5, 2024

flodlc commented Feb 15, 2024

cristiano-linvix commented Feb 16, 2024

github-actions bot commented Mar 18, 2024

devoren commented Mar 18, 2024

POLEC4T commented Apr 3, 2024 • edited Loading

michaelbrant commented Apr 3, 2024

POLEC4T commented Apr 3, 2024

POLEC4T commented Apr 3, 2024 • edited Loading

michaelbrant commented Apr 3, 2024

github-actions bot commented May 4, 2024

POLEC4T commented May 4, 2024

SorooshDeveloper commented Jun 2, 2024

MrgSub commented Jun 5, 2024

SorooshDeveloper commented Jun 6, 2024

igorm-cr commented Jun 14, 2024

github-actions bot commented Jul 15, 2024

github-actions bot commented Jul 20, 2024

R0LLeX commented Nov 1, 2024

BR1G00 commented Nov 11, 2024

kipertech commented Dec 2, 2024 • edited Loading

Simoon-F commented Oct 23, 2023 •

edited

Loading

POLEC4T commented Apr 3, 2024 •

edited

Loading

POLEC4T commented Apr 3, 2024 •

edited

Loading

kipertech commented Dec 2, 2024 •

edited

Loading