Cross‑platform Shimmer Text component for React Native (iOS/Android) and Web.
npm install react-native-shimmer-text!Demo
💡 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.
- 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
``bash`
npm install react-native-shimmer-text
expo install react-native-reanimated @react-native-masked-view/masked-view
`tsx
import ShimmerText from "react-native-shimmer-text";
export default function Example() {
return (
Thinking...
);
}
`
| 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 |
'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '7xl' | '9xl'
`ts`
interface ShimmerColors {
text: string;
shimmer: {
start: string;
middle: string;
end: string;
};
}
`tsx
const customColors = {
light: {
text: "#333333",
shimmer: { start: "#e0e0e0", middle: "#f5f5f5", end: "#e0e0e0" },
},
dark: {
text: "#cccccc",
shimmer: { start: "#424242", middle: "#616161", end: "#424242" },
},
};
Custom Colors
``
MIT