Sonner Native

https://sonner-native.netlify.app/
Admin
Sonner Native is an opinionated, customizable toast notification component library for React Native...
Tokens:4,787
Snippets:57
Trust Score:7.6
Update:7 months ago
Show doc for...
Tokens:
Raw
### Install Sonner Native dependency

Source: https://sonner-native.netlify.app/

Command to add the sonner-native package to your React Native project using the yarn package manager.

```bash
yarn add sonner-native
```

--------------------------------

### Implement Dismiss Toast on Tap

Source: https://sonner-native.netlify.app/Toaster

Shows how to customize toast behavior by using the 'ToastWrapper' prop to wrap individual toast components. This example implements a 'Pressable' wrapper that dismisses the toast when tapped.

```javascript
import { Pressable } from "react-native"

function Wrapper({toastId, children}){
  function onPress(){
    toast.dismiss(toastId)
  }
  return <Pressable onPress={onPress}>{children}</Pressable>
}

<Toaster
  ToastWrapper={Wrapper}
  toastOptions={{
    style: { backgroundColor: 'red' },
  }}
/>;
```

--------------------------------

### Display Toast with Action Button in sonner-native

Source: https://sonner-native.netlify.app/toast

Provides examples of adding an action button to a toast message. The action can be defined as an object with a label and an onClick handler, or as a JSX element.

```javascript
toast('My action toast', {
  action: {
    label: 'Action',
    onClick: () => console.log('Action!'),
  },
});
```

```javascript
toast('My action toast', {
  action: <Button title="Action" onPress={() => console.log('Action!')} />,
});
```

--------------------------------

### Initialize Toaster in App Entry

Source: https://sonner-native.netlify.app/

Setup the Toaster component in the root of your React Native application to enable global toast notifications.

```tsx
import { Toaster } from 'sonner-native';

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

```tsx
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 />
    </>
  );
}
```

--------------------------------

### Render Toaster in React Native App

Source: https://sonner-native.netlify.app/Toaster

Demonstrates the basic setup for rendering the Toaster component within a React Native application. It must be placed inside SafeAreaProvider and GestureHandlerRootView, and after NavigationContainer.

```javascript
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>
  );
}
```

--------------------------------

### Display Toast with Custom Settings in sonner-native

Source: https://sonner-native.netlify.app/toast

Shows how to display a toast message with additional configuration options passed as an object. These options can override global Toaster settings and include styling, description, duration, and custom icons.

```javascript
import { toast } from 'sonner-native';

tOast.success('Operation successful!', {
  style: { backgroundColor: 'blue' },
  description: 'Everything worked as expected.',
  duration: 6000,
  icon: <SomeIcon />,
});
```

--------------------------------

### Display Basic Toast Message with sonner-native

Source: https://sonner-native.netlify.app/toast

Demonstrates how to display a simple toast message using the toast() function from the 'sonner-native' library. This function takes a string as its primary argument, which is the message content.

```javascript
import { toast } from 'sonner-native';

tOast('This is a basic toast message.');
```

--------------------------------

### Configure Toaster Positioning and Styles

Source: https://sonner-native.netlify.app/toaster

Shows how to set the display position and apply global default styles to all toast notifications using the toastOptions prop.

```javascript
<Toaster position="bottom-center" />

<Toaster
  toastOptions={{
    style: { backgroundColor: 'red' },
  }}
/>
```

--------------------------------

### Style Toasts by Variant

Source: https://sonner-native.netlify.app/Toaster

Explains how to set default styles for specific toast variants (e.g., success, error, warning) using the 'toastOptions' prop. These styles are applied as the base for each respective toast type.

```javascript
<Toaster
  toastOptions={{
    // Set a default style for all success toasts
    success: {
      backgroundColor: '#28a745',
    },
    // This also works for 'error', 'warning', 'info', and 'loading'
  }}
/>
```

--------------------------------

### Implement Custom Background Components

Source: https://sonner-native.netlify.app/toaster

Shows how to add custom background components like blur effects to toasts globally or on a per-toast basis using the backgroundComponent option.

```javascript
import { BlurView } from 'expo-blur';
import { StyleSheet, Platform } from 'react-native';
import { toast } from 'sonner-native';

