Forem: Abu Hasnat Nobin

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

Abu Hasnat Nobin — Wed, 22 Apr 2026 13:07:58 +0000

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>

react-native-modern-shimmer : The Simplest Shimmer Skeleton Loader for React Native — Zero Dependencies, Auto Dark Mode.

Abu Hasnat Nobin — Mon, 13 Apr 2026 13:22:18 +0000

Every React Native app needs a loading state. And every developer eventually ends up writing the same boilerplate — a bunch of gray View components with hardcoded sizes, trying to approximate what the real UI will look like.

I got tired of doing that on every project. So I built react-native-modern-shimmer — a lightweight, zero-dependency shimmer skeleton loader that works beautifully out of the box.

What it looks like

Android	iOS

Smooth, professional, and it automatically switches between light and dark mode — no extra props needed.

The problem with existing solutions

Most shimmer libraries for React Native have at least one of these problems:

They require expo-linear-gradient or react-native-linear-gradient — which means native linking, which means it doesn't work in Expo Go
They don't support dark mode at all
They have no TypeScript types
They're abandoned and unmaintained

react-native-modern-shimmer solves all of these.

Installation

# npm
npm install react-native-modern-shimmer

# yarn
yarn add react-native-modern-shimmer

# expo
npx expo install react-native-modern-shimmer

No native modules. No linking. No extra packages. It works in Expo Go right out of the box.

Basic usage

import Shimmer from 'react-native-modern-shimmer';

export default function MyScreen() {
  return (
    <View style={{ padding: 16, gap: 12 }}>
      <Shimmer width={200} height={16} />
      <Shimmer width="80%" height={16} />
      <Shimmer width="60%" height={16} />
    </View>
  );
}

That's it. No theme provider. No context. No configuration. It reads the system color scheme automatically using React Native's useColorScheme hook and updates instantly when the user switches themes.

Real-world examples

Card skeleton

<View style={{ gap: 12 }}>
  <Shimmer width="100%" height={180} borderRadius={16} />
  <Shimmer width="70%" height={16} borderRadius={6} />
  <Shimmer width="50%" height={13} borderRadius={6} />
</View>

Avatar + name

<View style={{ flexDirection: 'row', alignItems: 'center', gap: 12 }}>
  <Shimmer width={48} height={48} borderRadius={24} />
  <View style={{ gap: 8 }}>
    <Shimmer width={140} height={14} borderRadius={4} />
    <Shimmer width={100} height={12} borderRadius={4} />
  </View>
</View>

Product list rows

{Array.from({ length: 5 }).map((_, i) => (
  <View key={i} style={{ flexDirection: 'row', alignItems: 'center', gap: 12, marginBottom: 16 }}>
    <Shimmer width={52} height={52} borderRadius={12} />
    <View style={{ flex: 1, gap: 8 }}>
      <Shimmer width="80%" height={13} borderRadius={6} />
      <Shimmer width="55%" height={13} borderRadius={6} />
    </View>
  </View>
))}

Full skeleton screen (with NativeWind / Uniwind)

import Shimmer from 'react-native-modern-shimmer';

export default function ShimmerScreen() {
  return (
    <SafeAreaView className="flex-1 bg-gray-100 dark:bg-zinc-950">
      <ScrollView className="flex-1" contentContainerClassName="px-5 py-6 gap-5">

        {/* Header */}
        <View className="flex-row items-center justify-between">
          <View className="flex-row items-center gap-3">
            <Shimmer width={46} height={46} borderRadius={23} />
            <View className="gap-2">
              <Shimmer width={80}  height={10} borderRadius={4} />
              <Shimmer width={130} height={15} borderRadius={5} />
            </View>
          </View>
          <Shimmer width={42} height={42} borderRadius={21} />
        </View>

        {/* Hero */}
        <Shimmer width="100%" height={200} borderRadius={20} speed={1200} />

        {/* Category chips */}
        <View className="flex-row gap-2 flex-wrap">
          {[64, 80, 72, 88].map((w, i) => (
            <Shimmer key={i} width={w} height={32} borderRadius={16} speed={900 + i * 60} />
          ))}
        </View>

        {/* List */}
        {[0, 1, 2, 3].map(i => (
          <View key={i} className="flex-row items-center gap-4 p-4 rounded-2xl bg-white dark:bg-zinc-900">
            <Shimmer width={54} height={54} borderRadius={16} speed={1000 + i * 70} />
            <View className="flex-1 gap-2">
              <Shimmer width="65%" height={13} borderRadius={4} />
              <Shimmer width="45%" height={10} borderRadius={3} />
            </View>
            <Shimmer width={40} height={20} borderRadius={5} />
          </View>
        ))}

      </ScrollView>
    </SafeAreaView>
  );
}

All props

Prop	Type	Default	Description
`width`	`number` or `string`	`"100%"`	Accepts px number or `"%"` string
`height`	`number` or `string`	`16`	Accepts px number or `"%"` string
`borderRadius`	`number`	`8`	Corner radius
`isDark`	`boolean`	`undefined`	Force dark or light. Omit to auto-detect
`baseColor`	`string`	theme default	Override the background color
`speed`	`number`	`1000`	Animation cycle in ms. Lower = faster
`style`	`StyleProp<ViewStyle>`	`undefined`	Extra styles on the container

Why no LinearGradient?

The classic "sliding highlight" shimmer effect looks great but requires expo-linear-gradient or react-native-linear-gradient. Both need native linking or an Expo dev build — meaning they break in Expo Go and add setup friction.

This package achieves a professional shimmer using only React Native's built-in Animated API — a smooth opacity pulse that looks clean, feels native, and has zero setup cost. It runs on the native driver, so it's also battery friendly.