A <LinearGradient> element for React Native Keplerscript
npm install @amazon-devices/react-linear-gradient@amazon-devices/react-linear-gradient provides support on Kepler for react-native-linear-gradient which provides a
This is a system-deployed library and is available to KeplerScript 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 KeplerScript for which it is built.
When you up level the version of KeplerScript with which your app is built, it a best practice to also uplevel the version of the library on which it is dependent.
Check the original library documentation for more info about this library, API reference and more here: README.md.
1. Add the JavaScript library dependency in the package.json file:
``json`
"dependencies": {
...
"@amazon-devices/react-linear-gradient": "^2.0.0"
}
2. Reinstall package-lock.json file using npm install command.
`javascript
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 (
flex: 1,
backgroundColor: 'transparent',
justifyContent: 'center',
alignItems: 'center'
}}>
style={styles.linearGradient}>
);
}
}
export default LinearGradientScreen;
`
| Prop | Description | Default | Platform |
| --- | --- | --- | --- |
| colors | Mandatory - An array of at least two color values that represent gradient colors. Example: ['red', 'blue'] sets gradient from red to blue. | _None_ | All |
| 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_ | All |end
| | Same as start, but for the end of the gradient. | _None_ | All |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_ | All |useAngle
| | Used to turn on/off angle based calculation (as opposed to start/end) | _None_ | All |angle
| | The desired angle in degrees | _None_ | All |angleCenter` | The center point of the angle (will control the weight and stretch of the gradient like it does in photoshop) | _None_ | All |
|
| version | @amazon-devices/react-native-kepler version |
| ----------- | --------------------------------- |
| 2.0.x+2.6.2 | 2.0.x+rn0.72.0 |