react-native-animated-linear-gradient
Animated linear gradient as background animation or other.
Example
Install
- install react-native-linear-gradient, run
npm install react-native-linear-gradient --save - run
react-native link react-native-linear-gradient - run
npm install react-native-animated-linear-gradient --save
Use
import React, { Component } from 'react';
import { AppRegistry, Text } from 'react-native';
import AnimatedLinearGradient, {presetColors} from 'react-native-animated-linear-gradient'
class HelloWorldApp extends Component {
render() {
return (
<AnimatedLinearGradient customColors={presetColors.instagram} speed={4000}/>
);
}
}
AppRegistry.registerComponent('HelloWorldApp', () => HelloWorldApp);Props
customColorsA colorsarray. This package has include some preset colors, default ispresetColors.instagram:
export presetColors = {
instagram: [
'rgb(106, 57, 171)',
'rgb(151, 52, 160)',
'rgb(197, 57, 92)',
'rgb(231, 166, 73)',
'rgb(181, 70, 92)'
],
firefox: [
'rgb(236, 190, 55)',
'rgb(215, 110, 51)',
'rgb(181, 63, 49)',
'rgb(192, 71, 45)',
],
sunrise: [
'rgb(92, 160, 186)',
'rgb(106, 166, 186)',
'rgb(142, 191, 186)',
'rgb(172, 211, 186)',
'rgb(239, 235, 186)',
'rgb(212, 222, 206)',
'rgb(187, 216, 200)',
'rgb(152, 197, 190)',
'rgb(100, 173, 186)',
]
};-
speedThe speed of the animation. default is 4000. -
points(experimental) Describe the direction of linear gradient with start point and end point see more
Default:
const DEFAULT_POINTS = {
start: {x: 0, y: 0.4},
end: {x: 1, y: 0.6}
}Example:
vertical:
<AnimatedLinearGradient points={{start: {x: 0.5, y: 0}, end: {x: 0.5, y: 1}}}/>You can find out it is static values, no animate here :( . This points is going to be animateable soon :) .
License
MIT