// import liraries
import React, { Component } from 'react';
import { View, StyleSheet, Animated } from 'react-native';
import LinearGradient from 'react-native-linear-gradient';

class CustomLinearGradient extends Component {
  render() {
    const { locationStart, colorShimmer, widthShimmer } = this.props;
    return (
      <LinearGradient
        colors={colorShimmer}
        style={{ flex: 1 }}
        start={{
          x: -1,
          y: 0.5,
        }}
        end={{
          x: 2,
          y: 0.5,
        }}
       //  locations={[0, 0.5, 1]}
        locations={[locationStart + widthShimmer, locationStart + 0.5 + widthShimmer / 2, locationStart + 1]}
      />
    );
  }
}
CustomLinearGradient.
CustomLinearGradient.propTypes = {
  color: React.PropTypes.any,
  colorShimmer: React.PropTypes.array,
  widthShimmer: React.PropTypes.number,
};


Animated.LinearGradient = Animated.createAnimatedComponent(CustomLinearGradient);


// create a component
class ShimmerPlaceHolder extends Component {
  constructor(props) {
    super(props);
    // this.beginShimmerPosition = new Animated.Value(-1);
    this.state = {
      isDisplayChildComponent: false,
      beginShimmerPosition: new Animated.Value(-1),
    };
  }
  componentDidMount = () => {
    const { autoRun } = this.props;
    const shimmerAnimated = this.getAnimated();
    if (autoRun) {
      Animated.loop(shimmerAnimated).start();
    }
  }
  getAnimated = () => {
    // this.state.color.setValue(0);
    return Animated.timing(this.state.beginShimmerPosition, {
      toValue: 1,
      duration: this.props.duration,
      // useNativeDriver: true,
      // easing: Easing.linear,
      // delay: -400
    });
  }
  render() {
    const { width, reverse, height, colorShimmer, style, widthShimmer, children } = this.props;
    let beginPostioner = -0.65;
    let endPosition = 0.65;
    if (reverse) {
      beginPostioner = 0.65;
      endPosition = -0.65;
    }
    const { isDisplayChildComponent } = this.props;
    const newValue = this.state.beginShimmerPosition.interpolate({
      inputRange: [-1, 1],
      outputRange: [beginPostioner, endPosition],
    });
    return (
      <View style={!isDisplayChildComponent
      ? [{ height, width }, styles.container, style]
      : []
      }
      >
        {!isDisplayChildComponent
        ? (
          <View style={{ flex: 1 }}>
            <Animated.LinearGradient
              locationStart={newValue}
              colorShimmer={colorShimmer}
              widthShimmer={widthShimmer}
            />
            {/* Force run children */}
            <View style={{ width: 0, height: 0 }}>
              {this.props.children}
            </View>
          </View>
          )
        : children
        }
      </View>

    );
  }
}
ShimmerPlaceHolder.defaultProps = {
  width: 200,
  height: 15,
  widthShimmer: 0.7,
  duration: 1000,
  colorShimmer: ['#ebebeb', '#818181', '#ebebeb'],
  reverse: false,
  autoRun: false,
  isDisplayChildComponent: false,
};
// define your styles
const styles = StyleSheet.create({
  container: {
    // flex: 1,
    // overflow: 'hidden',
  },
});
ShimmerPlaceHolder.propTypes = {
  width: React.PropTypes.number,
  height: React.PropTypes.number,
  widthShimmer: React.PropTypes.number,
  duration: React.PropTypes.number,
  colorShimmer: React.PropTypes.array,
  reverse: React.PropTypes.bool,
  autoRun: React.PropTypes.bool,
  isDisplayChildComponent: React.PropTypes.bool,
  children: React.PropTypes.any,
  style: React.PropTypes.any,
};
// make this component available to the app
export default ShimmerPlaceHolder;

@@ -690,30 +690,8 @@
 %7D%0A%7D%0A
-CustomLinearGradient.%0A
 Cust
@@ -723,21 +723,29 @@
 s = %7B%0A  
-color
+locationStart
 : React.
@@ -1119,39 +1119,23 @@
 %7B%0A      
+v
 is
-DisplayChildComponent
+ible
 : false,
@@ -1341,22 +1341,8 @@
     
-Animated.loop(
 shim
@@ -1352,17 +1352,16 @@
 Animated
-)
 .start()
@@ -1909,39 +1909,23 @@
 const %7B 
+v
 is
-DisplayChildComponent
+ible
  %7D = thi
@@ -2118,39 +2118,23 @@
 style=%7B!
+v
 is
-DisplayChildComponent
+ible
 %0A      ?
@@ -2216,39 +2216,23 @@
       %7B!
+v
 is
-DisplayChildComponent
+ible
 %0A       
@@ -2873,39 +2873,23 @@
 alse,%0A  
+v
 is
-DisplayChildComponent
+ible
 : false,
@@ -3303,31 +3303,15 @@
 ,%0A  
+v
 is
-DisplayChildComponent
+ible
 : Re

Move example source code to base