title: React-Native : measure a View
body: <p>I'm trying to measure a view using a <code>ref</code>, but the <code>width</code> returned is 0 despite the fact that I see the view displayed on the screen (and it's far from being equal to 0).</p>
  
  <p>I tried to follow this : <a href="https://github.com/facebook/react-native/issues/953" rel="noreferrer">https://github.com/facebook/react-native/issues/953</a> but it just doesn't work ... I just want to get the actual width of the View.</p>
  
  <p>Here is my code : </p>
  
  <pre><code>var Time = React.createClass({
    getInitialState: function() {
      return({ progressMaxSize: 0 }); 
    },
    componentDidMount: function() {
      this.measureProgressBar();
    },
    measureProgressBar: function() {
      this.refs.progressBar.measure(this.setWidthProgressMaxSize);
    },
    setWidthProgressMaxSize: function(ox, oy, width, height, px, py) {
      this.setState({ progressMaxSize: width });
    },
    render: function() {
      return(
        &lt;View style={listViewStyle.time} ref="progressBar"&gt;
          &lt;View style={listViewStyle.progressBar} &gt;
            &lt;View style={[listViewStyle.progressMax, { width: this.state.progressMaxSize }]}/&gt;
          &lt;/View&gt;
        &lt;/View&gt;
      );
    }
  }); 
  </code></pre>
  
  <p>The styles associated : </p>
  
  <pre><code>time: {
      position: 'absolute',
      bottom: 5,
      left: 5,
      right: 5,
      backgroundColor: '#325436',
      flexDirection: 'row',
    },
    progressBar: {
      flex: 1,
      backgroundColor: '#0000AA',
    },
    progressMax: {
      position: 'absolute',
      top: 0,
      left: 0,
      backgroundColor: '#000',
      height: 30, 
    },
  </code></pre>