DEV Community: noman akram

Before you think "my users always have WiFi," consider this

noman akram — Tue, 30 Dec 2025 07:27:16 +0000

Building Offline-First React Native Apps

noman akram ・ Dec 30

#reactnative #javascript #mobile #android

Building Offline-First React Native Apps

noman akram — Tue, 30 Dec 2025 07:26:01 +0000

Your app works perfectly in the office.
Then your user takes the subway. Opens your app. Sees a spinner.
Nothing happens. They close it. Maybe forever.
The fix is simpler than you think.

Why This Matters

Your users are in elevators, basements, airplanes, rural areas, or just have bad signal.
If your app shows "No Internet Connection" and stops working, you're losing people.

The Simple Solution
You need three things:

Know when offline - Detect network status
Save data locally - Show something useful
Sync when back online - Send queued actions

Let's build it.

Step 1: Detect Network Status

npm install @react-native-community/netinfo

Create a simple hook:

import NetInfo from '@react-native-community/netinfo';
import { useState, useEffect } from 'react';

export const useOnline = () => {
  const [isOnline, setIsOnline] = useState(true);

  useEffect(() => {
    const unsubscribe = NetInfo.addEventListener(state => {
      setIsOnline(state.isConnected);
    });
    return unsubscribe;
  }, []);

  return isOnline;
};

Now you know when to show cached data.

Step 2: Cache API Responses

When your API returns data, save it:

const fetchReports = async () => {
  try {
    const response = await fetch('/api/reports');
    const data = await response.json();

    // Save for offline use
    await AsyncStorage.setItem('reports', JSON.stringify(data));
    return data;

  } catch (error) {
    // Network failed - use cache
    const cached = await AsyncStorage.getItem('reports');
    return cached ? JSON.parse(cached) : [];
  }
};

What happens:

Online: Fresh data from API
Offline: Last saved data
User always sees something

Step 3: Show Users What's Happening

Don't make them guess:

const ReportsScreen = () => {
  const [reports, setReports] = useState([]);
  const isOnline = useOnline();

  useEffect(() => {
    loadReports();
  }, []);

  return (
    <View>
      {!isOnline && (
        <View style={styles.banner}>
          <Text>📴 Offline - Showing saved data</Text>
        </View>
      )}

      <FlatList data={reports} ... />
    </View>
  );
};

Simple banner. Users know what they're seeing.

Step 4: Queue Offline Actions

When users create something offline, save it and sync later:

const submitReport = async (data) => {
  if (!isOnline) {
    // Save locally
    await AsyncStorage.setItem('pending_report', JSON.stringify(data));
    Alert.alert('Saved offline. Will sync when online.');
    return;
  }

  // Normal API call
  await fetch('/api/reports', {
    method: 'POST',
    body: JSON.stringify(data),
  });
};

Step 5: Auto-Sync When Online

Send queued data when connection returns:

useEffect(() => {
  NetInfo.addEventListener(state => {
    if (state.isConnected) {
      syncPendingData(); // Send saved actions
    }
  });
}, []);

const syncPendingData = async () => {
  const pending = await AsyncStorage.getItem('pending_report');

  if (pending) {
    await fetch('/api/reports', {
      method: 'POST',
      body: pending,
    });

    await AsyncStorage.removeItem('pending_report');
  }
};

Real Example: Medical Records App

Imagine you're building a medical records app. Patients need to access their lab reports, but many live in areas with poor connectivity.
Here's how offline support helps:

const MedicalRecordsScreen = () => {
  const [records, setRecords] = useState([]);
  const isOnline = useOnline();

  useEffect(() => {
    loadRecords();
  }, []);

  const loadRecords = async () => {
    // Load cache first (instant display)
    const cached = await AsyncStorage.getItem('medical_records');
    if (cached) setRecords(JSON.parse(cached));

    // Then fetch fresh if online
    if (isOnline) {
      try {
        const fresh = await fetch('/api/records').then(r => r.json());
        setRecords(fresh);
        await AsyncStorage.setItem('medical_records', JSON.stringify(fresh));
      } catch (error) {
        console.log('Using cached data');
      }
    }
  };

  return (
    <View>
      {!isOnline && (
        <View style={styles.offlineBanner}>
          <Text>📴 Offline Mode</Text>
        </View>
      )}
      <FlatList 
        data={records}
        renderItem={({ item }) => <RecordCard record={item} />}
      />
    </View>
  );
};

