[ BUG ] Portal issue on iOS, RN without expo

[ndrkltsk]

Describe the bug
It seems to be portal related, I currently working with AlertDialog but every component that requires PortalHost has the same issue.
React Native without expo.
Working on iOS, didn't tried Android yet.
While pressing the trigger, the state actually changes, open property goes from false to true, but nothing happens on screen.
I've tested directly using Portal and it seems to work as aspected.

I have <PortalHost/> as last child in my main app.tsx file.

function App() {
  return (
    <>
      <GestureHandlerRootView>
        <SafeAreaProvider>
          <LocalizationProvider>
            <NetworkStatusProvider>
              <QueryProvider>
                <AuthProvider>
                  <ClarityProvider>
                    <NavigationProvider />
                  </ClarityProvider>
                </AuthProvider>
              </QueryProvider>
            </NetworkStatusProvider>
          </LocalizationProvider>
        </SafeAreaProvider>
      </GestureHandlerRootView>
      <PortalHost />
    </>
  );
}

Testing screen with AlertDialog and direct portal test

import React, {useState} from 'react';
import {SafeAreaView, View} from 'react-native';
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from '~/components/ui/alert-dialog';
import {Button} from '~/components/ui/button';
import {Portal} from '@rn-primitives/portal';

import {Text} from '~/components/ui/text/text.component';

export default function TestScreen() {
  const [showPortalTest, setShowPortalTest] = useState(false);

  // Test portal directly
  const togglePortalTest = () => {
    setShowPortalTest(!showPortalTest);
  };

  return (
    <SafeAreaView
      style={{
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        gap: 20,
      }}>
      <AlertDialog>
        <AlertDialogTrigger asChild>
          <Button variant="outline">
            <Text>Show Alert Dialog</Text>
          </Button>
        </AlertDialogTrigger>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
            <AlertDialogDescription>
              This action cannot be undone. This will permanently delete your
              account and remove your data from our servers.
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel>
              <Text>Cancel</Text>
            </AlertDialogCancel>
            <AlertDialogAction>
              <Text>Continue</Text>
            </AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>

      {/* Direct portal test */}
      <Button onPress={togglePortalTest}>
        <Text>Toggle Direct Portal Test</Text>
      </Button>

      {/* Direct portal test */}
      {showPortalTest && (
        <Portal name="test-portal">
          <View
            style={{
              position: 'absolute',
              top: 0,
              left: 0,
              right: 0,
              bottom: 0,
              backgroundColor: 'rgba(0,0,0,0.5)',
              justifyContent: 'center',
              alignItems: 'center',
              zIndex: 1000,
            }}>
            <View
              style={{
                backgroundColor: 'white',
                padding: 20,
                borderRadius: 8,
                margin: 20,
              }}>
              <Text style={{color: 'black', marginBottom: 10}}>
                Portal Test Working!
              </Text>
              <Button onPress={togglePortalTest}>
                <Text>Close Portal Test</Text>
              </Button>
            </View>
          </View>
        </Portal>
      )}
    </SafeAreaView>
  );
}

Pressing on "Show Alert Dialog" button, show nothing, but the state get updated.
Pressing on "Toggle Direct Portal Test" actually shows a Dialog, so I assume that the PortalHost configuration is fine.

Expected behavior
Dialog should appears.

Screenshots
If applicable, add screenshots to help explain your problem.

Platform (please complete the following information):

• Type: Simulator, Device
• OS: iOS

[mrzachnugent]

Hey @ndrkltsk, can you provide a minimal reproduction repo?

[mohitramani249]

same issues but getting this error:
ERROR Warning: Error: NativeViewGestureHandler must be used as a descendant of GestureHandlerRootView. Otherwise the gestures will not be recognized. See https://docs.swmansion.com/react-native-gesture-handler/docs/installation for more details.
main layout file: layout.tsx

import "~/global.css";

import {
    DarkTheme,
    DefaultTheme,
    Theme,
    ThemeProvider,
} from "@react-navigation/native";
import { setAndroidNavigationBar } from "~/lib/android-navigation-bar";
import { GestureHandlerRootView } from "react-native-gesture-handler";
import { QueryProvider } from "~/providers/query-provider";
import { useColorScheme } from "~/hooks/use-color-scheme";
import { AuthProvider } from "~/contexts/auth-context";
import { Appearance, Platform } from "react-native";
import { PortalHost } from "@rn-primitives/portal";
import { StatusBar } from "expo-status-bar";
import { NAV_THEME } from "~/lib/constants";
import { Stack } from "expo-router";
import * as React from "react";

