title: Passing onLayout event.nativeEvent.layout.height from parent to child component causes infinitely growing height value
body: <p><a href="https://rnplay.org/apps/-5DJTQ" rel="nofollow noreferrer">See the code in action on rnplay.org</a> - if you make changes to the code, reload the browser window and hit "Tap to Play" again. I made some notes there inside the components to explain the problem.</p>
  
  <p>Here my written explanation:</p>
  
  <p>My basic problem: I want to make <strong>two sibling components the same height</strong>. The content of one sibling (here: SubComponent1) is dynamically fetched from the database and thus defines the height of the parent. I want it to also define the height of SubComponent 2. See image:</p>
  
  <p><a href="https://i.stack.imgur.com/MBus3.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/MBus3.jpg" alt="before_after"></a></p>
  
  <p>I tried to implement that by sending the height of the parent to the static child (SubComponent 2) via props. Here's the <code>render</code> part in the parent component: </p>
  
  <pre><code>render: function() {
    return (
      &lt;View style={styles.parentContainer} onLayout={this._onLayoutEvent}&gt;
        &lt;Text&gt;Parent Component &lt;/Text&gt;
        &lt;SubComponent1 /&gt;
        &lt;SubComponent2 parentHeight={this.state.parentHeight} /&gt;
      &lt;/View&gt;
    );
  },
  
  _onLayoutEvent: function(event) {
    this.setState({parentHeight: event.nativeEvent.layout.height});
  }
  </code></pre>
  
  <p>And here I add it to the child:</p>
  
  <pre><code>&lt;View style={[styles.subComponent2View, {height: this.props.parentHeight}]}&gt;
  </code></pre>
  
  <p>However, this does not work! The SubComponent's height increases in an infinite loop.. see image: <a href="https://i.stack.imgur.com/7PDq7.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7PDq7.jpg" alt="infinite_growth"></a></p>
  
  <p>Surprisingly dividing by <code>1.01</code> makes it work! That is, changing the above line in the child to </p>
  
  <pre><code>&lt;View style={[styles.subComponent2View, {height: this.props.parentHeight / 1.01}]}&gt;
  </code></pre>
  
  <p>does not cause growing height and I get the following where you can barely see the height difference of <code>0.01</code>. However dividing by <code>1.001</code> again causes the infinite loop... I really can't explain why! Here the result when diving by <code>1.01</code>: <a href="https://i.stack.imgur.com/n3kjZ.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/n3kjZ.jpg" alt="dividing Parent Height by 1.01"></a></p>
  
  <p>Can someone explain that strange behavior?</p>
  
  <p>Are there alternative solutions to my problem? 
  - Setting <code>alignSelf: 'stretch'</code> on SubComponent2 also does not work.
  - Would it perhaps help to send the height from the one sibling to the other (i.e. from SubComponent 1 to SubComponent2)? If so, I probably need to implement something using the <code>Flux</code> pattern, right?</p>