Skip to main content

​
React Native Bread

An extremely lightweight, opinionated toast component for React Native with premium feeling animations and complex gesture support.
React Native Bread demo

​
Why React Native Bread?

React Native Bread is built exclusively for React Native 0.76+ and the new architecture, delivering smooth 60fps animations with zero setup. Add one component, start toasting - no hooks, no providers.

Get started

Install React Native Bread and start showing toasts in minutes

Quickstart

Show your first toast with just a few lines of code

API reference

Explore the complete API and customization options

Guides

See real-world examples and advanced use cases

​
Key features

Only 20KB packed size with smooth 60fps animations powered by Reanimated. Built exclusively for React Native 0.76+ and the new architecture.
Add one component to your app, start toasting. No hooks, no providers, no context configuration.
Built-in support for success, error, info, promise, and custom toasts with automatic icons and colors.
Track async operations with automatic loading → success/error state transitions. Perfect for API calls and data fetching.
Automatic on iOS, simple setup on Android with ToastPortal. Never lose your toasts in modal screens.
Smooth swipe-to-dismiss gestures that feel native to the platform, with configurable dismissible behavior.
Show multiple toasts stacked with configurable limits. Built-in deduplication prevents duplicate toasts from stacking.
Customize colors, icons, styles, animations, and even create fully custom toast layouts. RTL support included.
All components are written to be optimized by React Compiler for maximum performance.

​
Simple, imperative API

React Native Bread features a clean imperative API inspired by Sonner, making it simple to show toasts from anywhere in your app: 
import { toast } from 'react-native-bread';

// Basic usage
toast.success('Saved!');

// With description
toast.success('Saved!', 'Your changes have been saved');
toast.error('Error', 'Something went wrong');

// Promise toast - automatic loading → success/error
toast.promise(fetchData(), {
  loading: { title: 'Loading...', description: 'Please wait' },
  success: { title: 'Done!', description: 'Data loaded' },
  error: (err) => ({ title: 'Failed', description: err.message }),
});

// Fully custom toast
toast.custom(({ dismiss }) => (
  <View style={{ padding: 16, flexDirection: 'row', alignItems: 'center' }}>
    <Text>Custom notification</Text>
    <Button title="Close" onPress={dismiss} />
  </View>
));

​
Compatibility

React Native Bread requires React Native 0.76+ and is built exclusively for the new architecture. Make sure your project meets the minimum version requirements.
Minimum requirements:
  • React Native ≥ 0.76.0
  • React ≥ 18.0.0
  • New Architecture enabled
Peer dependencies:
  • react-native-reanimated ≥ 4.1.0
  • react-native-gesture-handler ≥ 2.25.0
  • react-native-safe-area-context ≥ 5.0.0
  • react-native-screens ≥ 4.0.0
  • react-native-svg ≥ 15.8.0
  • react-native-worklets ≥ 0.5.0

​
Next steps

1

Install the package

Follow the installation guide to add React Native Bread to your project
2

Complete the quickstart

Get your first toast working in minutes with the quickstart guide
3

Explore the API

Learn about all available methods and customization options in the API reference

Build docs developers (and LLMs) love

Get started for freeTalk to us