### Start Example App Packager

Source: https://github.com/gunnartorfis/sonner-native-toasts/blob/main/CONTRIBUTING.md

Starts the Metro server for the example application.

```sh
pnpm example start
```

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

### Installation

Source: https://github.com/gunnartorfis/sonner-native-toasts/blob/main/docs/README.md

Installs project dependencies using Yarn.

```bash
$ yarn
```

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

### Start the app

Source: https://github.com/gunnartorfis/sonner-native-toasts/blob/main/example/README.md

Starts the Expo development server.

```bash
npx expo start
```

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

### Run Example App on Web

Source: https://github.com/gunnartorfis/sonner-native-toasts/blob/main/CONTRIBUTING.md

Builds and runs the example application on the web.

```sh
pnpm example web
```

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

### Installation

Source: https://github.com/gunnartorfis/sonner-native-toasts/blob/main/docs/docs/index.md

Install the sonner-native package using yarn or npm.

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

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

### Install dependencies

Source: https://github.com/gunnartorfis/sonner-native-toasts/blob/main/example/README.md

Installs the necessary dependencies for the project.

```bash
npm install
```

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

### Basic Toaster Setup

Source: https://github.com/gunnartorfis/sonner-native-toasts/blob/main/docs/docs/Toaster.md

Example of how to set up the Toaster component at the root level of your app, ensuring it's rendered within SafeAreaProvider and GestureHandlerRootView.

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

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

### Installation

Source: https://github.com/gunnartorfis/sonner-native-toasts/blob/main/README.md

Install the sonner-native package using npx.

```sh
npx expo install sonner-native
```

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

### Import Everything Example

Source: https://github.com/gunnartorfis/sonner-native-toasts/blob/main/_autodocs/EXPORTS.md

An example showing how to import all available functions, components, types, and utilities from 'sonner-native'.

```typescript
import {
  // Functions
  toast,
  // Components
  Toaster,
  // Types
  type ToastPosition,
  type ToastVariant,
  type ToastTheme,
  type ToastSwipeDirection,
  type AutoWiggle,
  type ToastAction,
  type ToastStyles,
  type ToastRef,
  type ToastProps,
  type ExternalToast,
  type PromiseOptions,
  type ToasterProps,
  type StableToastContextType,
  type DynamicToastContextType,
  // Utilities
  isToastAction
} from 'sonner-native'
```

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

### Loading Toast Example

Source: https://github.com/gunnartorfis/sonner-native-toasts/blob/main/_autodocs/api-reference/toast.md

Shows a common pattern for using loading toasts: starting a loading toast and then updating it to success or error based on the operation's outcome.

```typescript
// Start loading toast
const loadingId = toast.loading('Uploading file...')

try {
  await uploadFile(file)
  // Replace loading toast with success
  toast.success('File uploaded!', { id: loadingId })
} catch (error) {
  // Replace loading toast with error
  toast.error('Upload failed', { id: loadingId })
}
```

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

### Local Development

Source: https://github.com/gunnartorfis/sonner-native-toasts/blob/main/docs/README.md

Starts a local development server for live previewing changes.

```bash
$ yarn start
```

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

### ToastWrapper Example

Source: https://github.com/gunnartorfis/sonner-native-toasts/blob/main/_autodocs/configuration.md

Example of using a custom ToastWrapper to add borders to individual toasts.

```typescript
const BorderedToastWrapper: React.FC <{
  children: React.ReactNode
  toastId: string | number
}> = ({ children, toastId }) => (
  <View
    style={{
      borderWidth: 2,
      borderColor: toastId % 2 === 0 ? '#3b82f6' : '#ef4444',
      borderRadius: 8,
      overflow: 'hidden'
    }}
  >
    {children}
  </View>
)

<Toaster ToastWrapper={BorderedToastWrapper} />
```

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

### Run Example App on Android

Source: https://github.com/gunnartorfis/sonner-native-toasts/blob/main/CONTRIBUTING.md

Builds and runs the example application on an Android device or emulator.

```sh
pnpm example android
```

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

### Run Example App on iOS

Source: https://github.com/gunnartorfis/sonner-native-toasts/blob/main/CONTRIBUTING.md

Builds and runs the example application on an iOS device or simulator.

```sh
pnpm example ios
```

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

### Common Imports Example

Source: https://github.com/gunnartorfis/sonner-native-toasts/blob/main/_autodocs/EXPORTS.md

Provides examples for common import scenarios: showing toasts, setting up the Toaster, and typing options.

```typescript
// For showing toasts
import { toast } from 'sonner-native'

// For setup
import { Toaster } from 'sonner-native'

// For typing options
import type { ExternalToast, ToastPosition } from 'sonner-native'
```

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

### Install Dependencies

Source: https://github.com/gunnartorfis/sonner-native-toasts/blob/main/CONTRIBUTING.md

Installs all required dependencies for the monorepo using pnpm workspaces.

```sh
pnpm install
```

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

### ToasterOverlayWrapper Example

Source: https://github.com/gunnartorfis/sonner-native-toasts/blob/main/_autodocs/configuration.md

Example of using a custom ToasterOverlayWrapper for debugging on iOS.

```typescript
const DebugWrapper: React.FC<{ children: React.ReactNode }> = ({ children }) => (
  <View style={{ borderWidth: 1, borderColor: 'red' }}>
    {children}
  </View>
)

<Toaster ToasterOverlayWrapper={DebugWrapper} />
```

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

### Complete Configuration Example

Source: https://github.com/gunnartorfis/sonner-native-toasts/blob/main/_autodocs/api-reference/Toaster.md

A comprehensive example demonstrating various configuration options for the Toaster component, including position, appearance, behavior, and styles.

