react-native-linear-gradient-view

A high-performance, native gradient view for React Native (iOS & Android). Pure UI View with no overlapping elements.

Installation

npm install react-native-linear-gradient-view
# or
yarn add react-native-linear-gradient-view

Usage

1. LinearGradientView

A standard, high-performance linear gradient background.

import { LinearGradientView } from "react-native-linear-gradient-view";

<LinearGradientView 
  colors={['#FF512F', '#F09819']} 
  startPoint={{ x: 0, y: 0 }}
  endPoint={{ x: 1, y: 1 }}
  style={{ width: 200, height: 100, borderRadius: 20 }} 
/>

2. AnimatedLinearGradientView

A linear gradient view that beautifully animates transitions between colors.

import { AnimatedLinearGradientView } from "react-native-linear-gradient-view";

<AnimatedLinearGradientView 
  colors={['#FF512F', '#F09819']} 
  animatedColors={['#1A2980', '#26D0CE']} // Animates to this!
  animationDuration={1000}
  style={{ width: 200, height: 100, borderRadius: 20 }} 
/>

3. MeshGradientView (iOS 13+ / Android 13+)

A beautiful, fluid mesh gradient defined by specific points and colors. Falls back gracefully on unsupported platforms.

import { MeshGradientView } from "react-native-linear-gradient-view";

<MeshGradientView 
  meshPoints={[
    { x: 0, y: 0, color: 0xFFFF0000 },
    { x: 1, y: 0, color: 0xFF00FF00 },
    { x: 0.5, y: 1, color: 0xFF0000FF }
  ]}
  style={{ width: 200, height: 200, borderRadius: 100 }} 
/>

License

MIT