🪄 react-native-shimmer-loader

A lightweight React Native shimmer loader that automatically generates placeholder skeletons from your layout — no manual setup required. Supports RTL, custom colors, custom shimmer components, and fully dynamic structures.

---

📸 Preview

Shimmer.mp4

(This animation shows the shimmer effect in action.)

---

🚀 Installation

npm install react-native-shimmer-loader
# or
yarn add react-native-shimmer-loader

---

💡 Usage

You can find a complete working example here: 👉 Example App

Basic usage example:

import React from 'react';
import { View, Text } from 'react-native';
import ShimmerLoader from 'react-native-shimmer-loader';

const App = () => (
  <ShimmerLoader isLoading={true}>
    <View style={{ padding: 16 }}>
      <Text style={{ fontSize: 18, fontWeight: 'bold' }}>Loaded Content</Text>
    </View>
  </ShimmerLoader>
);

---

🧩 Complex Layouts

react-native-shimmer-loader recursively inspects your view hierarchy, making it trivial to support complex layouts like social cards, lists, or detailed profiles without manually building skeleton screens:

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import ShimmerLoader from 'react-native-shimmer-loader';

const ComplexCard = ({ isLoading }: { isLoading: boolean }) => (
  <ShimmerLoader isLoading={isLoading}>
    <View style={styles.card}>
      <View style={styles.headerRow}>
        <View style={styles.avatar} />
        <View style={styles.headerText}>
          <Text style={styles.title}>{!isLoading ? 'Alex Morgan' : ''}</Text>
          <Text style={styles.subtitle}>{!isLoading ? '2 hours ago' : ''}</Text>
        </View>
      </View>
      <View style={styles.imagePlaceholder} />
    </View>
  </ShimmerLoader>
);

const styles = StyleSheet.create({
  card: { padding: 16, gap: 16, backgroundColor: '#fff', borderRadius: 16 },
  headerRow: { flexDirection: 'row', gap: 12, alignItems: 'center' },
  avatar: {
    width: 48,
    height: 48,
    borderRadius: 24,
    backgroundColor: '#3b82f6',
  },
  headerText: { gap: 4 },
  title: { fontSize: 16, fontWeight: 'bold' },
  subtitle: { fontSize: 12, color: '#64748b' },
  imagePlaceholder: {
    height: 140,
    borderRadius: 12,
    backgroundColor: '#cbd5e1',
  },
});

---

⚙️ Props

Prop	Type	Default	Description
isLoading	boolean	false	Controls whether the shimmer skeleton is shown or the actual children.
children	React.ReactNode	(Required)	Child layout tree to render normally or extract skeleton structure from.
blinkDuration	number	1000	Duration (in ms) of one complete shimmer pulse animation cycle.
isRtl	boolean	I18nManager.isRTL	Enables Right-to-Left (RTL) layout direction for shimmer components.
color	string	'#E0E0E0'	Shimmer background color for skeleton placeholder blocks.
shimmerColor	string	'#E0E0E0'	Alias for color.
backgroundColor	string	'#E0E0E0'	Alias for color.
shimmerComponent	React.ComponentType	undefined	Custom shimmer component to render instead of the default Animated.View.
componentMap	Record<string, React.ComponentType>	undefined	Map custom component names (e.g. { UiView: View, UiText: Text }) to React Native primitives.
customLayout	React.ReactNode	undefined	Optional custom skeleton layout tree to display when isLoading is true.

---

🎨 Custom Shimmer Styling Examples

1. Custom Colors

<ShimmerLoader isLoading={isLoading} color="#D1D5DB" blinkDuration={800}>
  <MyComponent />
</ShimmerLoader>

2. Component Mapping (for Custom UI Libraries)

import { View, Text } from 'react-native';
import ShimmerLoader from 'react-native-shimmer-loader';
import { UiView, UiText } from './my-ui-library';

<ShimmerLoader
  isLoading={isLoading}
  componentMap={{
    UiView: View,
    UiText: Text,
  }}
>
  <UiView>
    <UiText>Custom UI Library Text</UiText>
  </UiView>
</ShimmerLoader>;

3. Custom Skeleton Layout Override

<ShimmerLoader
  isLoading={isLoading}
  customLayout={
    <View style={{ padding: 16 }}>
      <View style={{ width: 100, height: 20, backgroundColor: '#E0E0E0' }} />
    </View>
  }
>
  <ActualContent />
</ShimmerLoader>

---

🧱 Features

✅ Auto-generates shimmer placeholders from your layout

✅ Supports Text, View, Image, and nested custom components

✅ Safe hook isolation — zero re-render loops or crashes with custom components

✅ Custom shimmer layouts & custom component mapping

✅ RTL support (auto-detected or manual)

✅ TypeScript ready with full IntelliSense support

---

🧑‍💻 Example Use Cases

• Placeholder UI while fetching API data
• Skeleton screens for lists, cards, or complex views
• Reusable shimmer templates with custom layouts

---

🧩 License

MIT © Jagnesh Chawla