```typescript
import { View } from 'react-native'
import { Toaster } from 'sonner-native'
import { NavigationContainer } from '@react-navigation/native'

function App() {
  return (
    <View style={{ flex: 1 }}>
      <NavigationContainer>
        {/* Your app */}
      </NavigationContainer>
      
      <Toaster
        // Position
        position="bottom-center"
        offset={16}
        gap={12}
        visibleToasts={4}
        
        // Appearance
        theme="dark"
        richColors={true}
        invert={false}
        
        // Behavior
        duration={4000}
        closeButton={true}
        swipeToDismissDirection="up"
        pauseWhenPageIsHidden={true}
        autoWiggleOnUpdate="toast-change"
        
        // Styles
        styles={{
          toast: {
            minHeight: 64,
            borderRadius: 12,
            padding: 16
          },
          title: {
            fontSize: 16,
            fontWeight: '600'
          }
        }}
        
        toastOptions={{
          titleStyle: { fontSize: 14 },
          descriptionStyle: { fontSize: 12, opacity: 0.7 }
        }}
      />
    </View>
  )
}

export default App
```

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

### Theme Prop Example

Source: https://github.com/gunnartorfis/sonner-native-toasts/blob/main/_autodocs/api-reference/Toaster.md

Example of setting the 'theme' prop to control the color scheme.

```typescript
<Toaster theme="dark" />
```

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

### ExternalToast Example

Source: https://github.com/gunnartorfis/sonner-native-toasts/blob/main/_autodocs/EXPORTS.md

Example usage of the ExternalToast type for configuring toast options.

```typescript
const options: ExternalToast = {
  id: 'my-toast',
  description: 'Extra text',
  duration: 3000,
  action: { label: 'Undo', onClick: () => {} }
}

toast('Message', options)
```

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

### Get a fresh project

Source: https://github.com/gunnartorfis/sonner-native-toasts/blob/main/example/README.md

Resets the project to a fresh state, moving starter code to app-example.

```bash
npm run reset-project
```

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

### Style Prop Example

Source: https://github.com/gunnartorfis/sonner-native-toasts/blob/main/_autodocs/api-reference/Toaster.md

Example of applying a custom style to the toast container.

```typescript
<Toaster
  style={{
    backgroundColor: 'rgba(0, 0, 0, 0.8)',
    borderRadius: 12
  }}
/>
```

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

### Dismiss all toasts example

Source: https://github.com/gunnartorfis/sonner-native-toasts/blob/main/_autodocs/api-reference/toast.md

An example demonstrating how to dismiss all currently active toasts.

```typescript
// Dismiss all toasts
tost.dismiss()
```

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

### Per-Toast Configuration Example

Source: https://github.com/gunnartorfis/sonner-native-toasts/blob/main/_autodocs/configuration.md

Demonstrates various configuration options available when calling the toast() function.

```typescript
toast('Message', {
  // Identification
  id: 'my-toast-id',
  
  // Content
  description: 'Additional details',
  icon: <CustomIcon />,
  close: <CustomCloseButton />,
  
  // Behavior
  duration: 3000,
  dismissible: true,
  onDismiss: (id) => console.log('Dismissed', id),
  onAutoClose: (id) => console.log('Auto-closed', id),
  onPress: () => console.log('Toast pressed'),
  
  // Actions
  action: {
    label: 'Undo',
    onClick: () => handleUndo()
  },
  cancel: {
    label: 'Dismiss',
    onClick: () => toast.dismiss()
  },
  
  // Styling
  richColors: true,
  invert: false,
  unstyled: false,
  style: { minHeight: 80 },
  styles: {
    title: { fontSize: 18 },
    description: { fontSize: 14 }
  },
  actionButtonStyle: { backgroundColor: '#3b82f6' },
  cancelButtonStyle: { backgroundColor: '#6b7280' }
})
```

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

### Info Toast Example

Source: https://github.com/gunnartorfis/sonner-native-toasts/blob/main/_autodocs/api-reference/toast.md

Demonstrates how to display an info toast, highlighting its similarity to the default toast() call and showing an example with infinite duration.

```typescript
toast.info('Server is updating')
tost.info('New messages available', { duration: Infinity })
```

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

### Dismiss all then show new toast example

Source: https://github.com/gunnartorfis/sonner-native-toasts/blob/main/_autodocs/api-reference/toast.md

An example showing the sequence of dismissing all toasts before displaying a new one.

```typescript
// Dismiss all, then show a new one
tost.dismiss()
tost.success('All cleared!')
```

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

### Web support setup - sonner.web.ts

Source: https://github.com/gunnartorfis/sonner-native-toasts/blob/main/docs/docs/index.md

Configure sonner.web.ts to export from sonner for web builds, as sonner-native is not recommended for web.

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

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

### Setup Toaster

Source: https://github.com/gunnartorfis/sonner-native-toasts/blob/main/_autodocs/api-reference/index.md

Place the Toaster component at your app root.

```typescript
import { View } from 'react-native'
import { Toaster } from 'sonner-native'

function App() {
  return (
    <View style={{ flex: 1 }}>
      {/* Your navigation and routes */}
      <Toaster />
    </View>
  )
}
```

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

### Web support setup - sonner.ts

Source: https://github.com/gunnartorfis/sonner-native-toasts/blob/main/docs/docs/index.md

Configure sonner.ts to export from sonner-native for native builds.

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

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

### Simple promise toast example

Source: https://github.com/gunnartorfis/sonner-native-toasts/blob/main/_autodocs/api-reference/toast.md

An example demonstrating how to use toast.promise() with basic loading, success, and error messages.

```typescript
// Simple promise toast
toast.promise(
  fetchData(),
  {
    loading: 'Loading data...',
    success: () => 'Data loaded successfully',
    error: 'Failed to load data'
  }
)
```

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

### Environment-Based Configuration Example

Source: https://github.com/gunnartorfis/sonner-native-toasts/blob/main/_autodocs/configuration.md

Configuring toast positions and gaps based on the platform (Android vs. iOS).