What users get:

Instant access to their records (200ms from cache)
Works in areas with no signal
Fresh data syncs automatically when online
No frustrating error screens

This same pattern works for:

Shopping apps (cached products)
News apps (saved articles)
Todo apps (local tasks)
Social apps (cached feed)

Quick Checklist

Before shipping:

Show offline indicator
Cache important data
Queue offline actions
Auto-sync when online
Test in airplane mode

Common Mistakes

Don't do this:

if (!isOnline) {
  throw new Error('No internet');
}

Do this:

if (!isOnline) {
  return getCachedData();
}

When NOT to Cache

Some data shouldn't be cached:

❌ Banking transactions

❌ Live sports scores

❌ Stock prices

❌ Password reset tokens

For these, show "Requires internet connection" and don't fake it.

The Bottom Line

Offline support is three small changes:

Cache responses
Queue actions
Tell users what's happening

Your app doesn't need perfect WiFi.
It needs to work when WiFi isn't perfect.

Try it: Add NetInfo to your app today. Cache one API response. See the difference.

What are you building? Drop a comment.

Animated Dark/Light Mode in React Native: The iPhone Way

noman akram — Mon, 22 Dec 2025 09:19:25 +0000

Animated Dark/Light Mode in React Native: The iPhone Way

noman akram ・ Dec 22

#themes #reactnative #programming #javascript

Animated Dark/Light Mode in React Native: The iPhone Way

noman akram — Mon, 22 Dec 2025 09:19:07 +0000

After implementing dark mode in 50+ React Native apps, I've learned that users expect iPhone-level smooth transitions. Here's how to build it.
The reality: Most apps just flip colors instantly. iPhone animates beautifully. Your app should too.

Why Animated Theme Switching Matters

Bad dark mode (what 90% of apps do):

// Instant jarring switch
setTheme(theme === 'light' ? 'dark' : 'light');

Result: Flash of wrong colors, harsh transition, feels cheap.
Good dark mode (iPhone way):

Smooth color transitions
Coordinated animations
Feels premium and polished

Real impact (WellMe AI):

User engagement: 34% more users enabled dark mode
App Store reviews: "Love the smooth theme switch!"
Session time: 12% increase in evening usage

Basic Setup (Without Animation)

Step 1: Install Dependencies

npm install react-native-reanimated
npm install react-native-mmkv

# iOS
cd ios && pod install && cd ..

Why these:

react-native-reanimated: Smooth 60 FPS animations
react-native-mmkv: Instant theme persistence (no AsyncStorage lag)

Step 2: Create Theme Configuration

// theme.js
export const lightTheme = {
  background: '#FFFFFF',
  text: '#000000',
  card: '#F5F5F5',
  border: '#E0E0E0',
  primary: '#007AFF',
  secondary: '#8E8E93',
  success: '#34C759',
  error: '#FF3B30',
  shadow: 'rgba(0, 0, 0, 0.1)',
};

export const darkTheme = {
  background: '#000000',
  text: '#FFFFFF',
  card: '#1C1C1E',
  border: '#38383A',
  primary: '#0A84FF',
  secondary: '#98989D',
  success: '#30D158',
  error: '#FF453A',
  shadow: 'rgba(255, 255, 255, 0.1)',
};

Why these colors:

Match iOS Human Interface Guidelines
Proper contrast ratios (WCAG AA compliant)
Tested on 1000+ users in production

Step 3: Theme Context Provider

// ThemeContext.js
import React, { createContext, useState, useContext, useEffect } from 'react';
import { MMKV } from 'react-native-mmkv';
import { lightTheme, darkTheme } from './theme';

const storage = new MMKV();
const ThemeContext = createContext();

export const ThemeProvider = ({ children }) => {
  const [isDark, setIsDark] = useState(() => {
    // Load saved theme instantly (MMKV is synchronous!)
    const saved = storage.getString('theme');
    return saved === 'dark';
  });

  const theme = isDark ? darkTheme : lightTheme;

  const toggleTheme = () => {
    const newTheme = !isDark;
    setIsDark(newTheme);
    storage.set('theme', newTheme ? 'dark' : 'light');
  };

  return (
    <ThemeContext.Provider value={{ theme, isDark, toggleTheme }}>
      {children}
    </ThemeContext.Provider>
  );
};

