Overview
Getting Started
Install the library, set up its peers, and you're ready to animate.
Installation
Install the library alongside its peer dependencies.
Expo (recommended)
npx expo install react-native-foonto react-native-reanimated react-native-gesture-handler expo-linear-gradientBare React Native
npm install react-native-foonto react-native-reanimated react-native-gesture-handler expo-linear-gradientPeer dependencies
foonto is a thin layer — it relies on these well-known libraries you likely already use.
react-native-reanimated(v4+) — drives every animation on the UI thread.react-native-gesture-handler(v2+) — powers the swipe gestures.expo-linear-gradient— the shimmer gradient for skeletons.
On Expo SDK 56, babel-preset-expo auto-configures the Reanimated worklets plugin — you do not need a custom babel.config.js.
Wrap your app
Gesture Handler needs a single root wrapper. Add it once at the top of your tree.
// App root — wrap your tree once.
import { GestureHandlerRootView } from "react-native-gesture-handler";
export default function App() {
return (
<GestureHandlerRootView style={{ flex: 1 }}>
{/* ...your navigator / screens... */}
</GestureHandlerRootView>
);
}Components
Each component page has a copy-paste “How to use” snippet and a ready-to-paste AI prompt.
SwipeDeck
Tinder-style card deck with fling-to-swipe gestures.
Shared Transition
Shared element transitions between screens.
Stack Cards
Wallet-style swipe-to-cycle stack.
Blob Tab Bar
Bottom nav with a sliding pill.
Carousel
Center-focused snapping cards.
Draggable List
Long-press to reorder rows.
Parallax Carousel
Full-width pages with drifting art.
Masonry Grid
Staggered multi-column reveal.
Skeleton
Shimmer placeholders for loading states.
Animated Checkbox
Fill-and-pop checkmark on toggle.
Parallax Header
Parallax, pull-to-zoom scroll header.
OTP Input
Segmented code field with bounce.
Search Bar
Expands from an icon to full width.
Toast
Stacking, auto-dismissing notifications.