```typescript
import { Platform } from 'react-native'

<Toaster
  position={Platform.OS === 'android' ? 'bottom-center' : 'top-center'}
  gap={Platform.OS === 'android' ? 16 : 12}
  visibleToasts={Platform.OS === 'android' ? 2 : 3}
/>
```

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

### Styles Prop Example

Source: https://github.com/gunnartorfis/sonner-native-toasts/blob/main/_autodocs/api-reference/Toaster.md

Example of using the 'styles' prop for fine-grained control over toast appearance.

```typescript
<Toaster
  styles={{
    toast: { minHeight: 80 },
    title: { fontSize: 18, fontWeight: '600' },
    description: { fontSize: 14, color: '#666' }
  }}
/>
```

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

### Warning Toast Example

Source: https://github.com/gunnartorfis/sonner-native-toasts/blob/main/_autodocs/api-reference/toast.md

Provides examples of displaying warning toasts, with and without additional configuration options.

```typescript
toast.warning('This action cannot be undone')

tost.warning('Low battery', {
  description: 'Battery level below 20%'
})
```

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

### ToastTheme Type Example

Source: https://github.com/gunnartorfis/sonner-native-toasts/blob/main/_autodocs/EXPORTS.md

Color theme for toasts.

```typescript
type ToastTheme = 'light' | 'dark' | 'system'
```

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

### Enable Stacking Prop Example

Source: https://github.com/gunnartorfis/sonner-native-toasts/blob/main/_autodocs/api-reference/Toaster.md

Example of enabling the 'enableStacking' prop for a card deck appearance.

```typescript
<Toaster enableStacking={true} />
```

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

### Setup

Source: https://github.com/gunnartorfis/sonner-native-toasts/blob/main/_autodocs/README.md

Place the Toaster component at your app root to initialize the toast container.

```typescript
import { Toaster } from 'sonner-native'

export default function RootLayout() {
  return (
    <>
      <Stack /> {/* Your navigation */}
      <Toaster /> {/* Toast container */}
    </>
  )
}
```

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

### Unstyled Prop Example

Source: https://github.com/gunnartorfis/sonner-native-toasts/blob/main/_autodocs/api-reference/Toaster.md

Example of using the 'unstyled' prop to remove default styling.

```typescript
<Toaster unstyled={true} />
```

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

### Rich Colors Prop Example

Source: https://github.com/gunnartorfis/sonner-native-toasts/blob/main/_autodocs/api-reference/Toaster.md

Example of enabling 'richColors' for variant-specific toast backgrounds.

```typescript
<Toaster richColors={true} />
```

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

### Position Prop Example

Source: https://github.com/gunnartorfis/sonner-native-toasts/blob/main/_autodocs/api-reference/Toaster.md

Example of setting the 'position' prop for the Toaster component.

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

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

### toast.loading() Example

Source: https://github.com/gunnartorfis/sonner-native-toasts/blob/main/_autodocs/EXPORTS.md

Show a loading toast with spinner icon (variant: 'loading').

```typescript
const id = toast.loading('Processing...')
```

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

### toast.info() Example

Source: https://github.com/gunnartorfis/sonner-native-toasts/blob/main/_autodocs/EXPORTS.md

Show an info toast with ⓘ icon (variant: 'info').

```typescript
toast.info('Here is some information')
```

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

### Configuring Toasts

Source: https://github.com/gunnartorfis/sonner-native-toasts/blob/main/_autodocs/api-reference/index.md

Example of showing a toast with various options like description, duration, position, and an action button.

```typescript
// With options
const id = toast.success('Done!', {
  description: 'Operation completed',
  duration: 5000,
  position: 'bottom-center',
  action: {
    label: 'Undo',
    onClick: () => handleUndo()
  }
})
```

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

### Invert Prop Example

Source: https://github.com/gunnartorfis/sonner-native-toasts/blob/main/_autodocs/api-reference/Toaster.md

Example of using the 'invert' prop to swap foreground and background colors.

```typescript
<Toaster invert={true} />
```

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

### Visible Toasts Prop Example

Source: https://github.com/gunnartorfis/sonner-native-toasts/blob/main/_autodocs/api-reference/Toaster.md

Example of limiting the number of simultaneously visible toasts.

```typescript
<Toaster visibleToasts={5} />
```

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

### Usage Examples

Source: https://github.com/gunnartorfis/sonner-native-toasts/blob/main/_autodocs/README.md

Demonstrates how to show different types of toasts with options, including success, error, and loading states, as well as updating existing toasts.

```typescript
import { toast } from 'sonner-native'

// Show toast
t oast.success('Done!')

// With options
t oast.error('Failed', {
  description: 'Please try again',
  action: {
    label: 'Retry',
    onClick: () => handleRetry()
  }
})

// Update existing toast
const id = toast.loading('Processing...')
t oast.success('Complete!', { id }) // Updates same toast
```

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

### toast.wiggle() example

Source: https://github.com/gunnartorfis/sonner-native-toasts/blob/main/_autodocs/api-reference/toast.md

An example of using toast.wiggle() to draw attention to a specific toast by triggering its shake animation.

```typescript
const id = toast('Please confirm this action')

// Wiggle to emphasize the message
setTimeout(() => {
  toast.wiggle(id)
}, 2000)
```

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

### Background Component Prop Example

Source: https://github.com/gunnartorfis/sonner-native-toasts/blob/main/_autodocs/api-reference/Toaster.md

Example of providing a custom React component as the toast background.

```typescript
const gradientBg = (
  <LinearGradient
    colors={['#667eea', '#764ba2']}
    start={{ x: 0, y: 0 }}
    end={{ x: 1, y: 1 }}
    style={{ flex: 1 }}
  />
)

<Toaster backgroundComponent={gradientBg} />
```

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

### Offset Prop Example

