Can't navigate to modal screen from ActionSheet

[jezzdk]

Description

From an ActionSheet, I expected to be able to close the ActionSheet and navigate to a modal screen when a button is clicked.

CodeSandbox/Snack link

No response

Steps to reproduce

1. Go to '...'
2. Click on '...'
3. Scroll down to '...'
4. See error

gluestack-ui Version

1.1.8

Platform

• [X] Expo
• [ ] React Native CLI
• [ ] Next
• [ ] Web
• [ ] Android
• [ ] iOS

Other Platform

No response

Additional Information

I'm using Expo Router and I have a screen that is defined as a modal screen. I have another screen with an ActionSheet, and in the ActionSheet there is a button that close the ActionSheet and navigates to the modal screen when clicked.

• If I call handleClose(), the ActionSheet is closed but the page doesn't navigate to the modal screen.
• If I dont't call handleClose(), the ActionSheet is not closed but the page navigates to the modal screen.
• If the modal screen is defined as a normal screen (without { presentation: "modal" }), and I call handleClose(), then the ActionSheet is closed and the page navigates to the screen.

This is the _layout.tsx file:

import { Stack } from "expo-router";

export default function Layout() {
  return (
    <Stack
      screenOptions={{
        headerShown: false,
      }}
    >
      <Stack.Screen name="index" />
      <Stack.Screen name="create" options={{ presentation: "modal" }} />
    </Stack>
  );
}

This is the index.tsx file:

import { useState } from "react";
import { router } from "expo-router";
import {
  Actionsheet,
  ActionsheetBackdrop,
  ActionsheetContent,
  ActionsheetDragIndicator,
  ActionsheetDragIndicatorWrapper,
  Button,
  ButtonIcon,
  ButtonText,
  Text,
  VStack,
  View,
} from "@gluestack-ui/themed";

export default function Index() {
  const [showActionsheet, setShowActionsheet] = useState(false);

  const handleClose = () => {
    setShowActionsheet(false);
  };

  return (
    <View>
      <Button onPress={() => setShowActionsheet(true)}>
        <ButtonIcon as={PlusIcon} />
      </Button>
      <Actionsheet isOpen={showActionsheet} onClose={handleClose} useRNModal>
        <ActionsheetBackdrop />
        <ActionsheetContent maxHeight="75%">
          <ActionsheetDragIndicatorWrapper>
            <ActionsheetDragIndicator />
          </ActionsheetDragIndicatorWrapper>
          <VStack>
            <Button onPress={() => {
              router.navigate("/create");
              handleClose(); // <-- with this it won't navigate
            }}>
              <ButtonText>Create</ButtonText>
            </Button>
          </VStack>
        </ActionsheetContent>
      </Actionsheet>
    </View>
  );
}

[GoldMyr1994]

Hi @jezzdk , I hope I understood correctly, does this happen also if you remove 'useRNModal' from actionsheet??

I think, but not sure, I have a similar issue.

In my case I had to keep 'useRNModal' because I want to present it on top of some 'modal screens', in this case for now I'm setting a timeout(0.5s) to navigate to the modal screen after closing actionsheet, if the actionsheet is not fully closed somehow in my case the modal screen is not appearing.

I don't like timeout solution but it is working for now.

This started to happen in my project when I switched to expo sdk 50, with 49 it was working.

[surajahmed]

@jezzdk Thanks for reporting this. We'll have a look.