title: Why is "flex"-Property not working any more in react-native?
body: <p>With React-Native 0.26 i could style a screen with a header and a large panel in proportion 1:10 when passing "<code>flex:1</code>" to the header and "<code>flex:9</code>" to the other view.</p>
  
  <p>However, with newest React-Native > 0.40 this is not working any more.</p>
  
  <p><strong>What is wrong with my styles?</strong></p>
  
  <h2>This is the render function:</h2>
  
  <pre><code>  render() {
      return (
        &lt;View style={s.container}&gt;
          &lt;View style={s.progressBar}&gt;
            &lt;Progress.Bar progress={this.state.progress} width={200} /&gt;
          &lt;/View&gt;
          &lt;ListView
            style={s.listView}
            enableEmptySections={true}
            keyboardShouldPersistTaps="always"
            keyboardDismissMode="on-drag"
            dataSource={this.state.dataSource}
            renderRow={(contact) =&gt; this._renderContact(contact)}
          /&gt;
        &lt;/View&gt;
  
      )
    }
  </code></pre>
  
  <h2>These are the styles:</h2>
  
  <pre><code>const s = StyleSheet.create({
    container: {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
    },
  
    progressBar: {
      flex: 1,
      backgroundColor: 'lightgray',
      height: 20,
      alignSelf: 'stretch',
    },
  
    listView: {
      flex: 10,
      alignSelf: 'stretch',
    }
  
  });
  </code></pre>
  
  <h1>This happens now:</h1>
  
  <p>Wether <code>flex: 1</code> is working nor the <code>height</code>-property. It does not matter if these properties are passed or not. It always divides the screen into 2 subviews with the same height:</p>
  
  <p><a href="https://i.stack.imgur.com/3L8NS.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3L8NS.png" alt="enter image description here"></a></p>
  
  <p>What i want to achieve is to give the gray area a height of either 20 pixel or 10 percent of the screen.</p>