react-native-foonto

Beautiful, production-grade React Native animations — copy the code, or paste the AI prompt and ship.

Polished, customizable components built on Reanimated 4 & Gesture Handler 2. Every animation runs on the UI thread, ships with TypeScript types, and works on iOS & Android.

🌐 Website & live demos → foonto.com  ·  📚 Docs  ·  📦 npm

Previews

Want to see all of them? Watch every animation on foonto.com →

Why foonto

• 🎬 Real motion, the right way. Gesture- and scroll-driven animations that run on the UI thread — no per-frame work on the JS thread, no jank.
• 📋 Copy-paste or prompt-to-ship. Every component ships a minimal How to use snippet and a numbered AI prompt you can hand to Claude/Cursor to integrate it for you.
• 🎛️ Customizable by default. Sensible defaults, fully typed props — colors, sizes, timings, and custom renderers where it matters.
• 🧩 Tree-shakeable & typed. Import only what you use. First-class TypeScript types throughout. No any.
• 🆓 Open source, MIT. Free forever. Use it in anything.

Installation

npm install react-native-foonto react-native-reanimated react-native-gesture-handler expo-linear-gradient

Using Expo:

npx expo install react-native-foonto react-native-reanimated react-native-gesture-handler expo-linear-gradient

Peer dependencies: react-native-reanimated (v4+), react-native-gesture-handler (v2+), and expo-linear-gradient. Built and tested on Expo SDK 56 · React Native 0.85 · Reanimated 4 · Gesture Handler 2 (new architecture / Fabric).

Wrap your app root once so gestures work everywhere:

import { GestureHandlerRootView } from "react-native-gesture-handler";

export default function App() {
  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      {/* ...your navigator / screens... */}
    </GestureHandlerRootView>
  );
}

Quick start

import { GestureHandlerRootView } from "react-native-gesture-handler";
import { SwipeDeck } from "react-native-foonto";
import { View, Text } from "react-native";

const PROFILES = [
  { id: "1", name: "Ada Lovelace", role: "Mathematician" },
  { id: "2", name: "Linus Torvalds", role: "Engineer" },
  { id: "3", name: "Grace Hopper", role: "Computer Scientist" },
];

export default function Discover() {
  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <SwipeDeck
        data={PROFILES}
        stackSize={3}
        renderCard={(item) => (
          <View style={{ flex: 1, borderRadius: 24, backgroundColor: "#fff", alignItems: "center", justifyContent: "center" }}>
            <Text style={{ fontSize: 24, fontWeight: "700" }}>{item.name}</Text>
            <Text style={{ color: "#666", marginTop: 6 }}>{item.role}</Text>
          </View>
        )}
        onSwipeRight={(item) => console.log("liked", item.name)}
        onSwipeLeft={(item) => console.log("passed", item.name)}
      />
    </GestureHandlerRootView>
  );
}

Full props, How to use snippets, and copy-paste AI prompts for every component live at foonto.com/docs.

Components

| Component | What it does | Docs | | --- | --- | --- | | SwipeDeck | Tinder-style card deck — fling left, right, or up | → | | Shared Transition | Morph an element smoothly between screens | → | | Stack Cards | Wallet-style stack — swipe up or tap to cycle | → | | Blob Tab Bar | Bottom tab bar with a sliding highlight pill | → | | Carousel | Center-focused, snapping carousel | → | | Draggable List | Long-press to reorder rows | → | | Parallax Carousel | Full-width pager with a parallaxing background | → | | Masonry Grid | Balanced multi-column grid with a staggered reveal | → | | Skeleton | Shimmer placeholders for loading states | → | | Animated Checkbox | Fills and pops a checkmark when toggled | → | | Parallax Header | Scroll view with a parallax, pull-to-zoom header | → | | OTP Input | Segmented PIN field where each digit bounces in | → | | Search Bar | Grows from an icon button to a full-width field | → | | Toast | Stacking, auto-dismissing notifications | → |

💡 Watch every animation in motion at foonto.com — with code and AI prompts on each page.

Shared element transitions — extra setup

SharedTransition needs the Reanimated static feature flag, a native stack navigator, and a native build (not Expo Go, not web). In your package.json:

{
  "reanimated": {
    "staticFeatureFlags": {
      "ENABLE_SHARED_ELEMENT_TRANSITIONS": true
    }
  }
}

TypeScript

Written in TypeScript — types ship with the package, no @types needed. Public prop types are exported alongside each component (e.g. SwipeDeckProps, BlobTab, FoontoStyle).

Links

• 🌐 Website & live demos — foonto.com
• 📚 Docs (props · How to use · AI prompts) — foonto.com/docs
• 📦 npm — npmjs.com/package/react-native-foonto
• 💻 GitHub — github.com/joeyjoy007/react-native-foonto

Contributing

Issues and PRs are welcome. The library lives in src/; the showcase app lives in example/. See ARCHITECTURE.md for the project structure and code standards.

License

MIT © foonto