example.js

var REMOVE_CLIPPED=true;
var DO_NOT_COLLAPSE=false;

var Example = React.createClass({
  getInitialState: function() {
    return { cnt: 0 };
  },
  render: function() {
    var style = {
      width: 300,
      height: this.state.cnt === 2 ? 300 : 1,
      backgroundColor: 'red',
    };
    var collapsable = {
      position: 'relative',
      top: 10,
      left: 10,
      width: 200,
      height: 200,
      backgroundColor: this.state.cnt === 1 && 'yellow'
    }
    return (
      <View>
        <TouchableHighlight onPress={() => this.setState({cnt: this.state.cnt+1})}>
          <View style={{width: 300, height: 80, position: 'relative', top: 10, alignItems: 'center', justifyContent: 'center', backgroundColor: 'yellow'}}>
            <Text>Tap me twice</Text>
          </View>
        </TouchableHighlight>
        <View style={style} removeClippedSubviews={REMOVE_CLIPPED}>
          <View style={collapsable} collapsable={!DO_NOT_COLLAPSE}>
            <View style={{position: 'relative', top: 10, left: 10, width: 100, height: 100, backgroundColor: 'yellow'}} removeClippedSubviews={REMOVE_CLIPPED}>
              <View style={{position: 'relative', top: 10, left: 10, width: 20, height: 20, backgroundColor: 'black'}}/>
            </View>
          </View>
        </View>
      </View>
    );
  }
});