https://github.com/heineiuo/react-native-animated-linear-gradient

Animated linear gradient as background animation or something else.
https://github.com/heineiuo/react-native-animated-linear-gradient

android animation background-animation component ios react react-native

Last synced: 3 days ago
JSON representation

Animated linear gradient as background animation or something else.

• Host: GitHub
• URL: https://github.com/heineiuo/react-native-animated-linear-gradient
• Owner: heineiuo
• Created: 2016-10-15T06:21:10.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2023-01-24T17:41:45.000Z (almost 2 years ago)
• Last Synced: 2024-12-28T04:11:55.537Z (10 days ago)
• Topics: android, animation, background-animation, component, ios, react, react-native
• Language: JavaScript
• Homepage:
• Size: 7.27 MB
• Stars: 228
• Watchers: 3
• Forks: 51
• Open Issues: 21
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md

Awesome Lists containing this project

README

        
# react-native-animated-linear-gradient

Animated linear gradient as background animation or other.

## Example



  




## Install

1. install [react-native-linear-gradient](https://github.com/react-native-community/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

```javascript

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`:

```javascript

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)',

  ]

};

```

2. `speed`

The speed of the animation. default is 4000.

3. `points` (experimental)

Describe the direction of linear gradient with start point and end point [see more](https://github.com/react-native-community/react-native-linear-gradient#start)

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