Source: https://github.com/gunnartorfis/sonner-native-toasts/blob/main/_autodocs/api-reference/Toaster.md

Example of setting the 'offset' prop to add vertical spacing.

```typescript
<Toaster position="top-center" offset={20} />
```

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

### toast - Main Function Example

Source: https://github.com/gunnartorfis/sonner-native-toasts/blob/main/_autodocs/EXPORTS.md

Main function for showing toasts. Also provides methods as properties.

```typescript
import { toast } from 'sonner-native'

tost('Hello!')
```

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

### Safe Area Context Setup

Source: https://github.com/gunnartorfis/sonner-native-toasts/blob/main/_autodocs/errors.md

Illustrates the correct way to wrap the application with `SafeAreaProvider` to ensure safe area insets are respected by toasts.

```typescript
import { SafeAreaProvider } from 'react-native-safe-area-context'

// In your App component
<SafeAreaProvider>
  <Toaster />
  {/* Rest of app */}
</SafeAreaProvider>
```

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

### Showing Toasts

Source: https://github.com/gunnartorfis/sonner-native-toasts/blob/main/_autodocs/api-reference/index.md

Examples of showing different types of toasts and custom content.

```typescript
// Basic message (info)
ttoast('Hello, World!')

// Specific variants
ttoast.success('Operation succeeded')
ttoast.error('Operation failed')
ttoast.warning('Be careful!')
ttoast.info('Information')
ttoast.loading('Processing...')

// Custom content
ttoast.custom(<MyComponent />)

// Track async operations
ttoast.promise(fetchData(), {
  loading: 'Loading...', 
  success: (data) => `Loaded ${data.length} items`,
  error: 'Failed to load'
})
```

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

### Positioner Style Prop Example

Source: https://github.com/gunnartorfis/sonner-native-toasts/blob/main/_autodocs/api-reference/Toaster.md

Example of applying custom styles to the toast positioning container.

```typescript
<Toaster
  positionerStyle={{ marginHorizontal: 16 }}
/>
```

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

### Gap Prop Example

Source: https://github.com/gunnartorfis/sonner-native-toasts/blob/main/_autodocs/api-reference/Toaster.md

Example of setting the 'gap' prop to control space between stacked toasts.

```typescript
<Toaster gap={20} />
```

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

### Simple custom content example

Source: https://github.com/gunnartorfis/sonner-native-toasts/blob/main/_autodocs/api-reference/toast.md

An example of using toast.custom() to display a simple custom toast with basic React Native components.

```typescript
import { View, Text, Button } from 'react-native'

// Simple custom content
tost.custom(
  <View style={{ padding: 16 }}>
    <Text style={{ fontSize: 18, fontWeight: 'bold' }}>Custom Toast</Text>
    <Text>This is a custom toast with any React Native component</Text>
  </View>
)
```

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

### toast.promise() Example

Source: https://github.com/gunnartorfis/sonner-native-toasts/blob/main/_autodocs/EXPORTS.md

Track a promise and show loading, success, or error toast automatically.

```typescript
toast.promise(fetchData(), {
  loading: 'Loading...',
  success: (data) => 'Loaded!',
  error: 'Failed'
})
```

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

### Toaster Positioner Style

Source: https://github.com/gunnartorfis/sonner-native-toasts/blob/main/_autodocs/configuration.md

Example of applying custom styles to the toast positioner.

```typescript
<Toaster
  positionerStyle={{
    marginHorizontal: 16,
    paddingBottom: 40
  }}
/>
```

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

### Toaster Styles

Source: https://github.com/gunnartorfis/sonner-native-toasts/blob/main/_autodocs/configuration.md

Example of applying fine-grained styles to individual toast parts.

```typescript
<Toaster
  styles={{
    toast: {
      minHeight: 64,
      paddingHorizontal: 16,
      paddingVertical: 12,
      borderRadius: 8
    },
    title: {
      fontSize: 16,
      fontWeight: '600',
      color: '#ffffff'
    },
    description: {
      fontSize: 14,
      color: '#d1d5db',
      marginTop: 4
    }
  }}
/>
```

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

### toast.custom() Example

Source: https://github.com/gunnartorfis/sonner-native-toasts/blob/main/_autodocs/EXPORTS.md

Show a custom React component as a toast.

```typescript
toast.custom(<MyComponent />)
```

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

### Toaster Style

Source: https://github.com/gunnartorfis/sonner-native-toasts/blob/main/_autodocs/configuration.md

Example of applying a custom style object to each toast container.

```typescript
<Toaster
  style={{
    backgroundColor: '#1f2937',
    borderRadius: 12,
    borderWidth: 1,
    borderColor: '#374151'
  }}
/>
```

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

### toast.warning() Example

Source: https://github.com/gunnartorfis/sonner-native-toasts/blob/main/_autodocs/EXPORTS.md

Show a warning toast with △ icon (variant: 'warning').

```typescript
toast.warning('Please be careful!')
```

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

### Toaster Component Example

Source: https://github.com/gunnartorfis/sonner-native-toasts/blob/main/_autodocs/EXPORTS.md

Root component providing toast container and global configuration. Must be placed at app root.

```typescript
import { Toaster } from 'sonner-native'

export default function RootLayout() {
  return (
    <>
      <Stack />
      <Toaster position="bottom-center" theme="dark" />
    </>
  )
}
```

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

### Checking Peer Dependencies

Source: https://github.com/gunnartorfis/sonner-native-toasts/blob/main/_autodocs/errors.md

Command to list the installation status of essential peer dependencies for Sonner Native Toasts.

```bash
npm list react-native-reanimated react-native-gesture-handler \
  react-native-safe-area-context react-native-screens react-native-svg
```

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

### Toaster Offset

Source: https://github.com/gunnartorfis/sonner-native-toasts/blob/main/_autodocs/configuration.md

Examples of setting the vertical offset for toasts.

