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.

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

Reinstall dependencies using the 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

See the documentation page for information about this library and API reference: 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 starts 10% from the left and 20% from the top.
`end`	For example, { `x: 0.1`, `y: 0.2` } means that the gradient ends 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 are 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

Supported Third-Party Libraries and Services.

Last modified on September 30, 2025