react-native-shimmer-effect

A beautiful shimmer loading effect for React Native with LinearGradient animation, multiple variants, and direction support.

Features

• Smooth LinearGradient shimmer animation
• Pulse variant for simple opacity animation
• 4 direction options (leftToRight, rightToLeft, topToBottom, bottomToTop)
• Built-in presets (dark, light, neutral, twitter)
• Custom colors support
• ShimmerGroup for coordinated loading states
• Fade-in transition when content loads
• TypeScript support

Installation

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

Peer Dependencies

This package requires the following peer dependencies:

npm install expo-linear-gradient react-native-reanimated

Usage

Basic Usage

import { Shimmer } from "react-native-shimmer-effect";

function MyComponent() {
  const [loading, setLoading] = useState(true);

  return (
    <Shimmer
      isLoading={loading}
      style={{ width: 200, height: 100, borderRadius: 12 }}
    >
      <Text>Content appears here when loaded</Text>
    </Shimmer>
  );
}

With ShimmerGroup

Control multiple shimmer components with a single loading state:

import { Shimmer, ShimmerGroup } from "react-native-shimmer-effect";

function ProfileCard() {
  const [loading, setLoading] = useState(true);

  return (
    <ShimmerGroup isLoading={loading} preset="dark" duration={1000}>
      <Shimmer style={styles.avatar}>
        <Image source={{ uri: user.avatar }} style={styles.avatar} />
      </Shimmer>

      <Shimmer style={styles.name}>
        <Text>{user.name}</Text>
      </Shimmer>

      <Shimmer style={styles.bio}>
        <Text>{user.bio}</Text>
      </Shimmer>
    </ShimmerGroup>
  );
}

Presets

// Dark theme (for dark backgrounds)
<Shimmer preset="dark" style={styles.box} />

// Light theme (for light backgrounds)
<Shimmer preset="light" style={styles.box} />

// Neutral (grayscale)
<Shimmer preset="neutral" style={styles.box} />

// Twitter-style (blue tint)
<Shimmer preset="twitter" style={styles.box} />

Custom Colors

<Shimmer
  preset="custom"
  shimmerColors={["transparent", "rgba(255, 0, 0, 0.2)", "transparent"]}
  style={{ backgroundColor: "#1a1a1a", width: 200, height: 40 }}
/>

Pulse Variant

<Shimmer
  variant="pulse"
  duration={1000}
  style={{ width: 100, height: 100 }}
/>

Different Directions

<Shimmer direction="leftToRight" />  // Default
<Shimmer direction="rightToLeft" />
<Shimmer direction="topToBottom" />
<Shimmer direction="bottomToTop" />

API Reference

Shimmer / ShimmerEffect

| Prop | Type | Default | Description | |------|------|---------|-------------| | isLoading | boolean | true | Whether to show shimmer effect | | variant | "shimmer" \| "pulse" | "shimmer" | Animation type | | direction | "leftToRight" \| "rightToLeft" \| "topToBottom" \| "bottomToTop" | "leftToRight" | Animation direction | | preset | "dark" \| "light" \| "neutral" \| "twitter" \| "custom" | "neutral" | Color preset | | shimmerColors | string[] | - | Custom colors (requires preset="custom") | | duration | number | 1500 | Animation duration in ms | | opacity | number | 1 | Container opacity | | style | ViewStyle | - | Container style | | children | ReactNode | - | Content to show when not loading |

ShimmerGroup

| Prop | Type | Default | Description | |------|------|---------|-------------| | isLoading | boolean | true | Loading state for all children | | preset | ShimmerPreset | "neutral" | Default preset for children | | duration | number | 1500 | Default duration for children | | direction | ShimmerDirection | "leftToRight" | Default direction for children | | opacity | number | 1 | Default opacity for children | | children | ReactNode | - | Child components |

Custom Presets

Create your own preset configuration:

import { createPreset } from "react-native-shimmer-effect";

const myPreset = createPreset({
  colors: ["transparent", "rgba(255, 215, 0, 0.3)", "transparent"],
  backgroundColor: "#1a1a1a",
});

License

MIT