Skip to main content

​
Overview

ToastPortal is a specialized component for showing toasts inside Android modal screens. On Android, native modals render above the root React view, so toasts from the main <BreadLoaf /> component won’t be visible. Add <ToastPortal /> inside your modal layouts to show toasts above modal content. This component only renders on Android and returns null on iOS, where <BreadLoaf /> already handles modal overlay via FullWindowOverlay.

​
When to use

Use ToastPortal when:
  • You have modal screens on Android (e.g., Expo Router modal routes)
  • You need to show toasts while a modal is open
  • Toasts from the root <BreadLoaf /> are not visible in your modal

​
Basic usage

import { Stack } from 'expo-router';
import { ToastPortal } from 'react-native-bread';

export default function ModalLayout() {
  return (
    <>
      <Stack screenOptions={{ headerShown: false }} />
      <ToastPortal />
    </>
  );
}

​
Props

ToastPortal does not accept any props. It only renders toasts and inherits all styling and behavior from your root <BreadLoaf /> configuration.

​
Platform behavior

  • Android: Renders toast container to display toasts above modal content
  • iOS: Returns null (no rendering needed - BreadLoaf handles all modals)

​
Complete example

// app/_layout.tsx (root layout)
import { Stack } from 'expo-router';
import { BreadLoaf } from 'react-native-bread';

export default function RootLayout() {
  return (
    <>
      <Stack>
        <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
        <Stack.Screen name="(modal)" options={{ presentation: 'modal' }} />
      </Stack>
      <BreadLoaf
        config={{
          position: 'top',
          defaultDuration: 4000,
        }}
      />
    </>
  );
}

// app/(modal)/_layout.tsx (modal layout)
import { Stack } from 'expo-router';
import { ToastPortal } from 'react-native-bread';

export default function ModalLayout() {
  return (
    <>
      <Stack screenOptions={{ headerShown: false }} />
      <ToastPortal />
    </>
  );
}

// app/(modal)/settings.tsx (modal screen)
import { View, Text, Button } from 'react-native';
import { toast } from 'react-native-bread';

export default function SettingsModal() {
  return (
    <View style={{ flex: 1, padding: 20 }}>
      <Text>Settings</Text>
      <Button
        title="Save Settings"
        onPress={() => {
          // This toast will be visible thanks to ToastPortal
          toast.success('Settings saved!');
        }}
      />
    </View>
  );
}

​
Implementation notes

  • ToastPortal shares the same toast store as BreadLoaf, so toasts triggered anywhere in your app will appear in both locations
  • Configuration is controlled globally through <BreadLoaf config={...} /> - you cannot configure ToastPortal independently
  • Only use ToastPortal in modal layouts, not in regular screens (where BreadLoaf already handles toasts)
  • Multiple ToastPortal instances can coexist (e.g., nested modals), and each will render the same toasts

Build docs developers (and LLMs) love

Get started for freeTalk to us