React Native Animated Glow

https://reactnativeglow.com/docs
Admin
React Native Animated Glow is a React Native component that creates customizable animated glow...
Tokens:2,696
Snippets:18
Trust Score:5
Update:5 months ago
Show doc for...
Tokens:
Raw
### Install react-native-animated-glow

Source: https://reactnativeglow.com/docs

Install the main package using npm.

```bash
npm install react-native-animated-glow
```

--------------------------------

### Install Peer Dependencies

Source: https://reactnativeglow.com/docs

Install Skia, Reanimated, and Gesture Handler if they are not already present in your project.

```bash
npm install @shopify/react-native-skia react-native-reanimated react-native-gesture-handler
```

--------------------------------

### Installation

Source: https://reactnativeglow.com/docs

Steps to install the react-native-animated-glow library and its peer dependencies.

```APIDOC
## Installation

### 1. Install the Library

Install the main package from npm.

```bash
npm install react-native-animated-glow
```

### 2. Install Peer Dependencies

This library relies on Skia, Reanimated, and Gesture Handler. If you don't already have them in your project, install them now.

```bash
npm install @shopify/react-native-skia react-native-reanimated react-native-gesture-handler
```

For native projects, it's critical to follow the official installation guides for these libraries to ensure they are linked and configured correctly.

### 3. Configure Dependencies

**1. Reanimated:** For Reanimated to work, you must add its Babel plugin to your `babel.config.js` file. This plugin must be listed last.

```javascript
// 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 editing your config, restart your bundler with the cache cleared: `npx expo start -c`

**2. Gesture Handler:** To enable gesture detection, wrap your app's entry point (e.g., `App.js`) with `GestureHandlerRootView`.

```javascript
// App.js or index.js
import { GestureHandlerRootView } from 'react-native-gesture-handler';

export default function App() {
  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      {/* ...your app content... */}
    </GestureHandlerRootView>
  );
}
```
```

--------------------------------

### Interactive Button with Animated Glow

Source: https://reactnativeglow.com/docs

This example demonstrates how to use the AnimatedGlow component to create an interactive button that reacts to hover and press events with a dynamic glow effect. It manages the glow state using `useState` and tracks hover status with `useRef`.

```typescript
import React, { useState, useRef } from 'react';
import { View, Text, StyleSheet, Pressable } from 'react-native';
import AnimatedGlow, { glowPresets, type GlowEvent } from 'react-native-animated-glow';

export default function MyInteractiveButton() {
  // 1. State for the active glow effect ('default', 'hover', 'press')
  const [glowState, setGlowState] = useState<GlowEvent>('default');
  // 2. Ref to track if the cursor is currently hovering over the element
  const isHovered = useRef(false);

  return (
    <AnimatedGlow preset={glowPresets.defaultRainbow} // 3. Pass the state to the activeState prop to control the glow
      activeState={glowState}
    >
      <Pressable
        onPressIn={() => setGlowState('press')}
        onPressOut={() => setGlowState(isHovered.current ? 'hover' : 'default')}
        onHoverIn={() => {
          isHovered.current = true;
          if (glowState !== 'press') setGlowState('hover');
        }}
        onHoverOut={() => {
          isHovered.current = false;
          if (glowState !== 'press') setGlowState('default');
        }}
      >
        <View style={styles.button}>
          <Text style={styles.buttonText}>Tap or Hover Me</Text>
        </View>
      </Pressable>
    </AnimatedGlow>
  );
}

const styles = StyleSheet.create({
  button: {
    paddingVertical: 15,
    paddingHorizontal: 30,
    backgroundColor: '#222'
  },
  buttonText: {
    color: 'white',
    fontWeight: 'bold'
  }
});
```

--------------------------------

### Configure Gesture Handler Root View

Source: https://reactnativeglow.com/docs

Wrap your app's entry point with GestureHandlerRootView to enable gesture detection.

```javascript
import { GestureHandlerRootView } from 'react-native-gesture-handler';

