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!

!npm
!license

Demo

Features

- 🚀 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

Installation

``bash


Using npm

npm install react-native-glitter

Using yarn

yarn add 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)
iterations={1}
onAnimationComplete={() => setLoading(false)}
>


`

Ref API

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(null);

const handleStart = () => glitterRef.current?.start();
const handleStop = () => glitterRef.current?.stop();
const handleRestart = () => glitterRef.current?.restart();
const checkStatus = () => console.log(glitterRef.current?.isAnimating());

return (
<>







);
}
`

$3

| 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 |

TypeScript

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',
};
``

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

---

Made with ❤️ by liveforownhappiness