MagicModalPortal

const MagicModalPortal: React.FC;

The portal owns modal state and exposes it to the global magicModal object.

<GestureHandlerRootView style={{ flex: 1 }}>
  <NavigationContainer>
    <AppNavigator />
  </NavigationContainer>
  <MagicModalPortal />
</GestureHandlerRootView>

Placement rules

• Mount exactly one active portal.
• Keep it inside GestureHandlerRootView in Expo and native applications.
• Mount it directly in the Client Component root of a web-only Next.js application.
• Place it after the main app content so it renders above that content.
• Keep it outside individual screens so navigation does not destroy active flows.

Calling an imperative method before a portal mounts throws:

MagicModalPortal not found. Please wrap your component with MagicModalPortal.

Accessibility

The portal marks the top entry as a modal dialog and hides lower stack entries from interaction and accessibility navigation. On web it also manages initial focus, Tab order, Escape, and focus restoration. Pass accessibilityLabel in the show() configuration to name each dialog.

On Android, accessibility isolation for application siblings outside the portal remains the responsibility of the application root.

See set up the portal for standard and Expo Router examples.