verdnatura-chat/app/containers/MessageBox/AnimatedContainer.js

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

export default class MessageBox extends React.PureComponent {
	static propTypes = {
		subview: PropTypes.object.isRequired,
		visible: PropTypes.bool.isRequired,
		messageboxHeight: PropTypes.number.isRequired
	}

	constructor(props) {
		super(props);
		this.animatedBottom = new Animated.Value(0);
		this.state = { render: false };
	}

	componentWillReceiveProps(nextProps) {
		if (this.props.visible === nextProps.visible) {
			return;
		}
		if (nextProps.visible) {
			return this.show();
		}
		this.hide();
	}

	show() {
		this.setState({ render: true });
		this.animatedBottom.setValue(0);
		Animated.timing(this.animatedBottom, {
			toValue: 1,
			duration: 300,
			useNativeDriver: true
		}).start();
	}

	hide() {
		Animated.timing(this.animatedBottom, {
			toValue: 0,
			duration: 300,
			useNativeDriver: true
		}).start();
		setTimeout(() => {
			this.setState({ render: false });
		}, 300);
	}

	render() {
		const bottom = this.animatedBottom.interpolate({
			inputRange: [0, 1],
			outputRange: [0, -this.props.messageboxHeight - 200]
		});

		if (!this.state.render) {
			return null;
		}

		return (
			<Animated.View
				style={{
					position: 'absolute',
					left: 0,
					right: 0,
					bottom: -200,
					zIndex: 1,
					transform: [{ translateY: bottom }]
				}}
			>
				{this.props.subview}
			</Animated.View>
		);
	}
}