react-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.

The @amazon-devices/react-linear-gradient library provides support on Vega for react-native-linear-gradient with a <LinearGradient> component for React Native apps.

This library is a system-deployed and available to React Native for Vega apps without a separate installation process. The library is deployed as an autolinking library, which your app links to at runtime. The library is guaranteed to be compatible only with the version of React Native for Vega for which it's built.

When you uplevel your app's version of React Native for Vega, consider the best practice of upleveling its library dependencies.

For more information about this library and its API, see the README.md in the GitHub repo.

Installation

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

Copied to clipboard.

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

Reinstall the package-lock.json file using the npm install command.

Examples

The following example shows how to use the <LinearGradient> component to style text:

Copied to clipboard.

import * as React from 'react';
import { Component } from 'react';
import {
    StyleSheet,
    Text,
    View
} from 'react-native';
import LinearGradient from '@amazon-devices/react-linear-gradient'

const styles = StyleSheet.create({
    linearGradient: {
        justifyContent:"center",
        width:500,
        height:100,
        borderRadius:5
    },
    buttonText: {
        fontSize: 18,
        fontFamily: 'Gill Sans',
        textAlign: 'center',
        margin: 10,
        color: '#ffffff',
        backgroundColor: 'transparent',
    }
});

export class LinearGradientScreen extends Component {
    render() {
        return (
            <View style={{flex:1, backgroundColor: "transparent", justifyContent:"center", alignItems: "center"}}>
                <LinearGradient
                    colors={['#4c669f', '#3b5998', '#192f6a']}
                    style={styles.linearGradient}
                >
                    <Text style={styles.buttonText}>
                        Here Is My Text
                    </Text>
                </LinearGradient>
            </View>
        );
    }
}

export default LinearGradientScreen;

API support

Component API

Prop	Description	Default
`colors`	Mandatory - An array of at least two color values that represent gradient colors. Example: ['red', 'blue'] sets gradient from red to blue.	None
`start`	An optional object of the following type: `{ x: number, y: number }`. Coordinates declare the position that the gradient starts at, as a fraction of the overall size of the gradient, starting from the top left corner. Example: `{ x: 0.1, y: 0.1 }` means that the gradient starts 10% from the top and 10% from the left.	None
`end`	Same as start, but for the end of the gradient.	None
`locations`	An optional array of numbers defining the location of each gradient color stop, mapping to the color with the same index in colors prop. Example: [0.1, 0.75, 1] means that the first color takes 0% - 10%, the second color takes 10% - 75% and the third color occupies 75% - 100%.	None
`useAngle`	Used to turn on/off angle based calculation (as opposed to start/end)	None
`angle`	The desired angle in degrees	None
`angleCenter`	The center point of the angle that controls the weight and stretch of the gradient like it does in Photoshop.	None

Supported versions

Package name	Amazon NPM library version	Vega OS build number	Vega SDK version	Release notes
`@amazon-devices/react-linear-gradient`	2.0.1+2.6.2	`OS 1.1 (201010438050)`	0.20

Additional Resources

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

Last updated: Sep 30, 2025