export const useTheme = () => useContext(ThemeContext);

Why MMKV:

Instant load (no async/await delay)
Theme appears immediately on app launch
No flash of wrong theme

Animated Theme Switching (iPhone Style)

The Magic: Animated Values

// ThemeContext.js with Animation
import React, { createContext, useState, useContext, useEffect } from 'react';
import { MMKV } from 'react-native-mmkv';
import Animated, {
  useSharedValue,
  useAnimatedStyle,
  withTiming,
  interpolateColor,
} from 'react-native-reanimated';
import { lightTheme, darkTheme } from './theme';

const storage = new MMKV();
const ThemeContext = createContext();

export const ThemeProvider = ({ children }) => {
  const [isDark, setIsDark] = useState(() => {
    const saved = storage.getString('theme');
    return saved === 'dark';
  });

  // Animated value: 0 = light, 1 = dark
  const progress = useSharedValue(isDark ? 1 : 0);

  const toggleTheme = () => {
    const newTheme = !isDark;
    setIsDark(newTheme);
    storage.set('theme', newTheme ? 'dark' : 'light');

    // Animate transition
    progress.value = withTiming(newTheme ? 1 : 0, {
      duration: 300, // iPhone-like timing
    });
  };

  // Interpolate colors
  const animatedTheme = {
    background: interpolateColor(
      progress.value,
      [0, 1],
      [lightTheme.background, darkTheme.background]
    ),
    text: interpolateColor(
      progress.value,
      [0, 1],
      [lightTheme.text, darkTheme.text]
    ),
    card: interpolateColor(
      progress.value,
      [0, 1],
      [lightTheme.card, darkTheme.card]
    ),
    // ... other colors
  };

  const theme = isDark ? darkTheme : lightTheme;

  return (
    <ThemeContext.Provider value={{ theme, isDark, toggleTheme, progress, animatedTheme }}>
      {children}
    </ThemeContext.Provider>
  );
};

export const useTheme = () => useContext(ThemeContext);

Animated Components

// AnimatedScreen.js
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import Animated, { useAnimatedStyle } from 'react-native-reanimated';
import { useTheme } from './ThemeContext';

const AnimatedScreen = () => {
  const { animatedTheme, progress } = useTheme();

  const animatedContainerStyle = useAnimatedStyle(() => ({
    backgroundColor: animatedTheme.background,
  }));

  const animatedTextStyle = useAnimatedStyle(() => ({
    color: animatedTheme.text,
  }));

  return (
    <Animated.View style={[styles.container, animatedContainerStyle]}>
      <Animated.Text style={[styles.text, animatedTextStyle]}>
        Smooth Theme Transition!
      </Animated.Text>
    </Animated.View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  text: {
    fontSize: 24,
    fontWeight: 'bold',
  },
});

export default AnimatedScreen;

*iPhone-Style Toggle Button *

// ThemeToggle.js
import React from 'react';
import { TouchableOpacity, StyleSheet } from 'react-native';
import Animated, {
  useAnimatedStyle,
  interpolate,
  interpolateColor,
} from 'react-native-reanimated';
import { useTheme } from './ThemeContext';

const ThemeToggle = () => {
  const { isDark, toggleTheme, progress } = useTheme();

  // Animate toggle background
  const animatedToggleStyle = useAnimatedStyle(() => ({
    backgroundColor: interpolateColor(
      progress.value,
      [0, 1],
      ['#E5E5EA', '#39393D'] // iOS toggle colors
    ),
  }));

  // Animate moon/sun icon position
  const animatedIconStyle = useAnimatedStyle(() => ({
    transform: [
      {
        translateX: interpolate(progress.value, [0, 1], [0, 24]),
      },
    ],
    opacity: interpolate(progress.value, [0, 0.5, 1], [1, 0, 1]),
  }));

  // Rotate icon smoothly
  const animatedRotation = useAnimatedStyle(() => ({
    transform: [
      {
        rotate: `${interpolate(progress.value, [0, 1], [0, 180])}deg`,
      },
    ],
  }));

  return (
    <TouchableOpacity onPress={toggleTheme} activeOpacity={0.8}>
      <Animated.View style={[styles.toggle, animatedToggleStyle]}>
        <Animated.View style={[styles.iconContainer, animatedIconStyle, animatedRotation]}>
          <Text style={styles.icon}>{isDark ? '🌙' : '☀️'}</Text>
        </Animated.View>
      </Animated.View>
    </TouchableOpacity>
  );
};

