Magic Modallatest
API reference

MagicModalPortal

Mount the modal stack once near the root of the React Native application.

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

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

On this page