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

Installation

Add the JavaScript library dependency in the package.json file.

Copied to clipboard.

 dependencies: {
     ...
     "@amazon-devices/expo-linear-gradient": "~2.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

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