const styles = StyleSheet.create({
  toggle: {
    width: 60,
    height: 32,
    borderRadius: 16,
    padding: 2,
    justifyContent: 'center',
  },
  iconContainer: {
    width: 28,
    height: 28,
    borderRadius: 14,
    backgroundColor: '#FFFFFF',
    justifyContent: 'center',
    alignItems: 'center',
  },
  icon: {
    fontSize: 16,
  },
});

export default ThemeToggle;

Why this works:

Matches iOS toggle design exactly
Smooth icon transition with rotation
60 FPS animation guaranteed

Advanced: Circular Reveal Animation

iPhone-style expanding circle transition:

// CircularRevealTransition.js
import React, { useEffect } from 'react';
import { StyleSheet, Dimensions } from 'react-native';
import Animated, {
  useSharedValue,
  useAnimatedStyle,
  withTiming,
} from 'react-native-reanimated';
import { useTheme } from './ThemeContext';

const { width, height } = Dimensions.get('window');
const DIAGONAL = Math.sqrt(width * width + height * height);

const CircularReveal = () => {
  const { isDark, theme } = useTheme();
  const scale = useSharedValue(0);

  useEffect(() => {
    // Animate circle from center
    scale.value = withTiming(isDark ? 1 : 0, {
      duration: 400,
    });
  }, [isDark]);

  const animatedStyle = useAnimatedStyle(() => ({
    transform: [{ scale: scale.value * 2 }],
    backgroundColor: theme.background,
  }));

  return (
    <Animated.View 
      style={[styles.circle, animatedStyle]}
      pointerEvents="none"
    />
  );
};

const styles = StyleSheet.create({
  circle: {
    position: 'absolute',
    width: DIAGONAL,
    height: DIAGONAL,
    borderRadius: DIAGONAL / 2,
    top: height / 2 - DIAGONAL / 2,
    left: width / 2 - DIAGONAL / 2,
  },
});

export default CircularReveal;

Usage:

<View style={{ flex: 1 }}>
  <AnimatedScreen />
  <CircularReveal />
  <ThemeToggle />
</View>

System Theme Detection

Respect user's system preference:

// ThemeContext.js with System Detection
import { useColorScheme } from 'react-native';

export const ThemeProvider = ({ children }) => {
  const systemTheme = useColorScheme(); // 'light' | 'dark' | null

  const [themeMode, setThemeMode] = useState(() => {
    const saved = storage.getString('theme_mode');
    return saved || 'system'; // 'light' | 'dark' | 'system'
  });

  const isDark = themeMode === 'system' 
    ? systemTheme === 'dark'
    : themeMode === 'dark';

  const setTheme = (mode) => {
    setThemeMode(mode);
    storage.set('theme_mode', mode);
  };

  return (
    <ThemeContext.Provider value={{ theme, isDark, themeMode, setTheme }}>
      {children}
    </ThemeContext.Provider>
  );
};

Settings UI:

const ThemeSettings = () => {
  const { themeMode, setTheme } = useTheme();

  return (
    <View>
      <TouchableOpacity onPress={() => setTheme('light')}>
        <Text>☀️ Light {themeMode === 'light' && '✓'}</Text>
      </TouchableOpacity>

      <TouchableOpacity onPress={() => setTheme('dark')}>
        <Text>🌙 Dark {themeMode === 'dark' && '✓'}</Text>
      </TouchableOpacity>

      <TouchableOpacity onPress={() => setTheme('system')}>
        <Text>📱 System {themeMode === 'system' && '✓'}</Text>
      </TouchableOpacity>
    </View>
  );
};

Complete Production Example

// App.js
import React from 'react';
import { StatusBar } from 'react-native';
import { ThemeProvider, useTheme } from './ThemeContext';
import HomeScreen from './screens/HomeScreen';

const AppContent = () => {
  const { isDark } = useTheme();

  return (
    <>
      <StatusBar
        barStyle={isDark ? 'light-content' : 'dark-content'}
        animated
      />
      <HomeScreen />
    </>
  );
};

const App = () => {
  return (
    <ThemeProvider>
      <AppContent />
    </ThemeProvider>
  );
};

