expo-linear-gradient
provides a native React view that transitions between multiple colors in a linear direction.Android Device | Android Emulator | iOS Device | iOS Simulator | Web |
---|---|---|---|---|
→
expo install expo-linear-gradient
If you're installing this in a bare React Native app, you should also follow these additional installation instructions.
import * as React from 'react'; import { StyleSheet, Text, View } from 'react-native'; import { LinearGradient } from 'expo-linear-gradient'; export default function App() { return ( <View style={styles.container}> <LinearGradient // Background Linear Gradient colors={['rgba(0,0,0,0.8)', 'transparent']} style={styles.background} /> <LinearGradient // Button Linear Gradient colors={['#4c669f', '#3b5998', '#192f6a']} style={styles.button}> <Text style={styles.text}>Sign in with Facebook</Text> </LinearGradient> </View> ); } %%placeholder-start%%const styles = StyleSheet.create({ ... }); %%placeholder-end%%const styles = StyleSheet.create({ container: { flex: 1, alignItems: 'center', justifyContent: 'center', backgroundColor: 'orange', }, background: { position: 'absolute', left: 0, right: 0, top: 0, height: 300, }, button: { padding: 15, alignItems: 'center', borderRadius: 5, }, text: { backgroundColor: 'transparent', fontSize: 15, color: '#fff', }, });
import { LinearGradient } from 'expo-linear-gradient';
Type: Component<LinearGradientProps>
Renders a native view that transitions between multiple colors in a linear direction.
Type: string[]
An array of colors that represent stops in the gradient. At least two colors are required
(for a single-color background, use the style.backgroundColor
prop on a View
component).
Optional • Type: LinearGradientPoint | null
• Default: { x: 0.5, y: 1.0 }
For example, { x: 0.1, y: 0.2 }
means that the gradient will end 10%
from the left and 20%
from the bottom.
On web, this only changes the angle of the gradient because CSS gradients don't support changing the end position.
Optional • Type: number[] | null
• Default: []
An array that contains number
s ranging from 0
to 1
, inclusive, and is the same length as the colors
property.
Each number indicates a color-stop location where each respective color should be located.
If not specified, the colors will be distributed evenly across the gradient.
For example, [0.5, 0.8]
would render:
The color-stop locations must be ascending from least to greatest.
Optional • Type: LinearGradientPoint | null
• Default: { x: 0.5, y: 0.0 }
For example, { x: 0.1, y: 0.2 }
means that the gradient will start 10%
from the left and 20%
from the top.
On web, this only changes the angle of the gradient because CSS gradients don't support changing the starting position.
An object { x: number; y: number }
or array [x, y]
that represents the point
at which the gradient starts or ends, as a fraction of the overall size of the gradient ranging
from 0
to 1
, inclusive.
Name | Type | Description |
---|---|---|
x | number | A number ranging from 0 to 1 , representing the position of gradient transformation. |
y | number | A number ranging from 0 to 1 , representing the position of gradient transformation. |