React Native Animated Glow v4

A Skia-first avatar FX engine for React Native and Expo. v4 keeps the v3 glowLayers API working, and adds procedural effects for realistic fire, electricity, water, ice, plasma, smoke, sparkle, toxic, and cosmic profile rings.

Why v4

• Avatar-first effects: works with shape="circle" and rounded-square avatars via shape="roundedRect" plus cornerRadius.
• Procedural Skia shaders: Fire, lightning, water ripples, frost, plasma, and particles run inside RuntimeEffect shaders.
• Expo Go safe core: The default engine uses @shopify/react-native-skia and react-native-reanimated; no Rive or custom native renderer is required.
• Feed/grid performance controls: quality="auto", performanceMode, visibleCount, maxFps, paused, and isVisible let busy avatar screens scale down safely.
• Backwards compatible: Existing AnimatedGlow and glowLayers presets are normalized into the new effect model.

Docs, Demos, And Builder

This fork includes a source-controlled static docs app modeled after the original public site structure: Demos, Builder, Tutorials, and Docs.

npm run docs

Then open:

• Demos: http://localhost:4173/
• Builder: http://localhost:4173/builder
• Tutorials: http://localhost:4173/tutorials
• Docs: http://localhost:4173/reference

The web preview is an approximate CSS visualization so it can run anywhere. The React Native library renders the real effects with Skia RuntimeEffect shaders.

Installation

npm install react-native-animated-glow-effects
npx expo install @shopify/react-native-skia react-native-reanimated react-native-worklets

For non-Expo apps, follow the official installation guides for Skia and Reanimated. react-native-gesture-handler is optional in v4; use it if your app already uses gesture-handler pressables.

Avatar Effect Presets

import AnimatedGlow, { effectPresets } from 'react-native-animated-glow-effects';
import { Image, StyleSheet } from 'react-native';

export function Avatar() {
  return (
    <AnimatedGlow preset={effectPresets.realisticFire} style={styles.ring}>
      <Image source={{ uri: 'https://example.com/avatar.jpg' }} style={styles.avatar} />
    </AnimatedGlow>
  );
}

const styles = StyleSheet.create({
  ring: { width: 88, height: 88 },
  avatar: { width: 88, height: 88, borderRadius: 44 },
});

Included effectPresets:

• realisticFire
• blueElectricity
• waterAura
• frostRing
• plasmaStorm
• emberHalo
• cosmicDust
• toxicSlime
• digitalPulse
• rainbowComet

Custom Effects API

<AnimatedGlow
  shape="roundedRect"
  cornerRadius={24}
  quality="auto"
  maxFps={45}
  effects={[
    {
      kind: 'electricity',
      colors: ['#ffffff', '#93c5fd', '#2563eb'],
      intensity: 0.9,
      radius: 28,
      thickness: 5,
      speed: 2,
      turbulence: 1,
      detail: 3,
      seed: 0.42,
      placement: 'behind',
      blendMode: 'plus',
      coverage: 0.7,
    },
  ]}
>
  {children}
</AnimatedGlow>

Rounded Square Avatars

All effect families use the same geometry as the wrapped avatar. For square profile pictures with rounded corners, pass shape="roundedRect" and the same cornerRadius used by your image:

<AnimatedGlow
  preset={effectPresets.blueElectricity}
  shape="roundedRect"
  cornerRadius={18}
  style={{ width: 72, height: 72 }}
>
  <Image
    source={{ uri: avatarUrl }}
    style={{ width: 72, height: 72, borderRadius: 18 }}
  />
</AnimatedGlow>

If you start from a circular v4 preset and provide cornerRadius, the renderer switches to rounded-rectangle geometry so the fire, water, electricity, and particle effects trace the same rounded-square profile shape.

Effect fields:

• kind: glow, fire, electricity, water, ice, plasma, smoke, sparkle, toxic, or cosmic
• colors: gradient colors used by the effect family
• intensity, radius, thickness, speed, turbulence, detail, seed
• placement: behind, inside, or over
• blendMode: screen, plus, normal, or multiply
• coverage and relativeOffset for comet arcs, bolts, and partial rings

Performance Controls

quality="auto" resolves to conservative defaults on Android and dense surfaces. It caps shader detail/effect count, chooses a default maxFps, and keeps legacy glow sizes intact unless low quality is selected.

Low and medium quality tiers also reduce shader fill-rate by rendering the Skia effect canvas at a lower internal scale and capping effect bleed. Glow-only configs use a smaller shader variant, while fire/water/electric/particle effects use the full elemental shader.

Useful props for feed/grid screens:

<AnimatedGlow
  preset={effectPresets.cosmicDust}
  isVisible={isViewable}
  paused={!isFocused}
  quality="auto"
  performanceMode="feed"
  visibleCount={visibleAvatarCount}
  maxFps={30}
  reducedMotionBehavior="static"
>
  {avatar}
</AnimatedGlow>

GlowSurface

For dense feeds, GlowSurface can render multiple visible avatar effects into one Skia canvas when you already know item bounds.

import { GlowSurface, effectPresets } from 'react-native-animated-glow-effects';

<GlowSurface
  quality="auto"
  performanceMode="feed"
  items={[
    {
      id: 'user-1',
      x: 24,
      y: 120,
      width: 64,
      height: 64,
      preset: effectPresets.blueElectricity,
      isVisible: true,
    },
  ]}
/>

Per-avatar AnimatedGlow remains the easiest default. Reach for GlowSurface on high-density screens where a parent layout already tracks avatar positions.

Legacy v3 API

Existing glowLayers presets still work:

<AnimatedGlow
  shape="roundedRect"
  glowLayers={[
    { colors: ['#00BFFF', '#87CEEB'], opacity: 0.5, glowSize: 30 },
  ]}
>
  {children}
</AnimatedGlow>

Internally, each layer becomes a kind: 'glow' effect.

Development

npm install --legacy-peer-deps
npm run typecheck
npm test
npm run build

Performance work should be verified in release builds on real iOS and Android devices. React Native dev mode can make animation performance look much worse than production.

License

MIT