Need help with react-native-animated-linear-gradient?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

heineiuo
168 Stars 44 Forks 30 Commits 22 Opened issues

Description

Animated linear gradient as background animation or something else.

Services available

!
?

Need anything else?

Contributors list

# 179,030
iOS
React N...
ws
blink
21 commits
# 175,971
JavaScr...
HTML
nodemai...
email-s...
2 commits
# 34,418
Objecti...
Firebas...
iOS
React
1 commit
# 26,369
Gulp
html5
angular...
js
1 commit
# 510,701
JavaScr...
iOS
React
Android
1 commit

react-native-animated-linear-gradient

Animated linear gradient as background animation or other.

Example


Install

  1. install react-native-linear-gradient, run
    npm install react-native-linear-gradient --save
  2. run
    react-native link react-native-linear-gradient
  3. 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 ( ); } }

AppRegistry.registerComponent('HelloWorldApp', () => HelloWorldApp);

Props

  1. customColors
    A colors
    array
    . This package has include some preset colors, default is
    presetColors.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)',
  ]
};
  1. speed
    The speed of the animation. default is 4000.
  2. points
    (experimental) Describe the direction of linear gradient with start point and end point see more

Default:

js
const DEFAULT_POINTS = {
  start: {x: 0, y: 0.4}, 
  end: {x: 1, y: 0.6}
}

Example:

vertical:

jsx

You can find out it is static values, no animate here :( . This points is going to be animateable soon :) .

License

MIT

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.