Documentation
react-native-animated-glow is a free, open-source library to help you add beautiful, performant glow effects to your apps.
If you find this library useful, please consider starring the repo on GitHub!
Installation Guide
Adding a glow effect to your project is simple. Follow these steps to get set up.
First, add the main package to your project using npm or yarn.
npm install react-native-animated-glow
Install Peer Dependencies
This library relies on two other fantastic libraries: Reanimated and SVG. If you don't have them installed yet, add them now.
npm install react-native-reanimated react-native-svg
For more details on installing these, especially for projects without Expo, refer to their official documentation.
Configure Babel for Reanimated
For Reanimated to work its magic, you must add its Babel plugin to your babel.config.js file.
This is a critical step! The plugin must be listed last in the plugins array.
// In your babel.config.js
module.exports = function(api) {
api.cache(true);
return {
presets: ['babel-preset-expo'],
plugins: [
// IMPORTANT: 'react-native-reanimated/plugin' must be the last plugin.
'react-native-reanimated/plugin',
],
};
};
After updating your config, you need to clear your bundler's cache.
You're all set! Import the AnimatedGlow component and wrap any View to make it shine.
import AnimatedGlow from 'react-native-animated-glow';
import { Text, View } from 'react-native';
function MyGlowingComponent() {
return (
<AnimatedGlow>
<View style={{ padding: 20, backgroundColor: '#333' }}>
<Text style={{ color: 'white' }}>I'm Glowing!</Text>
</View>
</AnimatedGlow>
);
}
Component Props
The AnimatedGlow component is highly customizable. You can control almost every aspect of the effect by passing these props, either individually or as part of a preset object.
General Properties
The border radius of the main component wrapper. This also defines the path shape for the glow orbs.
The width of the visible border around the child component.
The color of the visible border (e.g., '#FFFFFF').
A base speed multiplier for the entire animation. Higher is faster. Default is 0.7.
A small value (e.g., 0.01) that adds variation to the orbs' starting positions, creating a more organic look.
Outer Glow Properties
An array of color strings for the outer glow. The effect will smoothly cycle through them.
The opacity of the entire outer glow layer, from 0 to 1.
The size (diameter) of each individual glow orb in the outer layer.
outerGlowNumberOfOrbs
number
How many orbs to render. More orbs create a smoother, more continuous glow but can impact performance.
How far from the edge the outer glow path is. Negative values push the glow further away from the component.
outerGlowSpeedMultiplier
number
A local speed multiplier just for the outer glow layer.
outerGlowScaleAmplitude
number
How much the orbs "pulse" in size. 0 means no pulsing. A value of 1 means they can double in size.
outerGlowScaleFrequency
number
How fast the orbs pulse.
Inner Glow Properties
These properties work identically to their "outer" counterparts but control the glow effect that appears inside the component's border.
An array of color strings for the inner glow.
The opacity of the inner glow layer.
The size of the inner glow orbs.
innerGlowNumberOfOrbs
number
The number of orbs in the inner glow layer.
How far from the edge the inner glow path is. Positive values push it towards the center.
innerGlowSpeedMultiplier
number
A local speed multiplier just for the inner glow.
innerGlowScaleAmplitude
number
Size pulsing amplitude for inner orbs.
innerGlowScaleFrequency
number
Pulsing speed for inner orbs.