title: React-Native: how to fill fullsize screen without explicit Width and Height?
body: <p>I want to create a <strong>fullsize</strong>-screen with the child-view (a video player) that is rendered over the full size of the screen. I only get it work when i pass explicitly <code>width</code> and <code>height</code> to the component.</p>
  
  <p>But i know that there is a property called "<strong>flex</strong>". In many tutorials they do something like "flex: 1", but for me it nowhere does what it is supposed to.</p>
  
  <p>(For the sake of completeness, the video-player is not part of the question. I can also replace the <code>&lt;video&gt;</code> tag with <code>&lt;Image&gt;</code> or each other kind of view and get the same results)</p>
  
  <pre><code>render() {
      const uri = this.props.uri
      return (
          &lt;KeyboardAwareScrollView keyboardShouldPersistTaps="always" &gt;
              &lt;TouchableWithoutFeedback onPress={RouterActions.pop}&gt;
                  &lt;Video source={{uri: uri}}   
                      ref={(ref) =&gt; {
                          this.player = ref
                      }}                       
                      style={s.fullsize} 
  
                  /&gt;
              &lt;/TouchableWithoutFeedback&gt;
  
              &lt;TouchableOpacity onPress={RouterActions.pop} style={s.closeBtn}&gt;
                  &lt;Icon name="times-circle-o" size={20} color="white" /&gt;
              &lt;/TouchableOpacity&gt;
  
  
          &lt;/KeyboardAwareScrollView&gt;
      )
  }
  </code></pre>
  
  <p><strong>My styles:</strong></p>
  
  <p>This is only working when i pass the width and height:</p>
  
  <pre><code>const s = StyleSheet.create({
    fullsize: {
      backgroundColor: 'black',
      //flex: 1,
      width: Dimensions.get('window').width,
      height: Dimensions.get('window').height,
    },
    closeBtn: {
        position: 'absolute',
        left: 20,
        top: 25, 
    },
  
  });
  </code></pre>
  
  <p>I only tried out this one, but then the screen will be empty because of the -Component has a width and height of 0 each.</p>
  
  <pre><code>const s = StyleSheet.create({
    fullsize: {
      backgroundColor: 'black',
      flex: 1,   // this is not working
      left: 0,
      right: 0,
      top: 0,
      bottom: 0
    },
  });
  </code></pre>