react-native-toast-feedback

Animated feedback library for React Native with a toast-first focus:

• Toast handling API with imperative show() and hide()
• Smooth slide/fade toast animation
• Progress toast features (progress bar, countdown, action button)

No native modules required. Pure Animated API.

Overview

react-native-toast-feedback helps you add polished, high-signal UI feedback to React Native apps without adding heavy setup or native dependencies.

It is built around a practical toast workflow (ref.current?.show(...)) and also includes two supporting micro-interactions:

• a shakeable input for validation errors
• a pulse button for press feedback and loading states

The goal is to make app feedback feel responsive and intentional with minimal code.

Why this library

• Toast-first API: Trigger notifications from async workflows, forms, and network actions using an imperative ref pattern.
• Lightweight animations: Uses React Native Animated directly, so setup stays simple.
• Consistent feedback primitives: Toasts, shake inputs, and pulse buttons share a common "instant feedback" design philosophy.
• TypeScript-ready: Exposes typed refs and props for safer integration.

Common use cases

• Show success/error/info messages after API requests
• Display long-running action progress (upload, sync, import) with optional countdown and action button
• Shake an input when validation fails
• Disable a submit button with a loading spinner while requests are in flight

How it works

• Mount one <ToastNotification /> near a screen or app root.
• Keep a ref to call show() and hide() from handlers.
• Pick the visual variant (success, error, info, warning) per event.
• Optionally enable progress mode with showProgress, showCountdown, actionLabel, and persistent.

Compatibility

• React Native library (no native module linking required)
• Works with JavaScript and TypeScript projects
• Suitable for apps that want a small feedback layer without adding larger UI frameworks

Core Focus: Toasts

| Component | Effect | |---|---| | <ToastNotification /> | Slide/fade toast with success, error, info, warning variants | | Progress Toast | Optional progress bar, countdown timer, action button, and persistent mode |

Secondary Effects

| Component | Effect | |---|---| | <ShakeInput /> | Shakes the input horizontally on error | | <PulseButton /> | Press scale + pulse ring animation, optional loading spinner |

Installation

npm install react-native-toast-feedback
# or
yarn add react-native-toast-feedback

No pod install or linking needed.

Quick Usage

Toast Handling + Animation (ToastNotification)

import { ToastNotification } from 'react-native-toast-feedback';

const toastRef = useRef(null);

// Mount once near screen root:
<ToastNotification ref={toastRef} position="top" />

// Trigger toast effect:
toastRef.current?.show({
  message: 'Successfully saved!',
  type: 'success',
  duration: 3000,
});

Progress Toast

toastRef.current?.show({
  message: 'Uploading profile photo...',
  type: 'info',
  duration: 5000,
  showProgress: true,
  showCountdown: true,
  actionLabel: 'Cancel',
  onActionPress: () => console.log('Upload cancelled'),
});

Secondary: Input Shake (ShakeInput)

import { ShakeInput } from 'react-native-toast-feedback';

const ref = useRef(null);

ref.current?.shake();

<ShakeInput ref={ref} placeholder="Password" secureTextEntry />

Secondary: Pulse Button (PulseButton)

import { PulseButton } from 'react-native-toast-feedback';

<PulseButton title="Submit" color="#4f46e5" onPress={() => console.log('Pressed')} />

// Loading state
<PulseButton
  title="Submit"
  loading
  loadingText="Please wait..."
  onPress={handleSubmit}
/>

Props

Toast Container Props (ToastNotification)

| Prop | Type | Default | Description | |---|---|---|---| | position | 'top' \| 'bottom' | 'top' | Screen edge | | offset | number | 50 | px from edge |

show() options (toast + progress toast):

| Key | Type | Default | Description | |---|---|---|---| | message | string | — | Text to display | | type | 'success' \| 'error' \| 'info' \| 'warning' | 'info' | Visual style | | duration | number | 3000 | Auto-hide delay in ms | | showProgress | boolean | false | Shows shrinking progress bar | | showCountdown | boolean | false | Shows remaining seconds | | actionLabel | string | — | Action button text | | onActionPress | function | — | Action callback | | persistent | boolean | false | Stays visible until dismissed |

Secondary Input Props (ShakeInput)

| Prop | Type | Default | Description | |---|---|---|---| | shakeDuration | number | 400 | Total duration of shake in ms | | shakeIntensity | number | 10 | Max horizontal offset in px | | shakeColor | string | '#e74c3c' | Border color during shake | | ...TextInputProps | — | — | All standard TextInput props |

Secondary Button Props (PulseButton)

| Prop | Type | Default | Description | |---|---|---|---| | title | string | 'Press Me' | Button label | | onPress | function | — | Press handler | | status | 'idle' \| 'loading' \| 'success' \| 'error' | 'idle' | Current implemented UI state uses loading/status='loading' for spinner/disable | | loading | boolean | false | Shows spinner and disables press | | loadingText | string | — | Label while loading | | successText | string | — | Reserved prop for custom success label | | errorText | string | — | Reserved prop for custom error label | | color | string | '#4f46e5' | Base background color | | successColor | string | — | Reserved prop for success background | | errorColor | string | — | Reserved prop for error background | | textColor | string | '#fff' | Label color | | loadingIndicatorColor | string | textColor | Spinner color | | pulseColor | string | same as color | Pulse ring color | | disabled | boolean | false | Disable press and animation |

License

MIT