Native Gradients
Real native hardware accelerated gradient views on both the platforms
Linear, radial, and sweep — Natively rendered with
built‑in blur and first‑class Reanimated support.
App.tsx
import { LinearGradient } from 'react-native-nitro-gradients';
<LinearGradient
colors={['#0f172a', '#155e75', '#67e8f9']}
angle={135}
blur={14}
style={{ flex: 1, borderRadius: 24 }}
/>Same prop model for colors, positions, blur, and tile mode across all three gradient types
<LinearGradient
colors={['#0f172a', '#155e75', '#67e8f9']}
angle={135}
blur={14}
/><RadialGradient
colors={['#fde68a', '#f472b6', '#312e81']}
center={{ x: '40%', y: '35%' }}
radius="70%"
/><SweepGradient
colors={['#f97316', '#eab308', '#22c55e',
'#06b6d4', '#f97316']}
positions={[0, 0.25, 0.5, 0.75, 1]}
blur={4}
/>Real native hardware accelerated gradient views on both the platforms
Every prop is a SharedValue Colors, angles, blur - all animate on the UI thread
Gaussian blur as a single prop Turn any gradient into an atmospheric glow, halo, or soft backdrop
Vectors accept pixels, percentages, and dimension-relative strings Layouts stay responsive out of the box
Use any prop as a SharedValue. The library handles color processing, coordinate normalization, and native dispatch - you just update the value.
Animation guide →AnimatedCard.tsx
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(20, { duration: 600 });
};
return (
<Pressable onPress={onPress}>
<LinearGradient
colors={['#0f172a', '#155e75', '#67e8f9']}
angle={angle}
blur={blur}
style={{ height: 200, borderRadius: 24 }}
/>
</Pressable>
);
}