export default function App() {
  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      {/* ...your app content... */}
    </GestureHandlerRootView>
  );
}
```

--------------------------------

### Handling States (Controlled)

Source: https://reactnativeglow.com/docs

Explanation of how to manage the state of the AnimatedGlow component.

```APIDOC
## Handling States (Controlled)

As of v3.0.1, `AnimatedGlow` is a controlled component. You are responsible for detecting gestures (e.g., with `Pressable`) and telling the component which state to display via the `activeState` prop. This gives you complete control and avoids conflicts with other gesture handlers.

The `states` prop is still used to define the *appearance* of each state, while `activeState` determines which appearance is currently active.
```

--------------------------------

### AnimatedGlow Component Props

Source: https://reactnativeglow.com/docs

Detailed explanation of the props available for the AnimatedGlow component.

```APIDOC
## Component Props

Props can be passed directly to `<AnimatedGlow />` or grouped into a `preset` object. Direct props will always override preset values.

### `activeState`

- **Type:** `'default' | 'hover' | 'press'`
- **Description:** Explicitly sets the current interactive state of the glow. Use this to control the glow effect from an external state manager or gesture handler. This turns `AnimatedGlow` into a controlled component. You are responsible for managing the state and passing it to this prop.

### `children`

- **Type:** `ReactNode`
- **Description:** The component to wrap. **Required**.

### `preset`

- **Type:** `PresetConfig`
- **Description:** A configuration object containing metadata and an array of states. This is the recommended way to configure the component.

### `states`

- **Type:** `GlowState[]`
- **Description:** An array of state objects that define how the glow should change on hover or press events. This will override the `states` array within the `preset` prop. See the "Handling States" section below. This prop defines the appearance for different states, but does not handle the gesture detection itself.

### `glowLayers`

- **Type:** `GlowLayerConfig[]`
- **Description:** An array of layer objects that define one or more glows. Each object configures a separate Skia shader layer.
- **Default:** `[]`

### `cornerRadius`

- **Type:** `number`
- **Description:** The border radius of the main component wrapper. This also defines the path shape for the glow.
- **Default:** `10`

### `outlineWidth`

- **Type:** `number`
- **Description:** The width of the visible border around the child component.
- **Default:** `2`

### `borderColor`

- **Type:** `string | string[]`
- **Description:** The color of the visible border. Pass an array of colors (e.g., `['#FF00FF', '#00FFFF']`) to create an animated gradient border.
- **Default:** `'white'`

### `backgroundColor`

- **Type:** `string`
- **Description:** The background color for the main container. This sits behind your child component.
- **Default:** `'transparent'`

### `animationSpeed`

- **Type:** `number`
- **Description:** A base speed multiplier for all layers. Higher is faster. Can be negative to reverse direction.
- **Default:** `0.7`

### `borderSpeedMultiplier`

- **Type:** `number`
- **Description:** A local speed multiplier specifically for the animated gradient border, independent of the main `animationSpeed`.
- **Default:** `1.0`

### `isVisible`

- **Type:** `boolean`
- **Description:** Set to `false` to pause all animations and hide the glow effect. Useful for optimizing performance when the component is off-screen.
- **Default:** `true`
```

--------------------------------

### Configure Reanimated Babel Plugin

Source: https://reactnativeglow.com/docs

Add the Reanimated Babel plugin to your babel.config.js. Ensure it is the last plugin listed. After editing, restart your bundler with the cache cleared.

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

--------------------------------

### Controlled Component State Management

Source: https://reactnativeglow.com/docs

As of v3.0.1, AnimatedGlow is a controlled component. You must manage gestures externally and pass the active state via the activeState prop.

```javascript
import AnimatedGlow from 'react-native-animated-glow';
import { Pressable } from 'react-native';
import React, { useState } from 'react';

function MyComponent() {
  const [activeState, setActiveState] = useState('default');

  return (
    <Pressable
      onPressIn={() => setActiveState('press')}
      onPressOut={() => setActiveState('hover')}
      onHoverIn={() => setActiveState('hover')}
      onHoverOut={() => setActiveState('default')}
    >
      <AnimatedGlow activeState={activeState}>
        {/* Your content */}
      </AnimatedGlow>
    </Pressable>
  );
}
```
Tokens:
Raw