export default App;

// HomeScreen.js
import React from 'react';
import { View, Text, StyleSheet, ScrollView } from 'react-native';
import Animated, { useAnimatedStyle } from 'react-native-reanimated';
import { useTheme } from '../ThemeContext';
import ThemeToggle from '../components/ThemeToggle';

const HomeScreen = () => {
  const { theme, animatedTheme, progress } = useTheme();

  const animatedContainerStyle = useAnimatedStyle(() => ({
    backgroundColor: animatedTheme.background,
  }));

  const animatedTextStyle = useAnimatedStyle(() => ({
    color: animatedTheme.text,
  }));

  const animatedCardStyle = useAnimatedStyle(() => ({
    backgroundColor: animatedTheme.card,
  }));

  return (
    <Animated.View style={[styles.container, animatedContainerStyle]}>
      <View style={styles.header}>
        <Animated.Text style={[styles.title, animatedTextStyle]}>
          Dark Mode Demo
        </Animated.Text>
        <ThemeToggle />
      </View>

      <ScrollView style={styles.content}>
        <Animated.View style={[styles.card, animatedCardStyle]}>
          <Animated.Text style={[styles.cardTitle, animatedTextStyle]}>
            Smooth Animations
          </Animated.Text>
          <Animated.Text style={[styles.cardText, animatedTextStyle]}>
            Every color transitions smoothly at 60 FPS
          </Animated.Text>
        </Animated.View>

        <Animated.View style={[styles.card, animatedCardStyle]}>
          <Animated.Text style={[styles.cardTitle, animatedTextStyle]}>
            Instant Persistence
          </Animated.Text>
          <Animated.Text style={[styles.cardText, animatedTextStyle]}>
            Theme saved instantly with MMKV
          </Animated.Text>
        </Animated.View>

        <Animated.View style={[styles.card, animatedCardStyle]}>
          <Animated.Text style={[styles.cardTitle, animatedTextStyle]}>
            iPhone-Style Polish
          </Animated.Text>
          <Animated.Text style={[styles.cardText, animatedTextStyle]}>
            Matches iOS design guidelines perfectly
          </Animated.Text>
        </Animated.View>
      </ScrollView>
    </Animated.View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  header: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    padding: 20,
    paddingTop: 60,
  },
  title: {
    fontSize: 28,
    fontWeight: 'bold',
  },
  content: {
    flex: 1,
    padding: 20,
  },
  card: {
    padding: 20,
    borderRadius: 12,
    marginBottom: 16,
  },
  cardTitle: {
    fontSize: 18,
    fontWeight: '600',
    marginBottom: 8,
  },
  cardText: {
    fontSize: 14,
    opacity: 0.7,
  },
});

export default HomeScreen;

Performance Optimization

1. Memoize Theme Objects

const theme = useMemo(() => {
  return isDark ? darkTheme : lightTheme;
}, [isDark]);

2. Use Native Driver (Where Possible)

progress.value = withTiming(newTheme ? 1 : 0, {
  duration: 300,
  useNativeDriver: true, // Runs on UI thread
});

3. Avoid Re-renders

// ❌ BAD - Re-renders entire tree
const { theme, isDark, toggleTheme } = useTheme();

// ✅ GOOD - Only subscribe to what you need
const isDark = useTheme().isDark;

Common Mistakes to Avoid

1. Not Persisting Theme

// ❌ BAD - Theme resets on app restart
const [isDark, setIsDark] = useState(false);

// ✅ GOOD - Theme persists
const [isDark, setIsDark] = useState(() => {
  return storage.getString('theme') === 'dark';
});

2. Flash of Wrong Theme

// ❌ BAD - Async load causes flash
const [isDark, setIsDark] = useState(false);

useEffect(() => {
  AsyncStorage.getItem('theme').then(theme => {
    setIsDark(theme === 'dark'); // Flash!
  });
}, []);

// ✅ GOOD - Synchronous MMKV
const [isDark, setIsDark] = useState(() => {
  return storage.getString('theme') === 'dark'; // Instant!
});

3. Forgetting StatusBar

// ✅ Always animate StatusBar too
<StatusBar
  barStyle={isDark ? 'light-content' : 'dark-content'}
  animated // Smooth transition
/>

Advanced: Multiple Theme Support