```typescript
// Toasts appear 20px below the top
<Toaster position="top-center" offset={20} />

// Toasts appear 20px above the bottom
<Toaster position="bottom-center" offset={20} />
```

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

### toast.success() Example

Source: https://github.com/gunnartorfis/sonner-native-toasts/blob/main/_autodocs/EXPORTS.md

Show a success toast with checkmark icon (variant: 'success').

```typescript
toast.success('Operation succeeded!')
```

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

### ToastPosition Type Example

Source: https://github.com/gunnartorfis/sonner-native-toasts/blob/main/_autodocs/EXPORTS.md

Position where toasts appear on screen.

```typescript
type ToastPosition = 'top-center' | 'bottom-center' | 'center'
```

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

### Success Toast Example

Source: https://github.com/gunnartorfis/sonner-native-toasts/blob/main/_autodocs/api-reference/toast.md

Shows how to display a success toast, both with a message only and with additional options like description and duration.

```typescript
toast.success('Changes saved successfully')

const id = toast.success('User created', {
  description: 'User account has been created',
  duration: 3000
})
```

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

### Global Configuration

Source: https://github.com/gunnartorfis/sonner-native-toasts/blob/main/_autodocs/api-reference/index.md

Example of configuring the Toaster component with various props for global settings.

```typescript
<Toaster
  position="bottom-center"
  duration={4000}
  theme="dark"
  closeButton={true}
  richColors={true}
  toastOptions={{
    titleStyle: { fontSize: 16 }
  }}
/>
```

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

### Default (Info) Toast Example

Source: https://github.com/gunnartorfis/sonner-native-toasts/blob/main/_autodocs/api-reference/toast.md

Demonstrates how to display a simple info toast and a toast with custom options, including updating it later.

```typescript
import { toast } from 'sonner-native'

// Simple toast
tost('Hello, World!')

// With options
const toastId = toast('Operation started', {
  duration: 5000,
  position: 'bottom-center'
})

// Update the toast later
tost.success('Operation completed!', { id: toastId })
```

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

### toast.dismiss() Example

Source: https://github.com/gunnartorfis/sonner-native-toasts/blob/main/_autodocs/EXPORTS.md

Dismiss one or all toasts.

```typescript
toast.dismiss(toastId) // Dismiss specific
toak.dismiss() // Dismiss all
```

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

### Controlling Toasts

Source: https://github.com/gunnartorfis/sonner-native-toasts/blob/main/_autodocs/api-reference/index.md

Examples of how to dismiss specific or all toasts, and how to trigger a wiggle animation.

```typescript
// Dismiss specific toast
ttoast.dismiss(id)

// Dismiss all toasts
ttoast.dismiss()

// Animate specific toast
ttoast.wiggle(id)
```

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

### Toaster Component Usage

Source: https://github.com/gunnartorfis/sonner-native-toasts/blob/main/_autodocs/api-reference/index.md

Example of how to render the `Toaster` component with common props.

```typescript
<Toaster
  position="bottom-center"
  theme="dark"
  richColors={true}
/>
```

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

### Promise Toast

Source: https://github.com/gunnartorfis/sonner-native-toasts/blob/main/_autodocs/OVERVIEW.md

Example of using toast.promise with a new Promise.

```typescript
toast.promise(
  new Promise((resolve) => {
    setTimeout(() => resolve({ count: 42 }), 2000)
  }),
  {
    loading: 'Loading...',
    success: (data) => `Found ${data.count} items`,
    error: 'Failed to load'
  }
)
```

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

### Build

Source: https://github.com/gunnartorfis/sonner-native-toasts/blob/main/docs/README.md

Generates static website content for deployment.

```bash
$ yarn build
```

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

### Platform-Specific Configuration

Source: https://github.com/gunnartorfis/sonner-native-toasts/blob/main/_autodocs/OVERVIEW.md

Example of configuring toast properties based on the platform.

```typescript
import { Platform } from 'react-native'

<Toaster
  position={Platform.OS === 'android' ? 'bottom-center' : 'top-center'}
  gap={Platform.OS === 'android' ? 16 : 12}
/>
```

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

### Configuration Inheritance Example

Source: https://github.com/gunnartorfis/sonner-native-toasts/blob/main/_autodocs/configuration.md

Illustrates how per-toast options override Toaster component props, which override built-in defaults.

```typescript
// Toaster sets duration to 5000ms
<Toaster duration={5000}>

// This toast uses Toaster's duration (5000)
tost.success('Default duration')

// This toast overrides to 2000ms
tost.success('Custom duration', { duration: 2000 })
```

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

### toastOptions - Global Styles

Source: https://github.com/gunnartorfis/sonner-native-toasts/blob/main/_autodocs/api-reference/Toaster.md

Example of applying global styles to all toasts.

```typescript
toastOptions?: {
  style?: ViewStyle
  unstyled?: boolean
  success?: ViewStyle
  error?: ViewStyle
  warning?: ViewStyle
  info?: ViewStyle
  loading?: ViewStyle
  toastContainerStyle?: ViewStyle
  toastContentStyle?: ViewStyle
  buttonsStyle?: ViewStyle
  closeButtonStyle?: ViewStyle
  closeButtonIconStyle?: ViewStyle
  textContainerStyle?: ViewStyle
  titleStyle?: TextStyle
  descriptionStyle?: TextStyle
  actionButtonStyle?: ViewStyle
  actionButtonTextStyle?: TextStyle
  cancelButtonStyle?: ViewStyle
  cancelButtonTextStyle?: TextStyle
  backgroundComponent?: React.ReactNode
}
```

```jsx
<Toaster
  toastOptions={{
    titleStyle: { fontSize: 16, fontWeight: '600' },
    descriptionStyle: { fontSize: 14, opacity: 0.8 },
    buttonStyle: { marginTop: 8 }
  }}
/>
```

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

