react-native-shimmer-text

react-native-shimmer-text

💡 Building a full mobile app?

Check out Ship Mobile Fast - The #1 React Native Expo boilerplate to build and ship mobile apps in days, not weeks.

Authentication • Payments • AI Integration • And More!

Cross-platform shimmer text component for React Native (iOS, Android, Web) with customizable animations and theme support.

✨ Features

• Cross-platform support (iOS, Android, Web)
• Customizable duration, direction, colors
• Theme-aware (light/dark mode)
• Predefined sizes (xs to 9xl)
• Smooth animations with react-native-reanimated

📦 Installation

npm install react-native-shimmer-text
expo install react-native-reanimated @react-native-masked-view/masked-view

🚀 Usage

import ShimmerText from "react-native-shimmer-text";

export default function Example() {
  return (
    <ShimmerText size="lg" duration={3} direction="ltr">
      Thinking...
    </ShimmerText>
  );
}

⚙️ Props

Prop	Type	Default	Description
children	string	undefined	Text content
style	TextStyle	undefined	Text styles
shimmerStyle	ViewStyle or WebShimmerStyle	undefined	Shimmer effect styles
containerStyle	ViewStyle	undefined	Container styles
duration	number	3	Animation duration (seconds)
bold	boolean	true	Bold text
highlightWidth	number	undefined	Shimmer width percentage (0-100)
direction	'ltr' or 'rtl'	'ltr'	Animation direction
angle	number	100	Gradient angle (degrees)
size	TextSize	'md'	Text size ('xs' to '9xl')
colors	{ light?: ShimmerColors, dark?: ShimmerColors }	undefined	Theme colors
width	number	undefined	Custom width
height	number	undefined	Custom height

TextSize

'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '7xl' | '9xl'

ShimmerColors

interface ShimmerColors {
  text: string;
  shimmer: {
    start: string;
    middle: string;
    end: string;
  };
}

🎨 Custom Colors

const customColors = {
  light: {
    text: "#333333",
    shimmer: { start: "#e0e0e0", middle: "#f5f5f5", end: "#e0e0e0" },
  },
  dark: {
    text: "#cccccc",
    shimmer: { start: "#424242", middle: "#616161", end: "#424242" },
  },
};

<ShimmerText size="2xl" colors={customColors}>
  Custom Colors
</ShimmerText>;

License

MIT