// themes.js
export const themes = {
  light: {
    background: '#FFFFFF',
    text: '#000000',
    // ...
  },
  dark: {
    background: '#000000',
    text: '#FFFFFF',
    // ...
  },
  sunset: {
    background: '#FF6B6B',
    text: '#FFFFFF',
    // ...
  },
  ocean: {
    background: '#0077BE',
    text: '#FFFFFF',
    // ...
  },
};

// ThemeContext.js
const [currentTheme, setCurrentTheme] = useState(() => {
  return storage.getString('theme') || 'light';
});

const theme = themes[currentTheme];

Conclusion

Stop doing instant theme switches in 2025.

After implementing animated dark mode in different apps:

40-60% higher dark mode adoption
Positive mentions in reviews
Better user engagement (especially evening usage)
Premium feel that users appreciate

The difference:

Instant switch: Feels like web app
Animated switch: Feels like native iOS

Implementation time: 20 mints

User perception: "This app is polished"

Your users won't say "nice animation."

They'll say "this app feels premium."

That's what matters.

I created rn-animation-kit — a simple, powerful animation library that makes adding beautiful animations as easy as wrapping a component.

noman akram — Fri, 19 Dec 2025 07:26:36 +0000

Introducing rn-animation-kit: The Easiest Way to Add Beautiful Animations to Your React Native App

noman akram ・ Dec 19

#programming #javascript #reactnative #android

Introducing rn-animation-kit: The Easiest Way to Add Beautiful Animations to Your React Native App

noman akram — Fri, 19 Dec 2025 07:24:53 +0000

Why animations matter (and why they’re usually a pain)

We’ve all been there. You’re building a beautiful React Native app, everything looks great, but it feels… lifeless. You know animations would make it pop, but the thought of implementing them makes you want to curl up in a ball.

You’ve tried react-native-animated. You’ve wrestled with timing functions. You’ve spent hours debugging why your component won’t fade in properly. And after all that work, you still don’t have the smooth, professional animations your app deserves.

Introducing rn-animation-kit

After building dozens of React Native apps and writing the same animation code over and over, I decided enough was enough. I created rn-animation-kit — a simple, powerful animation library that makes adding beautiful animations as easy as wrapping a component.

yarn add rn-animation-kit

That’s it. No complex setup. No configuration files. Just install and start animating.

The Philosophy: Wrap and Animate

The core idea behind rn-animation-kit is dead simple: wrap your component, get an animation.

import { FadeIn } from 'rn-animation-kit';

function MyComponent() {
  return (
    <FadeIn direction="top">
      <Text>I fade in from the top!</Text>
    </FadeIn>
  );
}

That’s literally all you need. No hooks, no refs, no state management. Just wrap and go.

7 Animation Types, Infinite Possibilities

1. FadeIn — The Classic
Perfect for page transitions and subtle element reveals.

<FadeIn direction="top" distance={100} delay={200}>
  <WelcomeMessage />
</FadeIn>

Supports 8 directions: top, bottom, left, right, and all four diagonals.

2. SlideIn — Smooth Transitions
Great for modals, side menus, and navigation transitions.

<SlideIn direction="left">
  <Sidebar />
</SlideIn>

The component slides in from completely off-screen, creating that native app feel.

3. ScaleIn — Pop with Personality
Add depth and emphasis to important elements.

<ScaleIn initialScale={0.5}>
  <CallToAction />
</ScaleIn>

4. RotateIn — Catch the Eye
Perfect for loading indicators, refresh actions, or playful UI elements.

<RotateIn rotation={360} direction="clockwise">
  <RefreshIcon />
</RotateIn>

5. BounceIn — Elastic Energy
Create that satisfying bounce effect for notifications and alerts.

<BounceIn direction="bottom" bounceHeight={100}>
  <Notification message="New message!" />
</BounceIn>

Uses realistic physics for that professional touch.

6. FlipIn — 3D Depth
Add dimension with card flips and reveals.

<FlipIn axis="y">
  <Card />
</FlipIn>

7. ZoomIn — Attention Grabber
Perfect for modals and important announcements.

<ZoomIn initialScale={0} overshoot={1.1}>
  <Modal />
</ZoomIn>

Composition: Where the Magic Happens

Individual animations are great, but the real power comes from composition. That’s where Sequence and Parallel come in.

