Free React Native animations for Expo

Production-ready animation components for React Native and Expo, built with Reanimated 4, Gesture Handler and Skia. Copy a folder into your project and own the code: no runtime dependency on this repo.

These are the free pieces of Native Animation, a catalog of premium React Native animations: onboarding screens, carousels, paywalls, loaders, liquid glass tab bars and micro-interactions.

Animation	Preview	What it is
Shimmer Skeleton		A React Native skeleton loader with a synchronized diagonal shimmer for loading placeholders.
Copy Confirm Button		An animated button that morphs a copy icon into a check with a success halo and a confirmation bubble.
Drawn Checkbox		An animated checkbox with a spring fill, a hand-drawn check mark and a label strike-through, built with Skia.
Spring Toggle		An animated toggle switch you can drag: the thumb stretches, glows and settles with a spring.
Burst Like Button		An animated like button in Skia: a spring burst, physical particles, a rolling count and a hold-to-charge super-like.
Toast Stack		A React Native toast notification stack that fans open with depth and dismisses with physical swipes.
Hold to Confirm Button		A hold to confirm button for destructive or payment actions: a dimensional progress fill and a luminous success finish.
Sliding Segmented Control		An animated segmented control (tabs) with a spring indicator, layered light and a quick selection sweep.
Floating Label Input		A React Native floating label text input with a spring label, focus light, validation feedback and drawn status icons.
Quantity Stepper		An Add to cart button that expands into a rolling quantity stepper and collapses again at zero.
Bump Badge		An animated notification badge counter that bumps with a spring when the count changes.
Auto Height Accordion		An animated accordion (FAQ / collapsible) that measures and animates to any content height.

Native Animation Base (MIT, no account)

Native Animation Base is a free family of React Native components that share one theme, so an agent can compose a complete, coherent app: buttons, inputs, sheets, dialogs, toasts, tabs and full-screen blocks, with curated spring motion, light and dark modes, and accessible states. Free forever, MIT licensed (see the LICENSE in each folder). Every Base piece imports base-theme: copy it together with the pieces you use.

# No login needed for Base: the CLI copies the piece, its Base dependencies and base-theme
npx nativeanimation add base-sign-in-block

With the MCP connected, ask your agent to read the Base design guide and build the screens: build with an agent.

Blocks

Block	Preview	What it is
Base List Detail Block		A searchable list and detail screen with configurable records, category filters, avatar and badge data, create/edit forms, delete and undo callbacks, copy…
Base Onboarding Block		A three-step onboarding screen with configurable goals, interests, daily preferences, copy, answers, step control, callbacks, insets, and theme.
Base Plans Block		A plan-selection screen with configurable monthly and annual prices, plan content and icons, features, FAQ, selection callbacks, copy, loading, errors…
Base Settings Block		An account settings screen with configurable profile data, notification preferences, language and appearance choices, destructive confirmation, copy…
Base Sign In Block		A sign-in screen with a verification step and configurable credential validation, provider buttons, copy, callbacks, loading, errors, insets, and theme.

Components

Component	Preview	What it is
Base Accordion		Measured disclosure rows that open smoothly without guessing their content height.
Base Alert		An inline alert with an animated entrance and collapsing dismissal, configurable tone, icon, title, description, action, and theme.
Base Animated Icon		Animated stroke icons that ring, draw, and turn, with configurable icon, size, color, and stroke width.
Base Avatar		An avatar and overlapping group with press feedback and configurable images, initials, size, and theme.
Base Badge		A status badge with a sliding count and configurable content, leading icon, count, and theme.
Base Button		A button with spring-driven press feedback and configurable content, size, variant, and theme.
Base Card		A composable card with optional press feedback and configurable content and theme.
Base Checkbox		A checkbox with an animated check stroke that takes its colors and radius from a configurable theme.

Make it yours

Each preview shows one way to style the component; your app supplies the content and the design. Every piece is delivered as source in your project: start with its documented props to adapt colors, typography, and copy, and edit the source when your design needs more than the API exposes. Available controls differ by piece and are listed in each README.

