Reactjs Methods in React Native to Find DOM Node Dimensions

Question

How can the DOM node be obtained from a Component in React Native (v0.5.0)? Based on the code snippet below, "this.refs.abc" does not have the "getDOMNode( )" method. Also, "findDOMNode()" is NOT available in the React module. (Ultimately, I am trying to find out the dimensions of a Component's DOM element).

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


var styles = StyleSheet.create({
  button: {
    marginHorizontal: 100,
    marginVertical: 300,
    height: 50,
    padding: 5,
    backgroundColor: "yellow",
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
  },
})
var Test = React.createClass({
  handleClick: function(e) {
    debugger;
    var element = this.refs.abc.getDOMNode();
    var element2 = React.findDOMNode(this.refs.abc);
  },

  render: function() {

    return <Abc ref="abc" update={this.handleClick.bind(this)} />
  }
});

var Abc = React.createClass({
  render: function() {
    return (
      <TouchableHighlight
        underlayColor="#A4A4A4"
        style={styles.button}
        onPress={() => this.props.update()}>
          <View>
            <Text>Testing</Text>
          </View>
      </TouchableHighlight>
    );
  }
})

AppRegistry.registerComponent('test', () => Test);

Answer 1

There is no DOM. React Native doesn't run inside a web browser and so there's no exact equivalent. To get the dimensions of a component, you can use the measure method that is mixed in to a component:

this.refs.abc.measure(function(x, y, width, height) {
    // Do something with position and dimensions
});