react-native-edge-glow

Siri / Gemini-style animated gradient glow around the screen edges for React Native.

Same component, both platforms. On iOS the glow follows the rounded display corners; on Android it reads the device's real corner radius (API 31+) and falls back to square on older devices.

• UI-thread animation — driven by Reanimated shared values; zero JS-thread work per frame, so the glow stays smooth even when JS is busy.
• Real corner radius on Android 12+ — a tiny built-in native module reads the display's physical corner curvature via the public WindowInsets rounded-corner API, so the glow hugs the actual screen shape (square fallback on older Android).
• Smooth inward fade — the bloom is a real gradient to transparent, built from composited rings (no SVG blur filters, which are unreliable cross-platform).
• Presets & breathing pulse — one-word looks (siri, gemini, aurora, sunset, rainbow) plus an optional Siri-style breathing pulse.
• Accessibility-aware — honors the OS "Reduce Motion" setting by holding the glow still.
• Fully customizable — colors, sweep speed, border width, glow width/opacity/smoothness, corner radius, fade & pulse timings.
• Lightweight — just react-native-svg + react-native-reanimated. No Skia, no heavy native binaries.

Installation

npm install react-native-edge-glow react-native-svg react-native-reanimated
# or
yarn add react-native-edge-glow react-native-svg react-native-reanimated

Peer dependencies: react-native-svg and react-native-reanimated (follow Reanimated's install guide — it needs its Babel plugin, and v4 also requires react-native-worklets).

Then rebuild your app (pod install on iOS is only needed for the peer deps — this package itself has no iOS native code; on Android the corner-radius module is autolinked).

Usage

import {useState} from 'react';
import {Pressable} from 'react-native';
import EdgeGlow from 'react-native-edge-glow';

function Screen() {
  const [holding, setHolding] = useState(false);

  return (
    <Pressable
      style={{flex: 1}}
      onPressIn={() => setHolding(true)}
      onPressOut={() => setHolding(false)}>
      {/* your screen content */}
      <EdgeGlow active={holding} />
    </Pressable>
  );
}

Render it as the last child of a full-screen container — it positions itself with StyleSheet.absoluteFill and ignores touches (pointerEvents="none").

Presets

Pick a built-in look with preset — "rainbow" (default), "siri", "gemini", "aurora", or "sunset". "siri" also breathes by default.

<EdgeGlow active={listening} preset="siri" />

Any explicit prop overrides the preset, so you can keep a preset's colors but tweak the speed:

<EdgeGlow active={listening} preset="gemini" sweepDuration={1200} />

Breathing pulse

<EdgeGlow active={listening} pulse pulseDuration={1400} />

Fully customized

<EdgeGlow
  active={listening}
  colors={['#FF2D55', '#FF9500', '#FFCC00']}
  sweepDuration={1800}
  borderWidth={6}
  glowWidth={24}
  glowOpacity={0.7}
/>

Props

| Prop | Type | Default | Description | | --- | --- | --- | --- | | active | boolean | — (required) | Show/hide the glow. Toggling fades it in and out. | | preset | "rainbow" \| "siri" \| "gemini" \| "aurora" \| "sunset" | "rainbow" | Built-in color/behavior bundle. Any explicit prop overrides the preset. | | colors | string[] | preset's colors | Gradient colors swept around the border. The first color is appended to the end automatically for a seamless loop. | | sweepDuration | number | 2600 | Duration of one full gradient sweep in ms. Lower = faster. | | pulse | boolean | preset's value (else false) | Gently breathe the glow's opacity in and out while active. | | pulseDuration | number | 1600 | Duration of one full breathe cycle in ms. | | pulseMinOpacity | number | 0.35 | Opacity the glow dims to at the bottom of each breath (0–1). | | borderWidth | number | 4 | Width of the crisp line at the very screen edge, in dp. | | glowWidth | number | 3 × borderWidth | How far the soft bloom fades inward from the edge, in dp. | | glowOpacity | number | 0.58 | Peak opacity of the bloom where it meets the edge (0–1). | | glowSmoothness | number | 12 | Number of rings used to build the inward fade. More = smoother, slightly higher render cost. | | cornerRadius | number | auto | Corner radius of the glow in dp. Defaults to the display's real radius on Android 12+ (square below), and 55 on iOS (no public API exists there). | | fadeInDuration | number | 180 | Fade-in duration when activated, ms. | | fadeOutDuration | number | 260 | Fade-out duration when deactivated, ms. | | respectReduceMotion | boolean | true | When the OS "Reduce Motion" setting is on, hold the glow still (no sweep, no pulse) instead of animating. |

How it works

A diagonal linear gradient's start/end points are animated on the UI thread with Reanimated (useAnimatedProps + withRepeat), sweeping the colors around the border without rotation or masking. The bloom is composed of concentric rings at low opacity whose overlap forms a smooth gradient to transparent toward the screen interior.

Note: because the gradient coordinates change every frame, the SVG is re-rasterized natively each frame (CPU). That's perfectly smooth for press-and-hold style effects; if you need the glow running continuously for long periods on low-end devices, consider a GPU-rendered approach (see below).

When to use something else

This library is deliberately small and focused: a screen-edge glow that follows the device's real corner radius, with only react-native-svg + react-native-reanimated as dependencies.

If you need heavier, GPU-accelerated glows — glowing around arbitrary components (buttons, cards), continuous always-on animation, inner glows, or richer effects — reach for react-native-animated-glow, which renders on the GPU via Skia. It's more powerful (and heavier: it pulls in Skia + gesture-handler). Different tools for different jobs.

Changelog

0.2.1

• Packaging: marked the package side-effect-free ("sideEffects": false) so consumers' bundlers can tree-shake it cleanly. No API changes.

0.2.0

• Added preset (rainbow / siri / gemini / aurora / sunset).
• Added a breathing pulse mode (pulse, pulseDuration, pulseMinOpacity).
• Added respectReduceMotion (on by default) to honor the OS "Reduce Motion" setting.

0.1.x

• Initial release: UI-thread animated edge glow, real Android corner-radius detection, smooth inward fade.

License

MIT