How to use react-native-linear-gradient - 6 common examples

import React, {Component} from 'react';
import {PropTypes} from 'prop-types';
import {Animated, Easing} from 'react-native';
import _ from 'lodash';

import NativeLinearGradient from 'react-native-linear-gradient';

class LinearGradient extends Component {
  static propTypes = {
    ...NativeLinearGradient.propTypes,
  };

  // Generate back the colors array with all transformed props
  _generateColorsArray(props) {
    const propsKeys = Object.keys(props);
    const colorsArray = [];

    propsKeys.forEach(key => {
      if (
        key.indexOf('animatedColor') !== -1 &&
        props[key] &&
        typeof props[key] === 'string'
      ) {
        colorsArray.push(props[key]);
      }
    });

const colorsArray = this._generateColorsArray(props);
    const nativeLinearProps = _.omit(props, Object.keys(colorsArray));

    return (
      
        {children}
      
    );
  }
}

Animated.LinearGradient = Animated.createAnimatedComponent(LinearGradient);

class AnimatedGradientTransition extends Component {
  static propTypes = {
    ...NativeLinearGradient.propTypes,
    animation: PropTypes.shape({
      toValue: PropTypes.number,
      duration: PropTypes.number,
      easing: PropTypes.func,
    }),
  };

  static defaultProps = {
    animation: {
      toValue: 1,
      duration: 500,
      easing: Easing.linear,
    },
  };

  constructor(props) {

if (animatable && params.animatedValue) {
      top = params.animatedValue.interpolate({
        inputRange: [0, 1000],
        outputRange: [yOffset, -1000],
      });
    }
    return (
      
    );
  }
}


Circle.propTypes = {
  style: LinearGradient.propTypes.style,
  animatable: PropTypes.bool,
  navigation: PropTypes.shape(),
};

Circle.defaultProps = {
  style: {},
  animatable: false,
  navigation: null,
};

export default withNavigation(Circle);

'use strict';

/**
 * Dependencies
 */

const LinearGradient = require('react-native-linear-gradient').default;
const debug = require('../debug')('ListItem');
const theme = require('../../config').theme;
const tinycolor = require('tinycolor2');
const React = require('react');

/**
 * Locals
 */

const {
  PanResponder,
  StyleSheet,
  Animated,
  Image,
  Text,
  View,

import React from 'react';
import PropTypes from 'prop-types';
import { Platform } from 'react-native';
import { View as RNView, KeyboardAvoidingView } from 'react-native';
import { renderChildren } from '../helpers';
import { MergeTheme } from '../theme';

const LinearGradient = Platform.OS === 'ios' ?
  require('react-native-linear-gradient/index.ios').default :
  require('react-native-linear-gradient/index.android').default;

export default class View extends React.PureComponent {

  constructor (props) {
    super(props);
    this.theme = MergeTheme(props.theme);
  }

  componentWillReceiveProps (nextProps) {
    if (this.props.theme !== nextProps.theme) this.theme = MergeTheme(nextProps.theme)
  }

  render () {
    let Component = RNView;
    if (this.props.keyboardaware) Component = KeyboardAvoidingView;

import React from 'react';
import PropTypes from 'prop-types';
import { Platform } from 'react-native';
import { View as RNView, KeyboardAvoidingView } from 'react-native';
import { renderChildren } from '../helpers';
import { MergeTheme } from '../theme';

const LinearGradient = Platform.OS === 'ios' ?
  require('react-native-linear-gradient/index.ios').default :
  require('react-native-linear-gradient/index.android').default;

export default class View extends React.PureComponent {

  constructor (props) {
    super(props);
    this.theme = MergeTheme(props.theme);
  }

  componentWillReceiveProps (nextProps) {
    if (this.props.theme !== nextProps.theme) this.theme = MergeTheme(nextProps.theme)
  }

  render () {
    let Component = RNView;
    if (this.props.keyboardaware) Component = KeyboardAvoidingView;