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
Examples
API reference
- Components
  - LinearGradient props
Supported versions
Additional resources

Installation

Add the JavaScript library dependency in the package.json file. Select the tab for your React Native version.

React Native 0.72
React Native 0.83

Copied to clipboard.

 dependencies: {
     ...
     "@amazon-devices/expo-linear-gradient": "~2.0.0",
 }

Copied to clipboard.

 dependencies: {
     ...
     "@amazon-devices/expo-linear-gradient": "~3.0.0",
 }

Reinstall dependencies using npm install command.

Examples

Copied to clipboard.

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