Gooey-Toast (React Native UI Library)

A React Native UI component library featuring animated toast notifications with a gooey morphing effect. Built as a Turborepo monorepo with CLI tooling for easy integration.

React NativeExpoTypeScriptReanimatedReact Native SVGTurborepopnpm

GitHub ↗

Overview

Gooey-Toast is an open-source React Native UI library that brings a distinctive gooey, morphing animation to toast notification components. Packaged as a Turborepo monorepo with a CLI generator for quick project integration.

The Animation Effect

The "gooey" effect is achieved by combining React Native Reanimated with SVG filters — a technique common in web CSS but rarely seen in React Native. The toast notification morphs between shapes using SVG feGaussianBlur and feColorMatrix to create the liquid-merge appearance.

Monorepo Structure

packages/
  core/          — the actual component library
  cli/           — npx gooey-toast add <component>
apps/
  example/       — Expo app demonstrating all variants

Turborepo handles build caching and task orchestration across packages. pnpm workspaces manage the dependency graph.

Technical Stack

Layer	Technology
Components	React Native, TypeScript
Animation	React Native Reanimated 3
SVG Effects	React Native SVG
Gestures	React Native Gesture Handler
Monorepo	Turborepo, pnpm

Key Features

Plug-and-play toast component with gooey morphing animation
Multiple variants: success, error, warning, info
Configurable duration, position, and swipe-to-dismiss
CLI generator for dropping components directly into existing projects

... /code-preview ...

// repository is private or not linked

← Back

Gooey-Toast (React Native UI Library)