### Toaster Background Component

Source: https://github.com/gunnartorfis/sonner-native-toasts/blob/main/_autodocs/configuration.md

Example of providing a custom React component as the background for toasts.

```typescript
const gradientBg = (
  <LinearGradient
    colors={['#667eea', '#764ba2']}
    start={{ x: 0, y: 0 }}
    end={{ x: 1, y: 1 }}
    style={{ flex: 1, borderRadius: 8 }}
  />
)

<Toaster backgroundComponent={gradientBg} />
```

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

### Toaster Duration

Source: https://github.com/gunnartorfis/sonner-native-toasts/blob/main/_autodocs/configuration.md

Examples of setting the default auto-dismiss duration for toasts.

```typescript
// Toasts dismiss after 5 seconds by default
<Toaster duration={5000} />

// Toasts never auto-dismiss by default
<Toaster duration={Infinity} />
```

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

### Dynamic Theme Application

Source: https://github.com/gunnartorfis/sonner-native-toasts/blob/main/_autodocs/errors.md

Provides an example of how to dynamically set the toast theme based on the device's color scheme using `useColorScheme`.

```typescript
import { useColorScheme } from 'react-native'

const colorScheme = useColorScheme()

<Toaster theme={colorScheme === 'dark' ? 'dark' : 'light'} />
```

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

### loadingIcon

Source: https://github.com/gunnartorfis/sonner-native-toasts/blob/main/_autodocs/api-reference/Toaster.md

Example of providing a custom loading spinner icon.

```typescript
loadingIcon?: React.ReactNode
```

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

### icons

Source: https://github.com/gunnartorfis/sonner-native-toasts/blob/main/_autodocs/api-reference/Toaster.md

Example of providing custom icons for different toast variants.

```typescript
icons?: {
  success?: React.ReactNode
  error?: React.ReactNode
  warning?: React.ReactNode
  info?: React.ReactNode
  loading?: React.ReactNode
}
```

```jsx
import { AlertCircle } from 'react-native-vector-icons/Feather'

<Toaster
  icons={{
    success: <Text style={{ fontSize: 20 }}>✓</Text>,
    error: <Text style={{ fontSize: 20 }}>✗</Text>,
    warning: <AlertCircle size={20} color="orange" />,
    info: <Text style={{ fontSize: 20 }}>ⓘ</Text>,
    loading: <ActivityIndicator color="#3b82f6" />
  }}
/>
```

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

### Deployment (using SSH)

Source: https://github.com/gunnartorfis/sonner-native-toasts/blob/main/docs/README.md

Deploys the website using SSH.

```bash
$ USE_SSH=true yarn deploy
```

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

### Toast Positioning and Offset

Source: https://github.com/gunnartorfis/sonner-native-toasts/blob/main/_autodocs/errors.md

Shows correct examples of setting `position` and `offset` for toasts, and highlights incorrect usage with invalid positions or conflicting `positionerStyle` values.

```typescript
// ✅ CORRECT
<Toaster position="bottom-center" offset={20} />

// ❌ WRONG - invalid position
<Toaster position="bottom-right" /> // Error: not a valid position

// ❌ Conflicting styles
<Toaster
  positionerStyle={{
    position: 'absolute', // May conflict with internal positioning
    bottom: 100 // May conflict with offset
  }}
/>
```

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

### toast() Function Usage

Source: https://github.com/gunnartorfis/sonner-native-toasts/blob/main/_autodocs/api-reference/index.md

Examples of using the primary `toast()` function for various purposes.

```typescript
toast.success('Message')
ttoast.promise(fetchData(), { loading: '...', success: '...', error: '...' })
ttoast.dismiss(id)
```

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

### isToastAction Usage Example

Source: https://github.com/gunnartorfis/sonner-native-toasts/blob/main/_autodocs/EXPORTS.md

Demonstrates how to use the `isToastAction` type guard to differentiate between a `ToastAction` object and a `React.ReactNode`.

```typescript
import { isToastAction } from 'sonner-native'

const action: ToastAction | React.ReactNode = /* ... */

if (isToastAction(action)) {
  // action is { label: string, onClick: () => void }
  console.log(action.label)
} else {
  // action is React.ReactNode
}
```

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

### Duration Prop Example

Source: https://github.com/gunnartorfis/sonner-native-toasts/blob/main/_autodocs/api-reference/Toaster.md

Example of setting the default auto-dismiss duration for toasts.

```typescript
<Toaster duration={5000} />
```

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

### toast.error() Example

Source: https://github.com/gunnartorfis/sonner-native-toasts/blob/main/_autodocs/EXPORTS.md

Show an error toast with × icon (variant: 'error').

```typescript
toast.error('Operation failed!')
```

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

### Toast with Action Button

Source: https://github.com/gunnartorfis/sonner-native-toasts/blob/main/_autodocs/OVERVIEW.md

Example of a toast with an action button, including undo functionality.

```typescript
const deleteItem = (id) => {
  // Delete logic...
}

const undoDelete = (id) => {
  // Undo logic...
}

const handleDelete = (id) => {
  deleteItem(id)
  
  toast('Item deleted', {
    action: {
      label: 'Undo',
      onClick: () => undoDelete(id)
    }
  })
}
```

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

### Error Toast Example

Source: https://github.com/gunnartorfis/sonner-native-toasts/blob/main/_autodocs/api-reference/toast.md

Illustrates how to display an error toast, including handling errors from asynchronous operations and displaying dynamic error messages.

```typescript
toast.error('Failed to save changes')

try {
  await saveData()
} catch (error) {
  toast.error('An error occurred', {
    description: error instanceof Error ? error.message : 'Unknown error'
  })
}
```

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

### Toast ID Issues: Usage Examples

Source: https://github.com/gunnartorfis/sonner-native-toasts/blob/main/_autodocs/errors.md

