expo-linear-gradient - Amazon Vega Docs

Amazon Developer

Console

as

Settings

Sign out

Notifications

Alexa

Amazon Appstore

Ring

AWS

Documentation

Support

Contact Us

My Cases

Console

as

Vega Developer Docs

Get Started

Design and Develop

Publish

Reference

Support

@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.json file. Select the tab for your React Native version.

React Native 0.72
React Native 0.83

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

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

Reinstall dependencies using npm install command.

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 modified on August 3, 2026