React-Native: measure view

Question

I am trying to measure the view using ref , but the returned width is 0, despite the fact that I see the view displayed on the screen (and this is far from 0).

I tried to follow this: https://github.com/facebook/react-native/issues/953 but it just doesn't work ... I just want to get the actual width of the View.

Here is my 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( <View style={listViewStyle.time} ref="progressBar"> <View style={listViewStyle.progressBar} > <View style={[listViewStyle.progressMax, { width: this.state.progressMaxSize }]}/> </View> </View> ); } }); 

Related styles:

 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, }, 

Answer 1

During the night, some guys talked about a (hacker) solution, but solved my problem, found it here: https://github.com/facebook/react-native/issues/953 p>

Basically the solution is to use setTimeout , and everything works magically:

 componentDidMount: function() { setTimeout(this.measureProgressBar); }, measureProgressBar: function() { this.refs.progressBar.measure((a, b, width, height, px, py) => this.setState({ progressMaxSize: width }) ); } 

Answer 2

You want to measure the progress indicator onLayout .

 var Time = React.createClass({ getInitialState: function() { return({ progressMaxSize: 0 }); }, measureProgressBar: function() { this.progressBar.measure(this.setWidthProgressMaxSize); }, setWidthProgressMaxSize: function(ox, oy, width, height, px, py) { this.setState({ progressMaxSize: width }); }, render: function() { return( <View style={listViewStyle.time} ref={(c) => { this.progressBar = c; } onLayout={this.measureProgressBar}> <View style={listViewStyle.progressBar} > <View style={[listViewStyle.progressMax, { width: this.state.progressMaxSize }]}/> </View> </View> ); } });