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.0",
}

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

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

Props

The following props are for LinearGradient.

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

For information on additional libraries, see Supported Third-Party Libraries and Services.

Last modified on September 30, 2025