react-native-quick-gradient

A lightweight, Fabric-native <LinearGradient /> component for React Native 0.76+.
Drop-in replacement for react-native-linear-gradient with full New Architecture support.

Why?

react-native-linear-gradient is unmaintained and crashes on RN CLI ≥ 0.82 with the New Architecture enabled. This package provides the same API using Fabric Native Components, with zero extra dependencies.

Installation

npm install react-native-quick-gradient
# or
yarn add react-native-quick-gradient

iOS

cd ios && pod install

Android

No additional setup needed — autolinking handles everything.

Usage

import LinearGradient from 'react-native-quick-gradient';

<LinearGradient
  colors={['#4c669f', '#3b5998', '#192f6a']}
  style={{ flex: 1, padding: 16 }}
>
  <Text style={{ color: '#fff' }}>Hello Gradient!</Text>
</LinearGradient>

Horizontal Gradient

<LinearGradient
  start={{ x: 0, y: 0 }}
  end={{ x: 1, y: 0 }}
  colors={['#FF6B6B', '#556270']}
  style={{ height: 200 }}
/>

Angled Gradient

<LinearGradient
  useAngle
  angle={135}
  angleCenter={{ x: 0.5, y: 0.5 }}
  colors={['#ee0979', '#ff6a00']}
  style={{ height: 200, borderRadius: 12 }}
/>

Custom Stops

<LinearGradient
  colors={['#f7971e', '#ffd200', '#21d4fd']}
  locations={[0, 0.4, 1]}
  style={{ height: 200 }}
/>

Transparent Gradient

Use same color with varying alpha — don't use 'transparent' which is really rgba(0,0,0,0):

<LinearGradient
  colors={['rgba(255,255,255,0)', 'rgba(255,255,255,1)']}
  style={{ height: 200 }}
/>

Props

| Prop | Type | Default | Description | |---------------|------------------------|---------------------------|-------------| | colors | string[] | Required | Array of color strings (hex, rgb, rgba, named colors). Minimum 2. | | start | { x: number, y: number } | { x: 0.5, y: 0 } | Start point as fraction of view size (top-left = {0,0}). | | end | { x: number, y: number } | { x: 0.5, y: 1 } | End point as fraction of view size (bottom-right = {1,1}). | | locations | number[] | undefined (even spread) | Color stop positions (0–1), must match colors length. | | useAngle | boolean | false | Use angle + angleCenter instead of start/end. | | angle | number | 0 | Gradient angle in degrees (0° = up, 90° = right). | | angleCenter | { x: number, y: number } | { x: 0.5, y: 0.5 }| Center point for angle calculation. | | style | ViewStyle | undefined | Standard React Native view styles. | | children | ReactNode | undefined | Content rendered on top of the gradient. |

All standard View props (testID, onLayout, accessible, etc.) are also supported.

Compatibility

| | Supported | |---|---| | React Native | ≥ 0.76 | | New Architecture (Fabric) | ✅ | | Old Architecture | ✅ (fallback) | | iOS | ≥ 13.4 | | Android | ≥ API 24 |

License

MIT