Create FadeIn Animation for any React Native Component

FadeIn.js

/* @flow */

import React, { Component, PropTypes } from 'react'
import {
  Animated
} from 'react-native'

export default class FadeIn extends Component {
  static propTypes = {
    children: PropTypes.node,
    inputRange: React.PropTypes.array,
    style: PropTypes.any
  }
  constructor(props) {
    super(props)
    this._animatedValue = new Animated.Value(0)
  }

  componentDidMount() {
    Animated.timing(       // Uses easing functions
      this._animatedValue, // The value to drive
      {
        toValue: 1,        // Target
        duration: 2000     // Configuration
      },
    ).start()              // Don't forget start!
  }
  render() {
    const { children, inputRange = [0, 1], style } = this.props
    const opacity = this._animatedValue.interpolate({
      inputRange,
      outputRange: [0, 1],
      extrapolate: 'clamp'
    })
    return (
      <Animated.View style={{ opacity, ...style }}>
        {children}
      </Animated.View>
    )
  }
}