const LIGHT_THEME: Theme = {
    ...DefaultTheme,
    colors: NAV_THEME.light,
};
const DARK_THEME: Theme = {
    ...DarkTheme,
    colors: NAV_THEME.dark,
};

export {
    // Catch any errors thrown by the Layout component.
    ErrorBoundary,
} from "expo-router";

const usePlatformSpecificSetup = Platform.select({
    web: useSetWebBackgroundClassName,
    android: useSetAndroidNavigationBar,
    default: noop,
});

export default function RootLayout() {
    usePlatformSpecificSetup();
    const { isDarkColorScheme, themeColors } = useColorScheme();

    return (
        <QueryProvider>
            <AuthProvider>
                <ThemeProvider
                    value={isDarkColorScheme ? DARK_THEME : LIGHT_THEME}
                >
                    <StatusBar style={isDarkColorScheme ? "light" : "dark"} />
                    <GestureHandlerRootView style={{ flex: 1 }}>
                        <Stack screenOptions={{ headerShown: false }}>
                            <Stack.Screen name="(app)" />
                            <Stack.Screen name="(auth)" />
                        </Stack>
                    </GestureHandlerRootView>
                     <PortalHost />
                </ThemeProvider>
            </AuthProvider>
        </QueryProvider>
    );
}

const useIsomorphicLayoutEffect =
    Platform.OS === "web" && typeof window === "undefined"
        ? React.useEffect
        : React.useLayoutEffect;

function useSetWebBackgroundClassName() {
    useIsomorphicLayoutEffect(() => {
        // Adds the background color to the html element to prevent white background on overscroll.
        document.documentElement.classList.add("bg-background");
    }, []);
}

function useSetAndroidNavigationBar() {
    React.useLayoutEffect(() => {
        setAndroidNavigationBar(Appearance.getColorScheme() ?? "light");
    }, []);
}

function noop() { }

It worked when I put the PortHost inside the GestureHandlerRootView, but about 1 out of 3 times, the tooltip crashes the entire app in both development and production.

[mrzachnugent]

@mohitramani249 Yes, if you put the PortalHost outside of a provider, the content inside the Portal components like the Tooltip will no longer have access to the content of that provider.

Not sure I understand this part:

some 1 of 3 times tooltip crash the whole app in all build

Does that mean the app crashes when the PortalHost is outside of the Provider?

[mohitramani249]

@mohitramani249 Yes, if you put the PortalHost outside of a provider, the content inside the Portal components like the Tooltip will no longer have access to the content of that provider.

Not sure I understand this part:

some 1 of 3 times tooltip crash the whole app in all build

Does that mean the app crashes when the PortalHost is outside of the Provider?

It worked when I put the PortHost inside the GestureHandlerRootView, but about 1 out of 3 times, the tooltip crashes the entire app in both development and production.

[mohitramani249]

For this also, It also crashes sometimes, randomly.

import "~/global.css";

import {
    DarkTheme,
    DefaultTheme,
    Theme,
    ThemeProvider,
} from "@react-navigation/native";
import { setAndroidNavigationBar } from "~/lib/android-navigation-bar";
import { GestureHandlerRootView } from "react-native-gesture-handler";
import { SafeAreaProvider } from "react-native-safe-area-context";
import { QueryProvider } from "~/providers/query-provider";
import { useColorScheme } from "~/hooks/use-color-scheme";
import { AuthProvider } from "~/contexts/auth-context";
import { Appearance, Platform } from "react-native";
import { PortalHost } from "@rn-primitives/portal";
import { StatusBar } from "expo-status-bar";
import { NAV_THEME } from "~/lib/constants";
import { Stack } from "expo-router";
import * as React from "react";

const LIGHT_THEME: Theme = {
    ...DefaultTheme,
    colors: NAV_THEME.light,
};
const DARK_THEME: Theme = {
    ...DarkTheme,
    colors: NAV_THEME.dark,
};

