How to get ref's style or width?

<View ref='view' style={{width: 100, marginTop: 10}}>
  <View ref='inner' style={{flex: 1}} />
</View>

I want to get the offsetWidth of refs.view, thanks

[gabro]

Ok, I managed to achieve my goal by measuring the view asynchronously (with a setTimeout)

  componentDidMount() {
    setTimeout(this.measureHeader);
  },

  measureHeader() {
    this.refs.header.measure((ox, oy, width, height) => {
      this.setState({headerHeight: height});
    });
  },

then I use this.state.headerHeight in my render method to computer another element’s position.

Still feels like a hack though…

[brentvatne]

@gabro @leecade - this is possible with the measure function: https://github.com/facebook/react-native/blob/master/Libraries/ReactIOS/NativeMethodsMixin.js#L61-L63

for example:

'use strict';

var React = require('react-native');
var {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  TouchableOpacity,
} = React;


var TestIt = React.createClass({
  measureWelcome() {
    this.refs.welcome.measure(this.logWelcomeLayout);
  },

  logWelcomeLayout(ox, oy, width, height, px, py) {
    console.log("ox: " + ox);
    console.log("oy: " + oy);
    console.log("width: " + width);
    console.log("height: " + height);
    console.log("px: " + px);
    console.log("py: " + py);
  },

  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome} ref="welcome">
          Welcome to React Native!
        </Text>
        <TouchableOpacity onPress={this.measureWelcome}>
          <Text>Measure it</Text>
        </TouchableOpacity>
      </View>
    );
  }
});

var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

AppRegistry.registerComponent('TestIt', () => TestIt);

The result of clicking the button:

2015-04-22 15:34:44.969 [info][tid:com.facebook.React.JavaScript] "ox: 72"
2015-04-22 15:34:44.969 [info][tid:com.facebook.React.JavaScript] "oy: 313"
2015-04-22 15:34:44.969 [info][tid:com.facebook.React.JavaScript] "width: 231.5"
2015-04-22 15:34:44.970 [info][tid:com.facebook.React.JavaScript] "height: 24"
2015-04-22 15:34:44.971 [info][tid:com.facebook.React.JavaScript] "px: 72"
2015-04-22 15:34:44.971 [info][tid:com.facebook.React.JavaScript] "py: 313"

measure uses the RCTUIManager measure function. Notice the return values to the callback:

    callback(@[
      @(frame.origin.x),
      @(frame.origin.y),
      @(frame.size.width),
      @(frame.size.height),
      @(pagePoint.x),
      @(pagePoint.y)
    ]);

You may also be interested in measureLayout, which gives you:

callback(@[@(leftOffset), @(topOffset), @(width), @(height)]);