// Global configuration
<Toaster
  toastOptions={{
    backgroundComponent: (
      <BlurView
        intensity={80}
        tint="dark"
        experimentalBlurMethod={Platform.OS === 'android' ? 'dimezisBlurView' : undefined}
        style={StyleSheet.absoluteFill}
      />
    ),
  }}
/>;

// Per-toast override
toast.success('Saved!', {
  backgroundComponent: (
    <BlurView
      intensity={100}
      tint="light"
      experimentalBlurMethod={Platform.OS === 'android' ? 'dimezisBlurView' : undefined}
      style={StyleSheet.absoluteFill}
    />
  ),
});
```

--------------------------------

### Customize Toaster with Wrappers and Overlays

Source: https://sonner-native.netlify.app/toaster

Demonstrates using ToasterOverlayWrapper for custom overlay rendering and ToastWrapper for modifying toast interaction behavior, such as dismissing on tap.

```javascript
import { ZView } from 'react-native-z-view';
import { Pressable } from "react-native";

<Toaster
  ToasterOverlayWrapper={ZView}
  toastOptions={{ style: { backgroundColor: 'red' } }}
/>;

function Wrapper({toastId, children}){
  function onPress(){
    toast.dismiss(toastId)
  }
  return <Pressable onPress={onPress}>{children}</Pressable>
}

<Toaster ToastWrapper={Wrapper} />;
```

--------------------------------

### Configure Cross-Platform Toast Imports

Source: https://sonner-native.netlify.app/

Recommended pattern for projects supporting both web and native by aliasing imports to use sonner-native on mobile and sonner on web.

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

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

--------------------------------

### Display Success Toast with sonner-native

Source: https://sonner-native.netlify.app/toast

Illustrates the use of toast.success() for displaying success messages. This function automatically includes a checkmark icon by default.

```javascript
toast.success('My success toast');
```

--------------------------------

### Create Infinite Toasts in sonner-native

Source: https://sonner-native.netlify.app/toast

Shows how to create a toast that remains visible until manually dismissed by setting the `duration` option to `Infinity`.

```javascript
toast('Hello', {
  duration: Infinity,
});
```

--------------------------------

### Display Loading Toast with sonner-native

Source: https://sonner-native.netlify.app/toast

Shows how to display a persistent loading indicator using toast.loading(). This function typically shows an ActivityIndicator by default.

```javascript
toast.loading('Loading...');
```

--------------------------------

### Trigger a Toast Notification

Source: https://sonner-native.netlify.app/

Demonstrates how to import the toast function and trigger a simple notification from a component event.

```tsx
import { toast } from 'sonner-native';

function SomeComponent() {
  return (
    <Button
      title="Show Toast"
      onPress={() => toast('Hello, World!')}
    />
  );
}
```

--------------------------------

### Display Custom JSX Content in Toast with sonner-native

Source: https://sonner-native.netlify.app/toast

Demonstrates rendering custom JSX content within a toast message. This allows for more complex UI elements, including buttons to dismiss the toast.

```javascript
toast.custom(
  <View>
    <Text>Custom toast content</Text>
    <Button title="Close" onPress={() => toast.dismiss()} />
  </View>
);
```

--------------------------------

### Handle Promises with Toast Notifications in sonner-native

Source: https://sonner-native.netlify.app/toast

Illustrates using toast.promise() to manage toast messages during asynchronous operations. It displays loading, success, or error states based on the promise's resolution.

```javascript
const fetchData = async () => {
  try {
    const data = await fetch('/api/data');
    return data;
  } catch (error) {
    throw new Error('Failed to fetch data');
  }
};

const toastId = toast.promise(fetchData(), {
  loading: 'Loading data...', 
  success: (data) => `Data loaded: ${data}`,
  error: 'Error fetching data',
});
```

--------------------------------

### Display Error Toast with sonner-native

Source: https://sonner-native.netlify.app/toast

Demonstrates how to use toast.error() to show error messages. This function typically renders an 'X' icon by default.

```javascript
toast.error('My error toast');
```

--------------------------------

### Display Warning Toast with sonner-native

Source: https://sonner-native.netlify.app/toast

Shows the usage of toast.warning() for displaying warning messages. A warning icon is usually displayed by default with this function.

```javascript
toast.warning('My warning toast');
```

--------------------------------

### Wiggle a Toast Message in sonner-native

Source: https://sonner-native.netlify.app/toast

Demonstrates how to make a specific toast message wiggle by calling `toast.wiggle()` with the toast's ID. It also mentions the `autoWiggleOnUpdate` prop for automatic wiggling.

```javascript
const id = toast('Hello');