export {
    // Catch any errors thrown by the Layout component.
    ErrorBoundary,
} from "expo-router";

const usePlatformSpecificSetup = Platform.select({
    web: useSetWebBackgroundClassName,
    android: useSetAndroidNavigationBar,
    default: noop,
});

// Placeholder providers - implement these based on your needs
const LocalizationProvider = ({ children }: { children: React.ReactNode }) => <>{children}</>;
const NetworkStatusProvider = ({ children }: { children: React.ReactNode }) => <>{children}</>;
const ClarityProvider = ({ children }: { children: React.ReactNode }) => <>{children}</>;

const NavigationProvider = () => {
    const { isDarkColorScheme } = useColorScheme();

    return (
        <ThemeProvider value={isDarkColorScheme ? DARK_THEME : LIGHT_THEME}>
            <StatusBar style={isDarkColorScheme ? "light" : "dark"} />
            <Stack screenOptions={{ headerShown: false }}>
                <Stack.Screen name="(app)" />
                <Stack.Screen name="(auth)" />
            </Stack>
            <PortalHost />
        </ThemeProvider>
    );
};

export default function RootLayout() {
    usePlatformSpecificSetup();

    return (
        <>
            <GestureHandlerRootView style={{ flex: 1 }}>
                <SafeAreaProvider>
                    <LocalizationProvider>
                        <NetworkStatusProvider>
                            <QueryProvider>
                                <AuthProvider>
                                    <ClarityProvider>
                                        <NavigationProvider />
                                    </ClarityProvider>
                                </AuthProvider>
                            </QueryProvider>
                        </NetworkStatusProvider>
                    </LocalizationProvider>
                </SafeAreaProvider>
            </GestureHandlerRootView>
        </>
    );
}

const useIsomorphicLayoutEffect =
    Platform.OS === "web" && typeof window === "undefined"
        ? React.useEffect
        : React.useLayoutEffect;

function useSetWebBackgroundClassName() {
    useIsomorphicLayoutEffect(() => {
        // Adds the background color to the html element to prevent white background on overscroll.
        document.documentElement.classList.add("bg-background");
    }, []);
}

function useSetAndroidNavigationBar() {
    React.useLayoutEffect(() => {
        setAndroidNavigationBar(Appearance.getColorScheme() ?? "light");
    }, []);
}

function noop() { }

[mrzachnugent]

@mohitramani249 please create a new issue with a minimal reproduction repo (required)

[mohitramani249]

@mrzachnugent Thanks for the support! I’ll do this ASAP.
Here’s a screenshot of the error I’m getting:

@mohitramani249 please create a new issue with a minimal reproduction repo (required)

[matthewaptaylor]

FIX:

I had this issue running in a PNPM monorepo, without Expo, on RN for Windows, Android, and iOS. While I had placed PortalHost from @rn-primitives/portal in my App.tsx as the docs instruct, and @rn-primitives/select uses the same @rn-primitives/portal import internally, these imports did not use the same instance. This means that, even though I only have one @rn-primitives/portal in my node_modules folder, the context and Zustand store in @rn-primitives/portal used different instances between my app and @rn-primitives/select. I have patched the @rn-primitives/select package to re-export its instance of PortalHost, and am using this in my App.tsx.

import React from "react";

import "./global.css";

import { PortalHost } from "@rn-primitives/portal";
import { PortalHost as SelectPortalHost } from "@rn-primitives/select";

export default function App() {
  return (
    <>
      {/* Place other components here */}
      <PortalHost />
      <SelectPortalHost />
    </>
  );
}