Illustrates auto-generated IDs, explicit IDs for updates, and handling of invalid IDs.

```typescript
// Auto-generated ID (recommended)
const id = toast.success('Message')

// Explicit ID - prefer for updates
const id = 'save-op-123'
t oast.loading('Saving...', { id })
// Later...
t oast.success('Saved!', { id }) // Updates the same toast

// Invalid ID - gets auto-generated
t oast('Message', { id: '' }) // Generates a new ID
```

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

### Promise toast with custom styles per state

Source: https://github.com/gunnartorfis/sonner-native-toasts/blob/main/_autodocs/api-reference/toast.md

An example showcasing how to apply custom styles to loading, success, and error states of a promise toast.

```typescript
// With custom styles per state
const uploadPromise = new Promise((resolve) => {
  setTimeout(() => resolve({ size: 1024 }), 2000)
})

toast.promise(uploadPromise, {
  loading: 'Uploading...', 
  success: (result) => `Uploaded ${result.size} bytes`,
  error: 'Upload failed',
  styles: {
    loading: { style: { backgroundColor: 'blue' } },
    success: { style: { backgroundColor: 'green' } },
    error: { style: { backgroundColor: 'red' } }
  }
})
```

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

### Basic Usage

Source: https://github.com/gunnartorfis/sonner-native-toasts/blob/main/_autodocs/api-reference/Toaster.md

Example of integrating the Toaster component into a React Native application's root layout.

```typescript
import { View } from 'react-native'
import { Toaster } from 'sonner-native'
import { NavigationContainer } from '@react-navigation/native'

function App() {
  return (
    <View style={{ flex: 1 }}>
      <NavigationContainer>
        {/* Your navigation and routes */}
      </NavigationContainer>
      <Toaster />
    </View>
  )
}

export default App
```

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

### Styling with NativeWind

Source: https://github.com/gunnartorfis/sonner-native-toasts/blob/main/_autodocs/api-reference/Toaster.md

Example of how to style toasts using NativeWind by applying Tailwind CSS classes via the `className` property within the `styles` prop.

```typescript
<Toaster
  styles={{
    toast: { className: 'bg-slate-900 border border-slate-700' },
    title: { className: 'text-white font-semibold' },
    description: { className: 'text-slate-300 text-sm' }
  }}
/>
```

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

### Dismiss a specific toast example

Source: https://github.com/gunnartorfis/sonner-native-toasts/blob/main/_autodocs/api-reference/toast.md

An example of how to dismiss a single, specific toast using its ID.

```typescript
// Dismiss a specific toast
const toastId = toast('Doing something...')
// ... later
tost.dismiss(toastId)
```

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

### Deployment (not using SSH)

Source: https://github.com/gunnartorfis/sonner-native-toasts/blob/main/docs/README.md

Deploys the website without using SSH, requiring a GitHub username.

```bash
$ GIT_USER=<Your GitHub username> yarn deploy
```

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

### Complex custom component example

Source: https://github.com/gunnartorfis/sonner-native-toasts/blob/main/_autodocs/api-reference/toast.md

An example of toast.custom() with a more complex React Native component, including configuration options like duration and onDismiss.

```typescript
// Complex custom component
const customElement = (
  <View style={{ backgroundColor: '#fff', padding: 16, borderRadius: 8 }}>
    <Text style={{ fontSize: 16, marginBottom: 8 }}>Upload Complete</Text>
    <ProgressBar value={100} />
    <Button title="View File" onPress={() => {}} />
  </View>
)

const id = toast.custom(customElement, {
  duration: 5000,
  onDismiss: () => console.log('Toast dismissed')
})
```

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

### autoWiggleOnUpdate

Source: https://github.com/gunnartorfis/sonner-native-toasts/blob/main/_autodocs/api-reference/Toaster.md

Example of controlling when toasts wiggle on update.

```typescript
autoWiggleOnUpdate?: AutoWiggle = 'never'
```

```jsx
<Toaster autoWiggleOnUpdate="toast-change" />
```

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

### Toast ID - Auto-generated

Source: https://github.com/gunnartorfis/sonner-native-toasts/blob/main/_autodocs/OVERVIEW.md

Example of a toast with an auto-generated ID.

```typescript
// Auto-generated ID
const id = toast.success('Message')
console.log(id) // "1"
```

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

### swipeToDismissDirection

Source: https://github.com/gunnartorfis/sonner-native-toasts/blob/main/_autodocs/api-reference/Toaster.md

Example of setting the direction for swiping to dismiss a toast.

```typescript
swipeToDismissDirection?: ToastSwipeDirection = 'up'
```

```jsx
<Toaster swipeToDismissDirection="left" />
```

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

### closeButton

Source: https://github.com/gunnartorfis/sonner-native-toasts/blob/main/_autodocs/api-reference/Toaster.md

Example of how to show a close button on all toasts by default.

```typescript
closeButton?: boolean = false
```

```jsx
<Toaster closeButton={true} />
```

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

### ToastWrapper

Source: https://github.com/gunnartorfis/sonner-native-toasts/blob/main/_autodocs/api-reference/Toaster.md

Example of using a wrapper component around individual toasts.

```typescript
ToastWrapper?: React.ComponentType<
  ViewProps & {
    children: React.ReactNode
    toastId: string | number
  }
>
```

```jsx
const CustomToastWrapper: React.FC<{
  children: React.ReactNode
  toastId: string | number
}> = ({ children, toastId }) => (
  <View
    style={{
      borderWidth: 1,
      borderColor: '#e5e7eb',
      borderRadius: 12,
      overflow: 'hidden'
    }}
  >
    {children}
  </View>
)

<Toaster ToastWrapper={CustomToastWrapper} />
```

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

### ToasterOverlayWrapper

Source: https://github.com/gunnartorfis/sonner-native-toasts/blob/main/_autodocs/api-reference/Toaster.md

