Skip to main content
Version: 1.0.0

Runtime Setup

Before validating toast behavior, confirm app runtime prerequisites.

Required Prerequisites​

  1. Reanimated Babel plugin is configured.
  2. App root uses GestureHandlerRootView.
  3. App root uses SafeAreaProvider.
  4. ToastProvider wraps any subtree calling useToast().
  5. At least one root host (ToastViewport or ToastHost) is mounted.

For native surfaces (for example Modal), wrap that surface with ToastNativeSurfaceBoundary when gesture activation needs an isolated boundary root.

import { GestureHandlerRootView } from "react-native-gesture-handler";
import { SafeAreaProvider } from "react-native-safe-area-context";
import { ToastProvider, ToastViewport } from "react-native-toast-system";

export function AppRoot() {
  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <SafeAreaProvider>
        <ToastProvider>
          <AppNavigation />
          <ToastViewport />
        </ToastProvider>
      </SafeAreaProvider>
    </GestureHandlerRootView>
  );
}

Placement Rules​

  • Keep one app-level root host for global flows.
  • Add extra hosts only for explicit isolated surfaces (modal-host, sheet-host).
  • Mount each host inside the visual surface where it should render.

Media Placeholders​

  • Image placeholder: "Provider and host placement diagram"
  • GIF placeholder: "Root setup with viewport"
  • Video placeholder: "Host placement in modal and nested surfaces"

Next​