React Native Animated Glow

The AnimatedGlow component is stateless by default. To control the animation (e.g., switching between 'default', 'hover', and 'press'), use the activeState prop. This is useful when connecting the glow to external gestures or state management systems. When using Pressable, you can manage the state using useState and useRef to handle both press and hover events (especially for Web/Desktop support).

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
        style={styles.button}
        onPress={() => console.log('Button Pressed!')}
        
        // --- Press Events ---
        onPressIn={() => setGlowState('press')}
        onPressOut={() => {
          setGlowState(isHovered.current ? 'hover' : 'default');
        }}
        
        // --- Hover Events (for Web, macOS, Windows) ---
        onHoverIn={() => {
          isHovered.current = true;
          if (glowState !== 'press') {
            setGlowState('hover');
          }
        }}
        onHoverOut={() => {
          isHovered.current = false;
          if (glowState !== 'press') {
            setGlowState('default');
          }
        }}
      >
        <Text style={styles.buttonText}>Tap or Hover Me</Text>
      </Pressable>
    </AnimatedGlow>
  );
}

const styles = StyleSheet.create({
  button: { 
    paddingVertical: 20, 
    paddingHorizontal: 40,
    backgroundColor: '#222'
  },
  buttonText: {
    color: 'white',
    fontWeight: 'bold',
    textAlign: 'center'
  }
});

The recommended way to use the component is by defining a PresetConfig object. This object allows you to define a metadata block and a states array. Each state (like default, hover, or press) contains its own preset configuration, including glowLayers, cornerRadius, outlineWidth, and borderColor. The library will automatically interpolate between these states using Reanimated.

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import AnimatedGlow, { type PresetConfig } from 'react-native-animated-glow';

// 1. Define your preset
const myCoolPreset: PresetConfig = {
  metadata: { 
    name: 'My Cool Preset', 
    textColor: '#FFFFFF', 
    category: 'Custom',
    tags: ['interactive']
  },
  states: [
    {
      name: 'default', // The base style for the component
      preset: {
        cornerRadius: 50,
        outlineWidth: 2,
        borderColor: '#E0FFFF',
        glowLayers: [
          { colors: ['#00BFFF', '#87CEEB'], opacity: 0.5, glowSize: 30 },
        ]
      }
    },
    // 2. Define interactive states
    {
      name: 'hover', 
      transition: 300, // 300ms transition into this state
      preset: {
        glowLayers: [{ glowSize: 40 }] // On hover, make the glow bigger
      } 
    },
    {
      name: 'press', 
      transition: 100, // A faster transition for press
      preset: {
        glowLayers: [{ glowSize: 45, opacity: 0.6 }] 
      } 
    }
  ]
};

// 3. Use it in your component
export default function MyGlowingComponent() {
  return (
    <AnimatedGlow preset={myCoolPreset}>
      <View style={styles.box}>
        <Text style={styles.text}>I'm Interactive!</Text>
      </View>
    </AnimatedGlow>
  );
}

const styles = StyleSheet.create({
  box: { paddingVertical: 20, paddingHorizontal: 40, backgroundColor: '#222' },
  text: { color: 'white', fontWeight: 'bold' }
});

The SkiaRoot component serves as the entry point for the Skia-based glow implementation. It requires several SharedValue objects from react-native-reanimated to drive the animation and configuration state. This component wraps UnifiedSkiaGlow and maps the provided Reanimated shared values to the underlying glow engine.

Props

import { SkiaRoot } from './src/animated-glow/SkiaRoot';
// Note: Props require SharedValues from react-native-reanimated
<SkiaRoot
  layout={myLayout}
  skiaOpacity={opacitySV}
  animationProgress={progressSV}
  fromConfigSV={fromConfigSV}
  toConfigSV={toConfigSV}
/>

When using react-native-animated-glow on the web, SkiaRoot acts as a wrapper that handles the asynchronous loading of the Skia/CanvasKit WASM engine via LoadSkiaWeb. It uses React.lazy and Suspense to ensure the UnifiedSkiaGlow component is only rendered once the Skia environment is fully initialized.

To use it, you must provide several SharedValue objects from react-native-reanimated to drive the animation and configuration state.

import { SkiaRoot } from 'react-native-animated-glow';
import { useSharedValue } from 'react-native-reanimated';

// Example props setup
const layout = { /* ... */ };
const skiaOpacity = useSharedValue(1);
const animationProgress = useSharedValue(0);
const fromConfigSV = useSharedValue({ /* ... */ });
const toConfigSV = useSharedValue({ /* ... */ });

<SkiaRoot 
  layout={layout} 
  skiaOpacity={skiaOpacity} 
  animationProgress={animationProgress} 
  fromConfigSV={fromConfigSV} 
  toConfigSV={toConfigSV} 
/>

You can monitor the loading progress of Skia on the web using the skiaWebState object. This is useful if you want to show a loading spinner or delay rendering components that depend on Skia until the engine is ready.

skiaWebState.status can be one of:

• 'idle': Loading has not been triggered.
• 'loading': Skia is currently being fetched.
• 'ready': Skia is loaded and ready for use.

You can also subscribe to status changes by adding a callback to skiaWebState.subscribers.

import { skiaWebState, ensureSkiaWebLoaded } from './path-to-your-skia-loader';

// Example: React component that waits for Skia
const MyComponent = () => {
  const [isReady, setIsReady] = useState(skiaWebState.status === 'ready');

  useEffect(() => {
    ensureSkiaWebLoaded();

    if (skiaWebState.status !== 'ready') {
      skiaWebState.subscribers.add(() => setIsReady(true));
    }
  }, []);

  if (!isReady) return <Text>Loading Skia...</Text>;
  return <AnimatedGlowComponent />;
};

The AnimatedGlow component accepts the following primary props: