Skip to content

Release 4.0.0

Latest
Latest

Choose a tag to compare

View all tags
@mCodex mCodex released this 27 Apr 18:57
v4.0.0
d00ca4e

🚀 v4.0.0 — Providerless, High-Performance Toasts

A complete rewrite. No provider, no Reanimated, no gesture-handler — just a tiny, tree-shakeable, WCAG 2.2 AA toast system built on useSyncExternalStore.

✨ Highlights

  • 🪶 Providerless API — Drop a single <Toaster /> anywhere in your tree. The <ToastProvider> wrapper is gone.
  • 📡 External store + useSyncExternalStore — Per-toast subscriptions; sibling toasts no longer trigger sibling re-renders.
  • ⚡ Microtask-batched dispatch — Bursts of toast.show() collapse into a single render commit.
  • 🎬 Native-driver Animated only — Zero new peer deps. No Reanimated. No gesture-handler.
  • ♿ WCAG 2.2 AA — Reduce-motion (SC 2.3.3), 24×24 hit-targets (SC 2.5.8), live regions, full keyboard support.
  • 👆 Opt-in swipe-to-dismiss powered by core PanResponder.
  • 🧠 TypeScript 6 strict — erasableSyntaxOnly, noUncheckedSideEffectImports, isolatedModules, and friends.

🔥 Breaking Changes

⚠️ v4 is not a drop-in replacement for v3. Migration is straightforward but required.

  • ❌ <ToastProvider> removed. Replace with <Toaster /> mounted as a sibling near the root.
  • 🔄 useToast() no longer requires a provider and returns a stable singleton API (no re-renders on toast changes).
  • 🆕 New imperative entry: toast singleton + configureToast(...) for code outside the React tree.
  • 🧹 Removed: ToastContext, legacy sizing utilities, and the old fontSizeConfig shape — superseded by the unified ToastConfig.

Before (v3)

<ToastProvider>
  <App />
</ToastProvider>

After (v4)

<>
  <App />
  <Toaster />
</>

🆕 New Features

  • 🎯 <Toaster /> — Lazy-mounted root component. Renders nothing until the first toast.
  • 🪝 useToast() — Ergonomic hook returning the full toast API (success, error, info, warning, show, dismiss, clear).
  • 🛰️ toast singleton — Call from anywhere (Redux middleware, API clients, error boundaries) — no React tree required.
  • ⚙️ configureToast(config) — Global defaults: position, duration, max visible, overflow strategy (evict / queue), haptics, animations, styling.
  • 🧱 maxVisible + overflow strategies — Cap visible toasts and choose evict (drop oldest) or queue (hold extras until a slot frees).
  • ♿ useReducedMotion() — Public hook exposing the user's reduce-motion preference.
  • 🎨 Per-toast overrides — duration, style, textStyle, onPress, haptic, and accessibility props per call.
  • 👆 Swipe-to-dismiss — Opt-in via config; built on PanResponder, no extra deps.
  • 🧪 159 unit + integration tests — Full coverage across store, hooks, components, utils, and a11y.

🛠 Improvements

  • 🏎️ Single source of truth for timers — toastStore exclusively owns auto-dismiss; the animation hook subscribes via registerDismissHandler so exit animations always play before removal.
  • 🧯 Correct overflow eviction — Bursts that exceed maxVisible by more than one now evict every excess message in a single pass.
  • 🧹 Dismiss handler cleanup — remove() and clear() always free their handler entries; no leaks on rapid show/dismiss cycles.
  • 🧷 Pinned RN preset versions — @react-native/babel-preset@~0.83.6 and @react-native/jest-preset@~0.85.2 to prevent surprise majors.
  • 👂 A11y hint always advertises tap-to-dismiss — independent of whether onPress is set.
  • 🐛 White-screen bug on rapid toggles fixed.
  • 👆 Quick-tap dismissal reliably works at any animation phase.
  • 🎛️ erasableSyntaxOnly + isolatedModules for cleaner per-file compilation and tooling parity.

📦 Bundle & Deps

  • 🪶 Zero new peer dependencies — same install footprint as v3.
  • 🌳 "sideEffects": false — bundlers strip every export you don't import.
  • 🧬 Dual ESM build via react-native-builder-bob (module + typescript outputs).

📚 Documentation

  • 📖 README rewritten — new Quick Start, hook-first guidance, a11y guide, and full config reference.
  • 🧠 Rich JSDoc — IDE hover-docs on every public symbol (Toaster, useToast, toast, configureToast, all types).
  • 🧩 Migration guide for v3 → v4.

🙌 Migration in 30 Seconds

- import { ToastProvider, useToast } from 'react-native-rooster';
+ import { Toaster, useToast } from 'react-native-rooster';

  export default function App() {
    return (
-     <ToastProvider>
        <RootNavigator />
-     </ToastProvider>
+     <Toaster />
    );
  }

The useToast() API surface is unchanged — your existing call sites (addToast, success, error, etc.) keep working.

💚 Thanks

Thanks to everyone who tested pre-releases, filed issues, and reviewed #108. Enjoy v4! 🐔

Full Changelog: v3.2.5...v4.0.0

Assets 2
Loading