@backpackapp-io/react-native-toast

You can attach lifecycle handlers to individual toasts to trigger specific logic (like navigation or analytics) when a toast is interacted with or dismissed.

Available Handlers:

• onPress: Called when the user taps the toast.
• onShow: Called when the toast appears.
• onHide: Called when the toast is dismissed. This handler receives a reason argument.

Dismiss Reasons (DismissReason):

• DismissReason.TIMEOUT: Duration elapsed.
• DismissReason.SWIPE: User swiped it away.
• DismissReason.PROGRAMMATIC: Dismissed via toast.dismiss().
• DismissReason.TAP: User tapped to dismiss.

Global vs Individual Handlers:

• Individual: Defined in the toast() options. Runs only for that specific toast.
• Global: Defined on the <Toasts /> component (e.g., onToastPress). Runs for every toast in the app.

import { DismissReason } from "@backpackapp-io/react-native-toast";

const id = toast('Hello World', {
  onPress: (toast) => {
    console.log('Toast pressed!', toast.id);
  },
  onShow: (toast) => {
    console.log('Toast shown!', toast.id);
  },
  onHide: (toast, reason) => {
    switch(reason) {
      case DismissReason.TIMEOUT: /* ... */ break;
      case DismissReason.SWIPE: /* ... */ break;
      case DismissReason.PROGRAMMATIC: /* ... */ break;
      case DismissReason.TAP: /* ... */ break;
    }
  }
});

By default, toasts are rendered in the root component (using the DEFAULT provider key). If you are using native modals, you may need to specify a providerKey to ensure toasts appear inside the modal rather than behind it.

Rendering in a specific modal

1. Add a <Toasts /> component inside your native modal with a unique providerKey (e.g., "MODAL::1").
2. When calling the toast() function, pass the matching providerKey in the options object.

Persisting toasts across components

To keep the same toasts visible when switching between components or opening/closing modals, use the special provider key "PERSISTS":

toast("Message...", { providerKey: "PERSISTS" });

Manual provider key updates

If you cannot use "PERSISTS", you can manually update the providerKey of existing toasts using useToasterStore:

const { toasts } = useToasterStore();

useEffect(() => {
  toasts.forEach((t) => {
    toast(t.message, {
      ...t,
      providerKey: isModalVisible ? 'MODAL::1' : 'DEFAULT',
    });
  });
}, [isModalVisible]);

// Component in native modal
<Toasts providerKey="MODAL::1" />

//... Call toast in root modal
const id = toast("Hello from root modal") // uses DEFAULT

//... Native modal becomes visible
const id = toast("Hello from native modal", { providerKey: "MODAL::1" }) 
// Now, toast is shown only in native modal

To use the toast library, you must wrap your application root with GestureHandlerRootView and SafeAreaProvider. Additionally, you must include the <Toasts /> component at the root of your component tree to provide the rendering context for toast notifications.

Once configured, you can trigger toasts from any part of your application using the toast function.

import { View, StyleSheet } from 'react-native';
import { GestureHandlerRootView } from 'react-native-gesture-handler';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import { toast, Toasts } from '@backpackapp-io/react-native-toast';
import { useEffect } from 'react';

export default function App() {
  useEffect(() => {
    toast('Hello');
  }, []);

  return (
    <SafeAreaProvider>
      <GestureHandlerRootView style={styles.container}>
        <View>{/*The rest of your app*/}</View>
        <Toasts /> {/* <---- Add Here */}
      </GestureHandlerRootView>
    </SafeAreaProvider>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
});

To use the library, you must wrap your application's root component with <GestureHandlerRootView> and <SafeAreaProvider>. Additionally, you must place the <Toasts /> component at the root level of your application tree to enable toast rendering.

Once configured, you can trigger toasts from anywhere in your app using the toast() function.

import { View, StyleSheet } from 'react-native';
import { GestureHandlerRootView } from 'react-native-gesture-handler';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import { toast, Toasts } from '@backpackapp-io/react-native-toast';
import { useEffect } from 'react';

export default function App() {
  useEffect(() => {
    toast('Hello');
  }, []);

  return (
    <SafeAreaProvider>
      <GestureHandlerRootView style={styles.container}>
        <View>{/* Your app components */}</View>
        <Toasts />
      </GestureHandlerRootView>
    </SafeAreaProvider>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
});