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 Release Notes.

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

This is a system-deployed library and is available to React Native for Vega apps without a separate installation process. It is deployed as an autolinking library which your app links to at runtime. Compatibility is guaranteed only between the library and the version of React Native for Vega for which it is built.

When you up level the version of React Native for Vega with which your app is built, it a best practice to also uplevel the version of the library on which it is dependent.

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 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 will start 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 first color will take 0% - 10%, second color will take 10% - 75% and finally third color will occupy 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 (will control 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 additonal libraries, see Supported Third-Party Libraries and Services.

Last updated: Sep 30, 2025