{"size": 2618, "ext": "js", "max_stars_repo_path": "lib/commonComponents/FadeInView.js", "max_stars_repo_name": "shrutishankar28/react-native-common-lib", "max_stars_repo_stars_event_min_datetime": "2018-08-17T17:54:56.000Z", "max_stars_repo_stars_event_max_datetime": "2020-11-03T05:29:23.000Z", "max_issues_repo_path": "lib/commonComponents/FadeInView.js", "max_issues_repo_name": "shrutishankar28/react-native-common-lib", "max_issues_repo_issues_event_min_datetime": "2018-08-17T21:51:06.000Z", "max_issues_repo_issues_event_max_datetime": "2021-05-08T08:12:08.000Z", "max_forks_repo_path": "lib/commonComponents/FadeInView.js", "max_forks_repo_name": "wkoutre/react-native-common-lib", "max_forks_repo_forks_event_min_datetime": "2018-05-24T20:56:33.000Z", "max_forks_repo_forks_event_max_datetime": "2020-11-03T05:29:24.000Z"}
{"max_stars_count": 6, "max_issues_count": 2, "max_forks_count": 7, "avg_line_length": 23.1681415929, "max_line_length": 77, "alphanum_fraction": 0.5939648587}
import React from "react";
import PropTypes from "prop-types";
import { StyleSheet, Animated } from "react-native";
import { Touchable } from "./";
import { defaultRefs } from "../commonHelpers";

const localStyles = StyleSheet.create({
  touchable: {
    flex: 1,
  },
});

class FadeInView extends React.PureComponent {
  state = {
    fadeAnim: new Animated.Value(0), // Initial value for opacity
  };

  componentDidMount() {
    const { duration, useNativeDriver } = this.props;
    console.log(`FADE IN VIEW: MOUNTED`);

    Animated.timing(
      // Animate over time
      this.state.fadeAnim, // The animated value to drive
      {
        toValue: 1,
        duration,
        useNativeDriver,
      },
    ).start(); // Starts the animation
  }

  componentWillReceiveProps(nextProps) {
    const { fadeOut: nextFadeOut } = nextProps;
    const { fadeOut, duration, useNativeDriver } = this.props;

    if (!fadeOut && nextFadeOut) {
      Animated.timing(
        // Animate over time
        this.state.fadeAnim, // The animated value to drive
        {
          toValue: 0,
          duration,
          useNativeDriver,
        },
      ).start(); // Starts the animation
    } else if (fadeOut && !nextFadeOut) {
      Animated.timing(
        // Animate over time
        this.state.fadeAnim, // The animated value to drive
        {
          toValue: 1,
          duration,
          useNativeDriver,
        },
      ).start(); // Starts the animation
    }
  }

  _getRef = e => {
    this._innerRef = e;
  };

  render() {
    const { fadeAnim } = this.state;
    const { onPress, onLayout, style, children, ...otherProps } = this.props;

    return (
      <Animated.View
        ref={this._getRef}
        style={[
          style,
          {
            opacity: fadeAnim, // Bind opacity to animated value
          },
        ]}
        onLayout={onLayout}
        {...otherProps}
      >
        {children}
        {!!onPress && (
          <Touchable onPress={onPress} style={localStyles.touchable} />
        )}
      </Animated.View>
    );
  }
}

FadeInView.propTypes = {
  duration: PropTypes.number,
  style: PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.number,
    PropTypes.object,
    PropTypes.array,
  ]),
  fadeOut: PropTypes.bool,
  useNativeDriver: PropTypes.bool,
  onPress: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),
  onLayout: PropTypes.func,
};

FadeInView.defaultProps = {
  duration: 500,
  style: defaultRefs.emptyObj,
  fadeOut: false,
  useNativeDriver: true,
  onPress: false,
  onLayout: defaultRefs.nullFunc,
};

export { FadeInView };