tOast.wiggle(id);
```

--------------------------------

### Use Callbacks for Toast Events in sonner-native

Source: https://sonner-native.netlify.app/toast

Details the use of `onAutoClose` and `onDismiss` callbacks to execute code when a toast is automatically closed after its duration or manually dismissed.

```javascript
toast('Hello', {
  onAutoClose: () => console.log('Auto-closed!'),
  onDismiss: () => console.log('Manually dismissed!'),
});
```

--------------------------------

### Set Default Toast Styles

Source: https://sonner-native.netlify.app/Toaster

Illustrates how to apply default styles to all toast notifications by using the 'toastOptions.style' prop on the Toaster component. These styles serve as a base and can be overridden by individual toast customizations.

```javascript
<Toaster
  toastOptions={{
    style: { backgroundColor: 'red' },
  }}
/>
```

--------------------------------

### Integrate Toaster with react-native-z-view

Source: https://sonner-native.netlify.app/Toaster

Demonstrates how to use the 'ToasterOverlayWrapper' prop to wrap the Toaster component with a custom component, such as 'ZView' from 'react-native-z-view'. This is useful for specific rendering scenarios.

```javascript
import { ZView } from 'react-native-z-view';

<Toaster
  ToasterOverlayWrapper={ZView}
  toastOptions={{
    style: { backgroundColor: 'red' },
  }}
/>;
```

--------------------------------

### Add Custom Background Component to Toasts

Source: https://sonner-native.netlify.app/Toaster

Illustrates how to add a custom background component, like a blur effect using 'expo-blur', to all toasts via the 'toastOptions.backgroundComponent' prop. The background component must use absolute positioning.

```javascript
import { BlurView } from 'expo-blur';
import { StyleSheet, Platform } from 'react-native';

<Toaster
  toastOptions={{
    backgroundComponent: (
      <BlurView
        intensity={80}
        tint="dark"
        experimentalBlurMethod={
          Platform.OS === 'android' ? 'dimezisBlurView' : undefined
        }
        style={StyleSheet.absoluteFill}
      />
    ),
  }}
/>;
```

--------------------------------

### Override Background Component Per Toast

Source: https://sonner-native.netlify.app/Toaster

Demonstrates how to override the background component for a specific toast instance using the 'backgroundComponent' option within the 'toast()' function. This allows for unique backgrounds on individual toasts.

```javascript
import { toast } from 'sonner-native';

test('should show a toast with a custom background', () => {
  toast.success('Saved!', {
    backgroundComponent: (
      <BlurView
        intensity={100}
        tint="light"
        experimentalBlurMethod={
          Platform.OS === 'android' ? 'dimezisBlurView' : undefined
        }
        style={StyleSheet.absoluteFill}
      />
    ),
  });
});
```

--------------------------------

### Dismiss Toasts Programmatically in sonner-native

Source: https://sonner-native.netlify.app/toast

Explains how to dismiss specific toasts using their ID or dismiss all currently displayed toasts by calling `toast.dismiss()` without any arguments.

```javascript
const id = toast('Hello');

tOast.dismiss(id);

tOast('Hello');
tOast('World');

tOast.dismiss();
```

--------------------------------

### Display Toast with Cancel Button in sonner-native

Source: https://sonner-native.netlify.app/toast

Demonstrates how to include a cancel button in a toast message. The cancel button is configured similarly to the action button, with a label and an onClick handler.

```javascript
toast('My cancel toast', {
  cancel: {
    label: 'Cancel',
    onClick: () => console.log('Cancel!'),
  },
});
```

--------------------------------

### Update Existing Toast Message in sonner-native

Source: https://sonner-native.netlify.app/toast

Explains how to update the content or status of an existing toast message by providing its ID in the options object when calling the toast function again.

```javascript
const id = toast('Hello');

tOast.success('Updated!', {
  id,
});
```

--------------------------------

### Customize Toaster Position

Source: https://sonner-native.netlify.app/Toaster

Shows how to change the display position of toast notifications using the 'position' prop on the Toaster component. Available positions include 'top-center' and 'bottom-center'.

```javascript
// Available positions:
// top-center, bottom-center
<Toaster position="bottom-center" />
```
Tokens:
Raw