A beautiful shimmer/glitter effect component for React Native. Add a sparkling diagonal shine animation to any component!
npm install react-native-glitter⨠A beautiful shimmer/glitter effect component for React Native. Add a sparkling diagonal shine animation to any component!
Works with both React Native CLI and Expo projects - no native dependencies required!

- đ Zero native dependencies - Pure JavaScript/TypeScript implementation
- đą Cross-platform - Works on iOS, Android, and Web
- đ¨ Customizable - Control color, speed, angle, opacity, and more
- ⥠Performant - Uses native driver for smooth 60fps animations
- đ§ TypeScript - Full TypeScript support with type definitions
- ⨠Animation Modes - Normal, expand, and shrink effects
- âż Accessible - Respects system "Reduce Motion" setting
``bashUsing npm
npm install react-native-glitter
Usage
$3
Wrap any component with
to add a shimmer effect:`tsx
import { Glitter } from 'react-native-glitter';function MyComponent() {
return (
This content will shimmer!
);
}
`$3
Control how the shimmer line behaves during animation:
`tsx
// Normal - constant size (default)
// Expand - starts small and grows
// Shrink - starts full size and shrinks
`$3
For
shrink and expand modes, control where the line shrinks to or expands from:`tsx
// Shrink to top
// Shrink to center (default)
// Shrink to bottom
`$3
Create beautiful skeleton loading states:
`tsx
import { Glitter } from 'react-native-glitter';function SkeletonLoader() {
return (
);
}
`$3
Add a luxurious shimmer to buttons:
`tsx
import { Glitter } from 'react-native-glitter';function PremiumButton() {
return (
⨠Premium Feature
);
}
`$3
Control when the animation runs:
`tsx
import { Glitter } from 'react-native-glitter';function ControlledGlitter() {
const [isLoading, setIsLoading] = useState(true);
return (
Loading...
);
}
`Props
| Prop | Type | Default | Description |
|------|------|---------|-------------|
|
children | ReactNode | required | The content to apply the shimmer effect to |
| duration | number | 1500 | Duration of one shimmer animation cycle in milliseconds |
| delay | number | 400 | Delay between animation cycles in milliseconds |
| initialDelay | number | 0 | Initial delay before the first animation starts (useful for staggering) |
| color | string | 'rgba(255, 255, 255, 0.8)' | Color of the shimmer effect |
| angle | number | 20 | Angle of the shimmer in degrees |
| shimmerWidth | number | 60 | Width of the shimmer band in pixels |
| opacity | number | 1 | Overall opacity of the shimmer effect (0-1) |
| active | boolean | true | Whether the animation is active |
| style | ViewStyle | - | Additional styles for the container |
| easing | (value: number) => number | - | Custom easing function for the animation |
| mode | 'normal' \| 'expand' \| 'shrink' | 'normal' | Animation mode for the shimmer line |
| position | 'top' \| 'center' \| 'bottom' | 'center' | Position where the line shrinks/expands (for shrink/expand modes) |
| direction | 'left-to-right' \| 'right-to-left' | 'left-to-right' | Direction of the shimmer animation |
| iterations | number | -1 | Number of animation cycles (-1 for infinite) |
| onAnimationStart | () => void | - | Callback when animation starts |
| onAnimationComplete | () => void | - | Callback when all iterations complete |
| onIterationComplete | (iteration: number) => void | - | Callback when each iteration completes |
| testID | string | - | Test ID for e2e testing |
| accessibilityLabel | string | - | Accessibility label for screen readers |
| accessible | boolean | true | Whether the component is accessible |
| respectReduceMotion | boolean | true | Whether to respect the system's "Reduce Motion" setting |
| pauseOnBackground | boolean | true | Whether to pause animation when app goes to background |Examples
$3
`tsx
// Fast shimmer
// Slow shimmer
`$3
`tsx
// Gold shimmer
// Blue shimmer
`$3
`tsx
// Horizontal shimmer
// Diagonal shimmer
`$3
`tsx
// Expand mode - line grows as it moves
// Shrink mode with position - line shrinks to bottom
`$3
`tsx
// Left to right (default)
// Right to left
`$3
`tsx
// Run 3 times then call onAnimationComplete
iterations={3}
onAnimationStart={() => console.log('Started!')}
onAnimationComplete={() => console.log('Done!')}
>
// Run once (useful for loading states)
onAnimationComplete={() => setLoading(false)}
>
`
You can control the animation programmatically using a ref:
`tsx
import { useRef } from 'react';
import { Glitter, type GlitterRef } from 'react-native-glitter';
function MyComponent() {
const glitterRef = useRef
const handleStart = () => glitterRef.current?.start();
const handleStop = () => glitterRef.current?.stop();
const handleRestart = () => glitterRef.current?.restart();
const checkStatus = () => console.log(glitterRef.current?.isAnimating());
return (
<>
>
);
}
`
| Method | Return | Description |
|--------|--------|-------------|
| start() | void | Start the shimmer animation |stop()
| | void | Stop the shimmer animation |restart()
| | void | Restart the animation from the beginning |isAnimating()
| | boolean | Check if animation is currently running |
This library is written in TypeScript and includes type definitions:
`tsx
import {
Glitter,
type GlitterProps,
type GlitterRef,
type GlitterMode,
type GlitterPosition,
type GlitterDirection,
} from 'react-native-glitter';
const customProps: GlitterProps = {
children:
duration: 2000,
color: 'rgba(255, 255, 255, 0.3)',
mode: 'shrink',
position: 'center',
};
``
See the contributing guide to learn how to contribute to the repository and the development workflow.
MIT
---
Made with â¤ď¸ by liveforownhappiness