Example of using a wrapper component around toasts for iOS.

```typescript
ToasterOverlayWrapper?: React.ComponentType<{ children: React.ReactNode }>
```

```jsx
const CustomWrapper: React.FC<{ children: React.ReactNode }> = ({ children }) => (
  <View style={{ pointerEvents: 'box-none' }}>
    {children}
  </View>
)

<Toaster ToasterOverlayWrapper={CustomWrapper} />
```

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

### toastOptions - Variant-specific Styles

Source: https://github.com/gunnartorfis/sonner-native-toasts/blob/main/_autodocs/api-reference/Toaster.md

Example of applying variant-specific styles to toasts.

```jsx
<Toaster
  toastOptions={{
    success: { backgroundColor: '#10b981', borderRadius: 8 },
    error: { backgroundColor: '#ef4444', borderRadius: 8 },
    warning: { backgroundColor: '#f59e0b', borderRadius: 8 }
  }}
/>
```

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

### In your App.tsx/entry point

Source: https://github.com/gunnartorfis/sonner-native-toasts/blob/main/docs/docs/index.md

Integrate the Toaster component into your main App component to enable toast display.

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

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

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

### Styling Issues: Applying Custom Styles

Source: https://github.com/gunnartorfis/sonner-native-toasts/blob/main/_autodocs/errors.md

Illustrates correct and incorrect ways to apply custom styles to toasts, avoiding the `unstyled` prop issue.

```typescript
// ❌ WRONG - unstyled removes all styles
<Toaster
  unstyled={true}
  styles={{
    toast: { backgroundColor: 'blue' } // Won't apply!
  }}
/>

// ✅ CORRECT - without unstyled
<Toaster
  styles={{
    toast: {
      backgroundColor: 'blue',
      borderRadius: 8,
      paddingHorizontal: 16
    }
  }}
/>
```

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

### pauseWhenPageIsHidden

Source: https://github.com/gunnartorfis/sonner-native-toasts/blob/main/_autodocs/api-reference/Toaster.md

Example of pausing toast auto-dismiss timers when the app goes to the background.

```typescript
pauseWhenPageIsHidden?: boolean = false
```

```jsx
<Toaster pauseWhenPageIsHidden={true} />
```

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

### Show a toast

Source: https://github.com/gunnartorfis/sonner-native-toasts/blob/main/docs/docs/index.md

Import the toast function and use it to display a simple toast notification.

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

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

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

### Toast with Action

Source: https://github.com/gunnartorfis/sonner-native-toasts/blob/main/_autodocs/api-reference/index.md

Illustrates how to add an action button to a toast, such as an 'Undo' option.

```typescript
const id = toast('Item deleted', {
  action: {
    label: 'Undo',
    onClick: () => {
      handleUndo()
      toast.dismiss(id)
    }
  }
})
```

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

### Promise Toast

Source: https://github.com/gunnartorfis/sonner-native-toasts/blob/main/_autodocs/api-reference/index.md

Shows how to use `toast.promise()` to handle the loading, success, and error states of a promise.

```typescript
toast.promise(asyncOperation(), {
  loading: 'Processing...', 
  success: (result) => `Completed: ${result.message}`,
  error: (error) => `Error: ${error.message}`
})
```

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

### Enabling Logging for Toast Lifecycle Events

Source: https://github.com/gunnartorfis/sonner-native-toasts/blob/main/_autodocs/errors.md

Demonstrates how to add console logs to track toast events such as dismissal, auto-closing, and pressing.

```typescript
const id = toast.success('Message', {
  onDismiss: (id) => console.log('Dismissed:', id),
  onAutoClose: (id) => console.log('Auto-closed:', id),
  onPress: () => console.log('Pressed')
})

console.log('Toast created with ID:', id)
```

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

### Loading with Result Pattern

Source: https://github.com/gunnartorfis/sonner-native-toasts/blob/main/_autodocs/api-reference/index.md

Demonstrates how to show a loading toast, then update it with a success or error message based on an asynchronous operation.

```typescript
async function handleSave() {
  const id = toast.loading('Saving...')
  try {
    await saveData()
    toast.success('Saved!', { id })
  } catch (error) {
    toast.error(error.message, { id })
  }
}
```

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

### Styling Toasts by Variant

Source: https://github.com/gunnartorfis/sonner-native-toasts/blob/main/docs/docs/Toaster.md

Illustrates how to set default styles for specific toast variants (e.g., success, error) within 'toastOptions'.

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

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

### Custom Content

Source: https://github.com/gunnartorfis/sonner-native-toasts/blob/main/_autodocs/OVERVIEW.md

Example of a toast with custom content using React Native components.

```typescript
toast.custom(
  <View style={{ padding: 16 }}>
    <Text style={{ fontSize: 18, fontWeight: 'bold' }}>
      Custom Toast
    </Text>
    <ProgressBar value={progress} />
  </View>
)
```

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

### Show a Simple Toast

Source: https://github.com/gunnartorfis/sonner-native-toasts/blob/main/_autodocs/README.md

Demonstrates how to display a basic success toast message.

```typescript
import { toast } from 'sonner-native'

tost.success('Operation succeeded!')
```

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

### Main Functions - Update Toast

Source: https://github.com/gunnartorfis/sonner-native-toasts/blob/main/_autodocs/OVERVIEW.md

Update an existing toast, for example, from loading to success.

```typescript
// Update toast
ttoast.success('Saved!', { id })
```

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

### Usage with Expo Router

Source: https://github.com/gunnartorfis/sonner-native-toasts/blob/main/_autodocs/api-reference/Toaster.md

Example of integrating the Toaster component within an Expo Router application.

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

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

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

### Run Unit Tests

Source: https://github.com/gunnartorfis/sonner-native-toasts/blob/main/CONTRIBUTING.md

Executes the unit tests for the project using Jest.

```sh
pnpm test
```