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

Source: Dev.to

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 (e.g., 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 2 MB+ 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, so there’s no JavaScript‑thread involvement during playback.

Installation

npm install react-native-animation-kit

Basic usage

import { FadeSlideIn, Stagger, PressScale, Float } from 'react-native-animation-kit';

Staggered list – one wrapper, done

Premium floating illustration

Physical button press

  

    Continue
  

Error shake on login fail

const shakeRef = useRef(null);

// on error:
shakeRef.current?.shake();

  

Float details

Float combines three animated values simultaneously:

1. Vertical Y movement
2. Subtle rotation (tilts slightly as it rises)
3. 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 example

Links

• npm: https://www.npmjs.com/package/react-native-animation-kit
• GitHub: https://github.com/Tafsan-Mahmud/react-native-animation-kit

Feel free to open issues, submit pull requests, or drop a comment if you use the library—always curious what people build with it.