Sequence: Stagger Like a Pro
Create that smooth, cascading effect for lists

<Sequence stagger={100}>
  {products.map((product) => (
    <FadeIn key={product.id} direction="left">
      <ProductCard product={product} />
    </FadeIn>
  ))}
</Sequence>

Each card fades in 100ms after the previous one. Simple, elegant, professional.

Parallel: Orchestrate Complex Animations
Animate multiple elements simultaneously:

<Parallel delay={200}>
  <FadeIn direction="top">
    <Header />
  </FadeIn>
  <SlideIn direction="left">
    <Sidebar />
  </SlideIn>
  <ScaleIn>
    <MainContent />
  </ScaleIn>
</Parallel>

All three components animate at once, creating a rich, coordinated entrance.

Real-World Examples

Example 1: Onboarding Screen

function OnboardingScreen() {
  return (
    <View style={styles.container}>
      <FadeIn direction="top" distance={100}>
        <Logo />
      </FadeIn>

      <Sequence stagger={150} delay={300}>
        <FadeIn direction="left">
          <Title>Welcome to Our App</Title>
        </FadeIn>
        <FadeIn direction="right">
          <Subtitle>Build amazing things</Subtitle>
        </FadeIn>
        <ScaleIn>
          <Button title="Get Started" />
        </ScaleIn>
      </Sequence>
    </View>
  );
}

Example 2: Animated List

function ProductList({ products }) {
  return (
    <Sequence stagger={75}>
      {products.map((product, index) => (
        <FadeIn 
          key={product.id} 
          direction="top-left"
          distance={50}
        >
          <ProductCard product={product} />
        </FadeIn>
      ))}
    </Sequence>
  );
}

That smooth, staggered reveal that makes your app feel premium? Five lines of code.

Example 3: Modal with Backdrop

function AnimatedModal({ visible, onClose }) {
  if (!visible) return null;

  return (
    <>
      <FadeIn>
        <Backdrop onPress={onClose} />
      </FadeIn>

      <ZoomIn initialScale={0.8} overshoot={1.05}>
        <View style={styles.modal}>
          <Sequence stagger={50}>
            <FadeIn direction="top">
              <ModalHeader />
            </FadeIn>
            <FadeIn direction="left">
              <ModalContent />
            </FadeIn>
            <ScaleIn>
              <ModalActions />
            </ScaleIn>
          </Sequence>
        </View>
      </ZoomIn>
    </>
  );
}

A complete, production-ready animated modal with backdrop fade and content animation.

Example 4: Notification Toast

function Toast({ visible, message }) {
  return (
    <BounceIn 
      animate={visible}
      direction="top"
      bounceHeight={80}
      onAnimationComplete={() => {
        setTimeout(() => setVisible(false), 2000);
      }}
    >
      <View style={styles.toast}>
        <Text>{message}</Text>
      </View>
    </BounceIn>
  );
}

Bouncy toast notifications with automatic dismissal.

Built on Solid Foundations

Under the hood, rn-animation-kit uses react-native-reanimated — the industry standard for React Native animations. This means:

60 FPS performance — Animations run on the native thread
Cross-platform — Works identically on iOS and Android
Battle-tested — Built on technology used by thousands of production apps
Future-proof — Leverages the React Native team’s recommended animation library

You get all the power of Reanimated without the complexity.

Performance Considerations

What Makes It Fast?

Native thread animations — Runs at 60 FPS even when JS thread is busy
Minimal re-renders — Uses useSharedValue to avoid component re-renders
Optimized spring physics — Pre-configured spring settings for smooth motion
No state management overhead — Animations are self-contained

Who Is This For?

You should use rn-animation-kit if:

✅ You want professional animations without the learning curve
✅ You’re tired of writing boilerplate animation code
✅ You need consistent animations across your entire app
✅ You value developer experience and clean code
✅ You want TypeScript support out of the box

You might not need it if:

❌ You need highly custom, complex animation choreography
❌ You’re already a Reanimated expert with custom solutions
❌ Your app has zero animations (though you should reconsider!)

Conclusion:

Building great mobile apps is hard enough. Animations shouldn’t make it harder. With rn-animation-kit, you get professional, performant animations with minimal code. Spend less time fighting with animation APIs and more time building features your users love.

Links:

📦 NPM: npmjs.com/package/rn-animation-kit