@synonymdev/react-native-toast

Native toast notifications for React Native.

Renders toasts from native iOS and Android code so notifications can appear above native sheet presentation surfaces.

Designed for use with native sheet implementations like React Navigation formSheet, software-mansion-labs/react-native-bottom-sheet and lodev09/react-native-true-sheet.

Demo

Features

• Native iOS and Android rendering.
• Appears above native sheet presentation surfaces.
• Simple showToast(options) JavaScript API.
• Built-in success, info, warning, and error variants.
• Typed options for behavior, haptics, blur, and styling.
• Global configuration for default behavior and variant styling.

Why?

React Native toast components usually render inside the JavaScript view hierarchy. That works for normal screens, but it can fall behind native sheet presentation layers.

This package sends a fully resolved toast payload to a small native module, then renders the toast from native iOS and Android code. That makes it useful for app-level feedback that should remain visible across native sheet presentations.

On Android, React Native Modal and modal-backed sheet libraries create their own native window. This toast currently renders in the Activity window, so those modal surfaces can appear above it.

Installation

yarn add @synonymdev/react-native-toast

Usage

import { showToast } from '@synonymdev/react-native-toast';

showToast({
	type: 'success',
	title: 'Saved',
	description: 'Your changes are ready.',
});

Configure shared defaults once during app startup:

import { configureToast } from '@synonymdev/react-native-toast';

configureToast({
	options: {
		haptics: true,
	},
});

See API.md for configuration, styling, and the full type reference. Local development and example app instructions live in DEVELOPMENT.md.