diff --git a/dist/select.d.mts b/dist/select.d.mts
index 3292308c0c1f93a4f784955afdaaf4179889f6ab..d1801a69e335a54860798f42008b3b63b207445f 100644
--- a/dist/select.d.mts
+++ b/dist/select.d.mts
@@ -3,6 +3,7 @@ import { ItemTextProps, PortalProps, Option, ScrollDownButtonProps, ScrollUpButt
 import * as react_native from 'react-native';
 import { View, Text, LayoutRectangle } from 'react-native';
 import { LayoutPosition } from '@rn-primitives/hooks';
+import { PortalHost } from "@rn-primitives/portal";
 import * as React from 'react';
 import './select';
 
@@ -92,4 +93,4 @@ declare const ScrollUpButton: ({ children }: ScrollUpButtonProps) => React.JSX.E
 declare const ScrollDownButton: ({ children }: ScrollDownButtonProps) => React.JSX.Element;
 declare const Viewport: ({ children }: ViewportProps) => React.JSX.Element;
 
-export { Content, Group, Item, ItemIndicator, ItemText, Label, Overlay, Portal, Root, ScrollDownButton, ScrollUpButton, Separator, Trigger, Value, Viewport, useItemContext, useRootContext };
+export { Content, Group, Item, ItemIndicator, ItemText, Label, Overlay, Portal, PortalHost, Root, ScrollDownButton, ScrollUpButton, Separator, Trigger, Value, Viewport, useItemContext, useRootContext };
diff --git a/dist/select.d.ts b/dist/select.d.ts
index 4e857ddd6ddd211bca55be90bc198d9b7783fb46..48d5bf66465693b28f6c7f9106333798a0697065 100644
--- a/dist/select.d.ts
+++ b/dist/select.d.ts
@@ -3,6 +3,7 @@ import { ItemTextProps, PortalProps, Option, ScrollDownButtonProps, ScrollUpButt
 import * as react_native from 'react-native';
 import { View, Text, LayoutRectangle } from 'react-native';
 import { LayoutPosition } from '@rn-primitives/hooks';
+import { PortalHost } from "@rn-primitives/portal";
 import * as React from 'react';
 import './select';
 
@@ -92,4 +93,4 @@ declare const ScrollUpButton: ({ children }: ScrollUpButtonProps) => React.JSX.E
 declare const ScrollDownButton: ({ children }: ScrollDownButtonProps) => React.JSX.Element;
 declare const Viewport: ({ children }: ViewportProps) => React.JSX.Element;
 
-export { Content, Group, Item, ItemIndicator, ItemText, Label, Overlay, Portal, Root, ScrollDownButton, ScrollUpButton, Separator, Trigger, Value, Viewport, useItemContext, useRootContext };
+export { Content, Group, Item, ItemIndicator, ItemText, Label, Overlay, Portal, PortalHost, Root, ScrollDownButton, ScrollUpButton, Separator, Trigger, Value, Viewport, useItemContext, useRootContext };
diff --git a/dist/select.js b/dist/select.js
index 2c68c403912caca100a9b3baa62a9442002dbe84..24a30b8932b3928bea736724c26e244577433d84 100644
--- a/dist/select.js
+++ b/dist/select.js
@@ -39,6 +39,7 @@ __export(select_exports, {
   Label: () => Label,
   Overlay: () => Overlay,
   Portal: () => Portal,
+  PortalHost: () => import_portal.PortalHost,
   Root: () => Root,
   ScrollDownButton: () => ScrollDownButton,
   ScrollUpButton: () => ScrollUpButton,
@@ -368,6 +369,7 @@ function onStartShouldSetResponder() {
   Label,
   Overlay,
   Portal,
+  PortalHost: import_portal.PortalHost,
   Root,
   ScrollDownButton,
   ScrollUpButton,
diff --git a/dist/select.mjs b/dist/select.mjs
index 5756165f6d17d4949843a5d86c9f4bfda801ede1..de202b4fb4ceabe3eaec296bd483323d15982173 100644
--- a/dist/select.mjs
+++ b/dist/select.mjs
@@ -6,7 +6,7 @@ import {
   useControllableState,
   useRelativePosition
 } from "@rn-primitives/hooks";
-import { Portal as RNPPortal } from "@rn-primitives/portal";
+import { Portal as RNPPortal, PortalHost } from "@rn-primitives/portal";
 import * as Slot from "@rn-primitives/slot";
 import * as React from "react";
 import {
@@ -327,6 +327,7 @@ export {
   Label,
   Overlay,
   Portal,
+  PortalHost,
   Root,
   ScrollDownButton,
   ScrollUpButton,

[mohitramani249]

@mrzachnugent Even the initial app created by npx @react-native-reusables/cli@latest init crashes if you rapidly click the 'i' icon 5 to 10 times.
I’ve attached a video of the issue below, and when it crashes, it opens these two weird files in the code editor.

Record_2025-08-05-10-12-00_f73b71075b1de7323614b647fe394240.mp4