How to hide a component in react-native

hiding-components-in-react-native.js

/*
 * UPDATE: Looked at the blame, turns out the negative bottom is actually for ensuring layout doesn't change during transitions.
 * Still don't know how that works completely, but it has nothing to do with hiding (top: window.height pushes view out of viewport).
 * 
 * I was just looking at Navigator implementation and noticed this line:
 * https://github.com/facebook/react-native/blob/master/Libraries/CustomComponents/Navigator/Navigator.js#L110-L113
 *
 */
import React, {
  Component,
  Dimensions,
  StyleSheet,
  Text,
  View,
} from 'react-native';

const window = Dimensions.get('window');

const styles = StyleSheet.create({
  container: {
    overflow: 'hidden',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    position: 'absolute',
    alignItems: 'center',
    justifyContent:'center'
  },
  // This pushes the view out of the viewport, but why the negative bottom?
  hiddenContainer: {
    top: window.height,
    bottom: -window.height
  }
});

class Example extends Component {
  render() {
    return (
      <View style={{ flex: 1 }}>
        <View style={[styles.container, { backgroundColor: 'red' }]}>
          <Text>Can see me!</Text>
        </View>
        <View style={[styles.container, { backgroundColor: 'yellow' }, styles.hiddenContainer]}>
          <Text>Cannot see me</Text>
        </View>
        <View style={[styles.container, { backgroundColor: 'blue' }, styles.hiddenContainer]}>
          <Text>Cannot see me</Text>
        </View>
      </View>
    );
  }
}

export default Example;