react-native-animated-linear-gradient

This package requires react-native-linear-gradient as a peer dependency. Follow these steps to install:

1. Install and link react-native-linear-gradient:

   npm install react-native-linear-gradient --save
   react-native link react-native-linear-gradient

2. Install react-native-animated-linear-gradient:

   npm install react-native-animated-linear-gradient --save

The points prop (experimental) allows you to set the direction of the linear gradient. Currently, these values are static and will not animate.

To create a vertical gradient, use the following configuration:

<AnimatedLinearGradient points={{start: {x: 0.5, y: 0}, end: {x: 0.5, y: 1}}}/>

Import AnimatedLinearGradient and optionally presetColors from react-native-animated-linear-gradient to render an animated background. You can pass customColors and speed as props.

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);

The AnimatedLinearGradient component accepts the following props:

• customColors (Array): An array of colors for the gradient. Defaults to presetColors.instagram.
• speed (Number): The speed of the animation. Defaults to 4000.
• points (Object, experimental): Defines the direction of the gradient using start and end points. Note: These values are currently static and do not animate. Defaults to:

  { start: {x: 0, y: 0.4}, end: {x: 1, y: 0.6} }

The package exports a presetColors object containing predefined color arrays for common themes:

• instagram
• firefox
• sunrise

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)',
  ]
};

The AnimatedGradient component accepts the following props:

The AnimatedGradient component provides an automatically animating linear gradient background. It cycles through a provided array of colors using Animated.timing.

To use it, import the default export and provide a customColors array. You can also configure the animation speed, the gradient points (start and end coordinates), and whether to use the native driver for animations.

import AnimatedGradient from 'react-native-animated-linear-gradient';

// Basic usage
<AnimatedGradient customColors={['#ff0000', '#00ff00', '#0000ff']}>
  <Text>Hello World</Text>
</AnimatedGradient>

The library exports a presetColors object containing predefined color arrays for popular themes. You can use these to quickly set the customColors prop on an AnimatedGradient component.

Available presets:

• instagram
• firefox
• sunrise

import AnimatedGradient, { presetColors } from 'react-native-animated-linear-gradient';

// Using the instagram preset
<AnimatedGradient customColors={presetColors.instagram} />