For example, restyle Copy Confirm Button with backgroundColor, iconColor, successColor, fontFamily, and copiedLabel. For a premium example with your own artwork, fonts, and a full theme, see the props of Meal Scan Nutrition.

Install

Native Animation Base

Base is free forever, MIT licensed, and needs no account. Install the shared theme and a component or screen block with the CLI:

npx nativeanimation init --base
npx nativeanimation add base-sign-in-block
npx nativeanimation add base-settings-block base-list-detail-block

init --base sets up the Base theme in an Expo project. add copies Base source, its Base dependencies, and base-theme into your project. You can also download a component from its page or copy its folder from this repository. The five complete screen blocks are listed in the Base section.

Other catalog pieces

For pieces outside Base, the CLI requires an account and access to each piece. Free pieces use the Native Animation License too:

npx nativeanimation login
npx nativeanimation add shimmer-skeleton

You can also copy a free non-Base folder from this repository without signing in; its Native Animation License still applies. Paid pieces require purchase and account access for delivery. Install the dependencies declared by each piece:

# After copying animations/<id>/ into your project
npx expo install react-native-reanimated react-native-worklets expo-linear-gradient

Dependencies for each piece are listed in its piece.json and README.

Use with your AI coding agent

Connect the MCP. Build the whole app. The Native Animation MCP server can install Base without an account. Connect it, then ask your agent to read the Base guide and build the screens for your app. Base is free forever under MIT; the same MCP connection can search and read the rest of the catalog without an account, while installing other pieces requires sign-in and access.

npx -y nativeanimation@latest mcp

Base MCP tools include setup_base, list_family, list_blocks, add_block, add_piece, and get_piece; the server also provides nativeanimation://base/guide and the build-app-with-base prompt. See the Base agent guide.

The Native Animation plugin bundles one shared skill and the MCP server. For other catalog pieces, your agent can search, compare dependencies, read real props, and install pieces included with your signed-in account.

Claude Code (2.1.275 or later), inside a session:

/plugin install nativeanimation --marketplace NativeAnimation/react-native-animations

You can also register the repository with /plugin marketplace add NativeAnimation/react-native-animations, then install nativeanimation@nativeanimation from the plugin panel.

Codex, in your terminal:

codex plugin marketplace add NativeAnimation/react-native-animations && codex plugin add nativeanimation@nativeanimation

Cursor, from a checkout of this repository:

bash agent-kit/install-cursor.sh

Reload Cursor and confirm the local plugin in Customize; local plugin imports must be enabled. Directory listings require review. Package formats and current limitations include the OpenAI submission draft. For an MCP-only connection, Add to Cursor; that link does not install the skill.

Ask: "Build a habit tracker with onboarding, a list and detail view, settings, and plans using Base." No account is needed for Base through CLI, MCP, manual download, or this repository. To install other catalog pieces through CLI/MCP, run npx nativeanimation login yourself and make sure your account includes each piece. Paid pieces cost $9 each or $299 once for All-access (launch price).

Compatibility

Built for Expo SDK 58, React Native 0.88, Reanimated 4.7 and react-native-worklets 0.13. Every animation runs on the UI thread from a single shared value, so gestures stay interruptible and there is no React state per frame. For an Expo SDK 57 project, use the sdk-57 tag, or let npx nativeanimation add pick the right version for your project.

More animations

The full catalog lives at nativeanimation.com/animations: OTP code input, wheel picker, confetti, swipe to delete, liquid glass tab bar, animated bar chart, loaders, 3D carousels and more. One piece costs $9, or get every current and future animation with a one-time payment.

License

Native Animation Base

Base folders, including base-theme, include the MIT License. Base is free forever, needs no account, and may be used and redistributed under MIT terms.

Other catalog pieces

Every piece outside Base, including free pieces, is covered by the Native Animation License. It allows use in unlimited personal and commercial apps, requires a license per developer working with the source, and does not allow republishing the source as a library or template. All-access includes the current and future catalog under that license; it does not change the MIT license for Base.