React Native Gradient Background Skia

A high-performance linear gradient component for React Native using Skia.

Why?

This package was created to address the limitations and maintenance issues with react-native-linear-gradient. While react-native-linear-gradient has been widely used, it has several drawbacks:

• Not actively maintained for the latest React Native versions
• Performance issues with complex gradients
• Limited support for modern React Native features
• Inconsistent behavior across different platforms

react-native-gradient-background-skia solves these problems by:

• Using Skia, a high-performance 2D graphics library
• Providing better performance for complex gradients
• Ensuring consistent behavior across platforms
• Being actively maintained for the latest React Native versions

Features

• 🚀 High performance using Skia
• 🎨 Smooth gradient transitions
• 📱 Full screen background support
• 🔄 Multiple gradient directions (horizontal, vertical, diagonal)
• ⚡️ Customizable border radius
• 🎯 Support for multiple color stops
• 🌈 Beautiful color combinations

Installation

1npm install react-native-gradient-background-skia
2# or
3yarn add react-native-gradient-background-skia

Usage

1import GradientBackgroundSkia from 'react-native-gradient-background-skia';
2
3// Basic usage
4<GradientBackgroundSkia
5  colors={['#FF6B6B', '#4ECDC4']}
6  style={styles.gradient}
7>
8  <View style={styles.content}>
9    <Text>Your content here</Text>
10  </View>
11</GradientBackgroundSkia>
12
13// Vertical gradient
14<GradientBackgroundSkia
15  colors={['#A8E6CF', '#FFD3B6']}
16  start={{ x: 0, y: 0 }}
17  end={{ x: 0, y: 1 }}
18  style={styles.gradient}
19>
20  <View style={styles.content}>
21    <Text>Vertical gradient</Text>
22  </View>
23</GradientBackgroundSkia>
24
25// Diagonal gradient with custom border radius
26<GradientBackgroundSkia
27  colors={['#FF9A9E', '#FAD0C4']}
28  start={{ x: 0, y: 0 }}
29  end={{ x: 1, y: 1 }}
30  borderRadius={20}
31  style={styles.gradient}
32>
33  <View style={styles.content}>
34    <Text>Diagonal gradient with rounded corners</Text>
35  </View>
36</GradientBackgroundSkia>
37
38// Three color gradient
39<GradientBackgroundSkia
40  colors={['#FF6B6B', '#4ECDC4', '#45B7D1']}
41  style={styles.gradient}
42>
43  <View style={styles.content}>
44    <Text>Three color gradient</Text>
45  </View>
46</GradientBackgroundSkia>

Props

Prop	Type	Default	Description
colors	string[]	-	Array of colors for the gradient
start	{ x: number, y: number }	{ x: 0, y: 0 }	Starting point of the gradient
end	{ x: number, y: number }	{ x: 1, y: 0 }	Ending point of the gradient
borderRadius	number	0	Border radius for all corners
borderTopLeftRadius	number	0	Border radius for top left corner
borderTopRightRadius	number	0	Border radius for top right corner
borderBottomLeftRadius	number	0	Border radius for bottom left corner
borderBottomRightRadius	number	0	Border radius for bottom right corner
style	ViewStyle	-	Additional styles for the container

Example

Check out the example project in the example directory for a complete implementation showcasing various gradient styles and configurations.

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

MIT