I built a zero-dependency React Native animation library — 14 drop-in components, native driver only.

#reactnative #javascript #typescript #opensource

I got tired of adding Reanimated to every project just to fade in a card.

So I built react-native-animation-kit — 14 premium animation components for React Native. Zero dependencies. Every animation runs on the native UI thread. Drop in and go.Works on both Android and iOS out of the box. No platform-specific
code, no conditional imports, no native modules. One install covers everything.

What's inside

Entrance animations — for when elements appear on screen:

FadeSlideIn — fade + directional slide, the workhorse
FadeIn — pure opacity, featherlight
ZoomFadeIn — scale + fade, perfect for modals
BounceIn — spring entrance, great for success states
ScalePop — spring pop from zero, perfect for badges and FABs Loop animations — for continuous attention and feedback:
Float — multi-axis floating (Y + rotation + scale). This one feels genuinely premium
Pulse — breathing scale loop for live indicators
Spin — wrap any icon for an instant spinner
LoopBounce — vertical bounce for scroll cues Interaction — for user-triggered feedback:
PressScale — replaces TouchableOpacity with a physical press feel
Shake — imperative error shake via ref (wrong password? call .shake())
Flip — 3D card flip between two faces Utilities:
Stagger — auto-staggers all children with FadeSlideIn. One wrapper, whole list animated
CountUp — animated number counter for dashboards and stats ## Why no Reanimated?

Reanimated is powerful but it requires native linking, Hermes setup, and adds 2MB+ to your bundle. For the majority of everyday UI animations — entrances, loaders, feedback — the built-in Animated API with useNativeDriver: true is completely sufficient and runs just as smoothly.

Every component in this library uses useNativeDriver: true on every animation. No JS thread involvement during animation playback.

Usage

npm install react-native-animation-kit

Stagger — animate a list with one wrapper

The most satisfying pattern in the library. Wrap any group of components and every child gets a staggered entrance automatically — no manual index calculations needed.

import { Stagger } from 'react-native-animation-kit';

<Stagger>
  <FeatureCard title="Fast" />
  <FeatureCard title="Smooth" />
  <FeatureCard title="Zero deps" />
</Stagger>

// Custom timing — 60ms apart, sliding in from the left
<Stagger stagger={60} direction="left" initialDelay={100}>
  {categories.map(cat => (
    <CategoryChip key={cat.id} label={cat.name} />
  ))}
</Stagger>

Each child fades in and slides up with a 80ms offset by default. The stagger, direction, duration, and initialDelay props give you full control.

FlatList — use FadeSlideIn in renderItem

Stagger works great with ScrollView. For FlatList, use FadeSlideIn directly in renderItem — FlatList virtualizes items so Stagger can't measure them upfront. Cap the delay so items deep in the list don't wait too long.

import { FadeSlideIn } from 'react-native-animation-kit';

const renderItem = ({ item, index }) => (
  <FadeSlideIn
    delay={Math.min(index * 80, 400)}
    duration={380}
  >
    <ProductCard item={item} />
  </FadeSlideIn>
);

<FlatList
  data={products}
  renderItem={renderItem}
  keyExtractor={item => item.id}
/>

Math.min(index * 80, 400) means the first item starts immediately, each subsequent item waits 80ms more, and nothing waits longer than 400ms — even if the list has 100 items.

import { Shake, Float } from 'react-native-animation-kit';


// Premium floating illustration
<Float variant="buoyant">
  <HeroIllustration />
</Float>

// Error shake on login fail
const shakeRef = useRef<ShakeRef>(null);
// on error:
shakeRef.current?.shake();

<Shake ref={shakeRef}>
  <TextInput placeholder="Password" secureTextEntry />
</Shake>

The Float component

This one I'm most proud of. Unlike a simple vertical bounce, Float combines three animated values simultaneously:

Vertical Y movement
Subtle rotation (tilts slightly as it rises)
Gentle scale breathe The result looks like an object actually floating in air, not just moving up and down. You can also stagger multiple Float layers with different delays to get a parallax depth effect on onboarding screens.

// Layered parallax float
<Float delay={0}   height={4}  rotate={0.5}><BackLayer /></Float>
<Float delay={300} height={8}  rotate={1.5}><MidLayer /></Float>
<Float delay={600} height={12} rotate={2}  ><FrontLayer /></Float>