Get Started

React Native Nitro Gradients provides three gradient components for React Native with first-class Reanimated support and native rendering through Nitro Modules.

Linear

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

<LinearGradient
  colors={['#0f172a', '#155e75', '#67e8f9']}
  angle={135}
  style={{ width: 260, height: 180, borderRadius: 24 }}
/>

Radial

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

<RadialGradient
  colors={['#fde68a', '#f472b6', '#312e81']}
  center={{ x: '50%', y: '45%' }}
  radius="75%"
  style={{ width: 260, height: 260, borderRadius: 24 }}
/>

Sweep

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

<SweepGradient
  colors={['#f97316', '#eab308', '#22c55e', '#06b6d4', '#f97316']}
  positions={[0, 0.25, 0.5, 0.75, 1]}
  blur={4}
  style={{ width: 260, height: 260, borderRadius: 24 }}
/>

Concise API

Prop	LinearGradient	RadialGradient	SweepGradient
colors	ColorValue[]	ColorValue[]	ColorValue[]
positions	number[]	number[]	number[]
start	Vector	-	-
end	Vector	-	-
angle	number	-	-
center	-	Vector	Vector
radius	-	RadiusValue	-
blur	number	number	number

Blur

All three gradient types support a blur prop that applies a Gaussian blur to the rendered gradient.

<LinearGradient
  colors={['#7c3aed', '#c084fc', '#e9d5ff']}
  angle={160}
  blur={12}
  style={{ width: 280, height: 180, borderRadius: 24 }}
/>

Reanimated support

All components accept Reanimated shared values out of the box — colors, angles, blur, and coordinates all animate on the UI thread.

import { LinearGradient } from 'react-native-nitro-gradients';
import { useSharedValue, withTiming } from 'react-native-reanimated';

function AnimatedCard() {
  const angle = useSharedValue(135);
  const blur = useSharedValue(0);

  const onPress = () => {
    angle.value = withTiming(270, { duration: 800 });
    blur.value = withTiming(16, { duration: 600 });
  };

  return (
    <Pressable onPress={onPress}>
      <LinearGradient
        colors={['#0f172a', '#155e75', '#67e8f9']}
        angle={angle}
        blur={blur}
        style={{ width: 280, height: 200, borderRadius: 24 }}
      />
    </Pressable>
  );
}

Next steps

• Read the component docs for Linear, Radial, and Sweep — each includes inline visual previews.
• Review the Reanimated guide and Type definitions.