collapsable.js

import React, {
  Component,
  PropTypes,
} from "react";

import {
  Animated,
  View,
} from "react-native";

class Collapsable extends Component {
  static propTypes = {
    collapsed: PropTypes.bool,
  };
  
  state = {
    animation: new Animated.Value(0),
    firstRender: true,
  };

  close() {
    Animated.timing(this.state.animation, {
      toValue: 0,
      duration: 200,
    }).start(() => this.setState({ collapsed: true }));
  }

  open() {
    Animated.timing(this.state.animation, {
      toValue: this.state.height,
      duration: 200,
    }).start(() => this.setState({ collapsed: false }));
  }

  componentDidMount() {
    this.props.collapsed ? this.close() : this.open();
  }

  componentWillReceiveProps(nextProps) {
    const shouldCollapse = nextProps.collapsed;
    if (this.state.collapsed != shouldCollapse) {
      shouldCollapse ? this.close() : this.open();
    }
  }

  render() {
    const height = this.state.firstRender ? null : this.state.animation;

    return (
      <Animated.View style={{ height, overflow: "hidden" }}>
        <View onLayout={event => {
          if (this.state.firstRender) this.setState({ height: event.nativeEvent.layout.height, firstRender: false });
        }}>
          { this.props.children }
        </View>
      </Animated.View>
    );
  }
}