expo-linear-gradient
Open Beta Documentation Amazon offers this technical
documentation as part of a pre-release, open beta. The features described might change as Amazon receives feedback
and iterates on the features. For the most current feature information, see the latest Release
Notes.
@amazon-devices/expo-linear-gradient provides a native React view that transitions between multiple colors in a linear direction.
Installation
-
Add the JavaScript library dependency in the
package.jsonfile. Select the tab for your React Native version.
dependencies: { ... "@amazon-devices/expo-linear-gradient": "~2.0.0", }
dependencies: { ... "@amazon-devices/expo-linear-gradient": "~3.0.0", } -
Reinstall dependencies using
npm installcommand.
Examples
import React from 'react';
import {LinearGradient} from '@amazon-devices/expo-linear-gradient';
export const App = () => {
return (
<LinearGradient
colors={['white', 'red']}
start={[0.5, 0.5]}
end={[1, 1]}
style={{
width: 100,
maxHeight: 200,
minHeight: 200,
borderWidth: 1,
marginVertical: 20,
borderColor: 'black',
}}
/>
);
};
API reference
Check out the dedicated documentation page for info about this library, API reference and more: Official Expo documentation for expo-linear-gradient.
Components
| Component | Description |
|---|---|
LinearGradient |
Renders a native view that transitions between multiple colors in a linear direction |
LinearGradient props
| Prop | Description |
|---|---|
colors |
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) |
start |
For example, { x: 0.1, y: 0.2 } means that the gradient will start 10% from the left and 20% from the top |
end |
For example, { x: 0.1, y: 0.2 } means that the gradient will end 10% from the left and 20% from the bottom |
locations |
An array that contains numbers 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 |
Supported versions
| NPM package version | Vega SDK version | Vega OS version | React Native version |
|---|---|---|---|
| 2.0.1758683737 | 0.23 and earlier | OS 1.1 (1401010009820) and earlier |
0.72 |
| 3.0.0 | 0.24 | OS 1.2 (2101020054720) |
0.72, 0.83 |
Additional resources
For information on additional libraries, see Supported Third-Party Libraries and Services.
Last updated: Aug 03, 2026
