SweepGradient

The SweepGradient component creates gradients that sweep around a center point like a clock hand.

Basic Usage

import { SweepGradient } from 'react-native-nitro-gradients';

function MyComponent() {
  return (
    <SweepGradient
      colors={['#f97316', '#eab308', '#22c55e', '#06b6d4', '#f97316']}
      center={{ x: '50%', y: '50%' }}
      style={{ width: 280, height: 280, borderRadius: 24 }}
    />
  );
}

Props

Prop	Type	Required	Default	Description
colors	ColorValue[]	✅	-	Array of colors for the gradient
center	Vector	❌	{ x: '50%', y: '50%' }	Center point of the gradient
positions	number[]	❌	Uniform around the sweep	Optional array of color positions in the range 0..1
blur	number	❌	0	Gaussian blur radius in pixels applied to the rendered gradient
tileMode	TileMode	❌	"clamp"	Controls gradient edge behavior: "clamp" extends edge colors, "decal" uses transparent

Color positioning

Two colors

<SweepGradient
  colors={['#818cf8', '#fb923c']}
  style={{ width: 240, height: 240, borderRadius: 24 }}
/>

Multiple colors with positions

<SweepGradient
  colors={['#ec4899', '#a855f7', '#3b82f6', '#06b6d4', '#ec4899']}
  positions={[0, 0.25, 0.5, 0.75, 1]}
  style={{ width: 260, height: 260, borderRadius: 24 }}
/>

Center positioning

Centered sweep

<SweepGradient
  colors={['#fbbf24', '#34d399', '#60a5fa']}
  center={{ x: '50%', y: '50%' }}
  style={{ width: 260, height: 260, borderRadius: 24 }}
/>

Off-center sweep

<SweepGradient
  colors={['#f472b6', '#c084fc']}
  center={{ x: '30%', y: '25%' }}
  style={{ width: 300, height: 300, borderRadius: 24 }}
/>

Blur

Blur lets sweep gradients feel less like a hard dial and more like an ambient ring.

<SweepGradient
  colors={['#cb6b3f', '#f0d385', '#7fc1a4', '#74c2de', '#cb6b3f']}
  positions={[0, 0.22, 0.5, 0.78, 1]}
  blur={6}
  style={{ width: 280, height: 280, borderRadius: 999 }}
/>

Demo

Glass Orbit

<SweepGradient
  colors={['#cb6b3f', '#f0d385', '#7fc1a4', '#74c2de', '#cb6b3f']}
  positions={[0, 0.22, 0.5, 0.78, 1]}
  center={{ x: '50%', y: '50%' }}
  blur={6}
  style={{ width: 280, height: 280, borderRadius: 999 }}
/>