MotionKit

A powerful React Native animation library built with TypeScript, leveraging react-native-reanimated v3 and react-native-gesture-handler.

Features

• 🎨 Pre-built Animation Components: FadeIn, SlideIn, ScaleIn, and more
• 🪝 Core Hook Primitives: useDrag, useSnap, useFling, useSpring, useFadeIn
• 🔗 Composable Hooks: Chain multiple hooks in a single component
• 🎯 Advanced Gestures: Drag with boundaries, snap-to-points, fling with inertia
• 📱 Demo-Ready Components: SwipeCell, CardDeck, PhysicsBottomSheet
• 📦 TypeScript First: Full type safety and IntelliSense support
• ⚡ Performance: Built on Reanimated 3 for 60fps animations
• 🎭 Flexible: Mix and match hooks for complex interactions

Installation

npm install motionkit react-native-reanimated react-native-gesture-handler
# or
yarn add motionkit react-native-reanimated react-native-gesture-handler

Optional Dependencies

npm install react-native-svg
# or
yarn add react-native-svg

Setup

Follow the setup instructions for:

• react-native-reanimated
• react-native-gesture-handler

Usage

Components

import { FadeIn, SlideIn, ScaleIn } from 'motionkit';

// Fade in animation
<FadeIn duration={500}>
  <Text>Hello World</Text>
</FadeIn>

// Slide in from left
<SlideIn direction="left" distance={100}>
  <View>Content</View>
</SlideIn>

// Scale in animation
<ScaleIn initialScale={0}>
  <Image source={...} />
</ScaleIn>

Prebuilt Components

import { SwipeCell, CardDeck, PhysicsBottomSheet } from 'motionkit';

// Gmail-style swipe cell
<SwipeCell
  leftActions={[{ text: 'Archive', backgroundColor: '#4CAF50', onPress: () => {} }]}
  rightActions={[{ text: 'Delete', backgroundColor: '#F44336', onPress: () => {} }]}
>
  <EmailItem />
</SwipeCell>

// Tinder-style card deck
<CardDeck
  data={cards}
  renderCard={(item) => <Card {...item} />}
  onSwipeLeft={(item) => console.log('Rejected')}
  onSwipeRight={(item) => console.log('Liked')}
/>

// Physics-based bottom sheet
<PhysicsBottomSheet
  snapPoints={[150, 400, 600]}
  enableBackdrop
>
  <SheetContent />
</PhysicsBottomSheet>

Core Hooks

import { useDrag, useSnap, useFling, useSpring, useFadeIn } from 'motionkit';
import { GestureDetector } from 'react-native-gesture-handler';

// Drag with boundaries
const drag = useDrag({
  boundaries: { left: -100, right: 100, top: -100, bottom: 100 },
  axis: 'both',
});

<GestureDetector gesture={drag.gesture}>
  <Animated.View style={drag.animatedStyle} />
</GestureDetector>

// Snap to points
const snap = useSnap({
  points: [-150, 0, 150],
  axis: 'x',
  springConfig: { damping: 15, stiffness: 200 },
});

// Fling with inertia
const fling = useFling({
  velocity: 1.5,
  direction: 'horizontal',
  decay: 0.995,
});

// Spring physics
const spring = useSpring({
  from: 0,
  to: 1,
  damping: 10,
  stiffness: 100,
});

// Fade in animation
const fadeIn = useFadeIn({ duration: 500, delay: 200 });

Composable Hooks

Combine multiple hooks in a single component:

const MyComponent = () => {
  const drag = useDrag({ boundaries: { left: -100, right: 100 } });
  const fadeIn = useFadeIn({ duration: 500 });

  return (
    <GestureDetector gesture={drag.gesture}>
      <Animated.View style={[drag.animatedStyle, fadeIn.animatedStyle]}>
        <Text>Drag me!</Text>
      </Animated.View>
    </GestureDetector>
  );
};

Animation Presets

import { fadeIn, slideIn, scaleIn, rotate } from 'motionkit';

const opacity = useSharedValue(0);
opacity.value = fadeIn({ duration: 300 });

Gesture Utilities

import { createPanGesture, createPinchGesture } from 'motionkit';

const translateX = useSharedValue(0);
const translateY = useSharedValue(0);

const panGesture = createPanGesture({
  translateX,
  translateY,
  onEnd: () => {
    // Reset position
  }
});

API Reference

Components

Basic Animation Components

• FadeIn: Fades in children with configurable duration and delay
• SlideIn: Slides in children from specified direction
• ScaleIn: Scales in children from initial scale to 1
• MotionView: Base animated view component

Prebuilt Interactive Components

• SwipeCell: Gmail-style swipe to reveal actions
• CardDeck: Tinder-style swipeable card stack
• PhysicsBottomSheet: Bottom sheet with drag, snap, and spring physics

📖 Full Components API Documentation

Hooks

Core Primitives

• useDrag: Drag gestures with velocity tracking and boundaries
• useSnap: Snap to nearest point after drag
• useFling: Inertia-based fling gestures with decay
• useSpring: Spring-based physics animations
• useFadeIn: Simple opacity fade-in animation

Legacy Hooks

• useAnimation: Create animated values with timing/spring config
• useGesture: Pan and pinch gesture handlers

📖 Full Hooks API Documentation

Animations

• fadeIn/fadeOut: Opacity animations
• slideIn/slideOut: Translation animations
• scaleIn/scaleOut: Scale animations
• rotate: Rotation animations

Gestures

• createPanGesture: Pan gesture handler
• createPinchGesture: Pinch gesture handler
• createTapGesture: Tap gesture handler

Utilities

• interpolateColor: Color interpolation
• clamp: Clamp values between min/max
• lerp: Linear interpolation

Examples

Check out the examples directory for comprehensive demonstrations of:

• Composable hook patterns
• Drag + Fade combinations
• Snap-to-grid interactions
• Fling with spring animations
• Triple hook compositions

Documentation

• Hooks API Reference - Complete hook documentation
• Components API Reference - Prebuilt components documentation
• Examples - Interactive examples and patterns
• Example App - Expo example app with demos
• TypeScript Types - Type definitions

License

MIT

Contributing

Contributions are welcome! Please read our contributing guidelines before submitting PRs.