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 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.dependencies: { ... "@amazon-devices/expo-linear-gradient": "~2.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
| Package Version | Based On | @amazon-devices/react-native-kepler version |
|---|---|---|
| 2.0.x | 12.6.0 | 2.0.x |
Additional resources
For information on additional libraries, see Supported Third-Party Libraries and Services.
Last updated: Sep 30, 2025
