shadcn-style animations for React Native
If you like how shadcn/ui works on the web, Native Animation applies the same idea to React Native and Expo. Instead of installing a component library and living with its defaults, you copy the source of each animation into your own project and edit it like any other file.
What copying the code means
Every piece is a self-contained folder: one TypeScript component, its assets, and a README that documents the public props. After you add it, the folder belongs to your app. There is no runtime dependency on Native Animation, nothing to keep in sync, and no wrapper to fight when you need a different timing curve, a new color, or a changed layout.
The animations are built on libraries you probably already use in an Expo app: Reanimated for UI-thread motion, Gesture Handler for touch, and, where a piece needs them, Skia, Expo Image, Expo Blur, or Expo Linear Gradient. The CLI installs any missing dependency with the versions your Expo SDK expects.
How npx nativeanimation add works
Sign in once with npx nativeanimation login, then run npx nativeanimation add <id> from the root of your Expo project. The CLI checks that you own the piece, writes its folder into your components directory (configurable with --path or a nativeanimation.json file), and installs dependencies. Use --dry-run to preview the changes first. The CLI reference lists every option, and the getting started guide walks through a first install.
Copying code versus installing a library
- Control: you can change anything, including internals, without waiting for a release or patching node_modules.
- Bundle: you ship only the pieces you added, not a package full of components you never render.
- Upgrades: the trade-off. A copied piece does not update itself, so you decide when to re-add a newer version with
--overwrite. - Fit: a library suits generic, stable controls. Copying suits animations, which almost always need tuning to match a product.
Browse by type
- React Native Carousel Animations
- React Native Button Animations
- React Native Micro-interactions
- Step-by-step guides
Free pieces to try
Start with a free piece to see the workflow end to end before you buy anything.
- Free
Shimmer Skeleton
A synchronized diagonal sheen for loading placeholders.
- Free
Copy Confirm Button
A dimensional copy action that rotates into a check, flashes a success halo, and raises a polished confirmation bubble.
- Free
Color Variant Carousel
A gesture-driven product carousel that synchronizes product imagery, copy, and a full-screen color field.