sonner-native

The Toaster is the central context component that manages toast notifications. To ensure it works correctly across all screens, you must render it at the root level of your app, after the NavigationContainer.

Crucial Requirement: The Toaster must be rendered within both a SafeAreaProvider and a GestureHandlerRootView.

import { Toaster } from 'sonner-native';
import { NavigationContainer } from '@react-navigation/native';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import { GestureHandlerRootView } from 'react-native-gesture-handler';

export default function App() {
  return (
    <SafeAreaProvider>
      <GestureHandlerRootView>
        <NavigationContainer>{/* App content */}</NavigationContainer>
        <Toaster />
      </GestureHandlerRootView>
    </SafeAreaProvider>
  );
}

Generate static content for the website. The output will be placed in the build directory, which can then be hosted on any static content hosting service.

$ yarn build

When using Expo Router, place the <Toaster /> component inside your root layout file (app/_layout.tsx). It should be wrapped within a <GestureHandlerRootView> to ensure gesture-based dismissal works correctly.

import { Toaster } from 'sonner-native';
import { Stack } from 'expo-router';
import { GestureHandlerRootView } from "react-native-gesture-handler";

export default function RootLayout() {
  return (
    <GestureHandlerRootView>
      <Stack>
        <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
        <Stack.Screen name="+not-found" />
      </Stack>
      <Toaster />
    </GestureHandlerRootView>
  );
}

To display toasts, you must include the <Toaster /> component in your application's entry point or root layout. This ensures the toast container is available globally.

import { Toaster } from 'sonner-native';

function App() {
  return (
    <View>
      <NavigationContainer>...</NavigationContainer>
      <Toaster />
    </View>
  );
}

When using Expo Router, place the <Toaster /> component in your root layout file (app/_layout.tsx) to ensure toasts are visible across all screens in your application.

import { Toaster } from 'sonner-native';
import { Stack } from 'expo-router';

export default function RootLayout() {
  return (
    <>
      <Stack>
        <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
        <Stack.Screen name="+not-found" />
      </Stack>
      <Toaster />
    </>
  );
}

While sonner-native works on the web, it is recommended to use the original sonner package for web platforms. You can achieve platform-specific imports by creating two files, sonner.ts and sonner.web.ts, and importing from those instead of the library directly.

// sonner.ts
export * from 'sonner-native';

// sonner.web.ts
export * from 'sonner';

Start a local development server to view the documentation. This command opens a browser window and supports live reloading for most changes.

$ yarn start

Install the package using yarn. Note that you must also install several peer dependencies for the library to function correctly: react-native-reanimated, react-native-gesture-handler, react-native-safe-area-context, react-native-svg, react-native-screens, and react-native-worklets.

yarn add sonner-native

To use sonner-native, you must manually install the following peer dependencies:

• react-native-reanimated
• react-native-gesture-handler
• react-native-safe-area-context
• react-native-svg
• react-native-screens
• react-native-worklets

You can deploy the website using either SSH or GitHub Pages.

Using SSH: Set the USE_SSH environment variable to true.

Using GitHub Pages: Provide your GitHub username via the GIT_USER environment variable. This will build the site and push it to the gh-pages branch.