react-native-ui-animations

SlideIn.js

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

class SlideIn extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      height: new Animated.Value(0),
    };
  }
  updateSlideIn = () => {
    if (this.props.slideIn) {
      this.slideIn();
    } else {
      this.slideOut();
    }
  }
  slideIn = () => {
    Animated.timing(
      this.state.height,
      {
        toValue: this.props.height,
        duration: 400,
        easing: Easing.linear,
      }
    ).start()
  };
  slideOut = () => {
    Animated.timing(
      this.state.height,
      {
        toValue: 0,
        duration: 400,
        easing: Easing.linear,
      }
    ).start()
  };
  componentWillReceiveProps(nextProps) {
    if (this.props.slideIn !== nextProps.slideIn) {
      this.updateSlideIn();
    }
  }
  render() {
    const {
      children,
      style,
    } = this.props;

    return (
      <Animated.View
        style={[{
          opacity: 1,
          height: this.state.height,
          backgroundColor: 'transparent',
        }, style]}
      >
        {children}
      </Animated.View>
    );
  }
}

SlideIn.propTypes = {
  style: PropTypes.shape({}),
};

export default SlideIn;