v3.1.0

Fixes

• Fixed Samsung/Adreno freezes by keeping SkSL color math on half4 precision.
• Fixed Android Expo dev OOMs by avoiding native lazy loading for the Skia renderer.
• Fixed Web loading so Metro no longer emits the _ref runtime error.

Compatibility and DX

• Added react-native and default package export conditions for newer Metro/Expo compatibility.
• Added wrapperStyle for styling the inner content wrapper.

Verification

• npm run verify
• npm pack --dry-run
• Expo example verified on Web and iOS Expo Go.

v3.0.1

This release introduces a significant refinement to the component's state management, transitioning to a fully controlled pattern. This gives developers more direct and predictable control over the interactive states of the glow effect.

Key Changes

• ** New activeState Prop:** The component is now stateless and managed via the new activeState prop. You can pass 'default', 'hover', or 'press' to this prop to command the component to render the corresponding glow configuration from your preset. This change enhances predictability and allows for seamless integration with any gesture-handling or state-management library.

• ** Removal of Internal State Management:** AnimatedGlow no longer handles gestures or manages its own state internally. This simplification of the component's logic prevents potential conflicts with parent gesture handlers and gives you complete control over its behavior.

Controlled Component Usage Example

Here is the recommended approach for managing the component's state using Pressable and useState. This pattern gives you precise control over both press and hover interactions.

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={() => {
          // When the press is released, transition to 'hover' if the cursor
          // is still over the button, otherwise return to 'default'.
          setGlowState(isHovered.current ? 'hover' : 'default');
        }}
        
        // --- Hover Events (for Web, macOS, Windows) ---
        onHoverIn={() => {
          isHovered.current = true;
          // Only transition to hover state if not being actively pressed.
          if (glowState !== 'press') {
            setGlowState('hover');
          }
        }}
        onHoverOut={() => {
          isHovered.current = false;
          // Only transition to default state if not being actively pressed.
          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'
  }
});