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

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

// Staggered list — one wrapper, done
<Stagger>
  <CardA />
  <CardB />
  <CardC />
</Stagger>

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

// Physical button press
<PressScale onPress={handleSubmit}>
  <View style={styles.button}>
    <Text>Continue</Text>
  </View>
</PressScale>

// 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>

Links

• npm: react-native-animation-kit
• GitHub: github.com/Tafsan-Mahmud/react-native-animation-kit Would love feedback, issues, and contributions. If you use it, drop a comment — always curious what people build with it.