refs are undefined in react native

Question

Im new to react-native. Im trying to read x,y co-ordinates of a view inside its parent. Using below code

componentDidMount: function() {
  setTimeout(this.measureView);
},
measureView: function() {
  this.refs.completeView.measure((ox, oy, width, height) => {
    this.setState({headerHeight: height});
  });
},
render : function(){
return (
  <TouchableHighlight onPress={() => this.props._pressRow(this.props.currentRowID)}>
    <View style={styles.container}
          ref="completeView">
      <View style={styles.colorView}>
      </View>
      <View style={styles.textWrapper}>
        <Text style={styles.text}>{this.props.text}</Text>
      </View>
    </View>
  </TouchableHighlight>
);
},

Inside measureView, this.refs is always undefined. Why?

I'm trying to read last view's co-ordinates into ListView, because for some reason I want to render the last row. So is there any other solution for this?

Please also make a note that this class is being exported into its parent class.

If you are talking about render function, then I just updated the code. @MatthewHerbst — Rajesh
– Rajesh, Commented May 11, 2016 at 7:07

Aditya Singh · Accepted Answer · 2016-05-11 07:50:29Z

1

Try using ES2015 lambda's to get the correct lexical value of this within methods.

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

answered May 11, 2016 at 7:50

Aditya Singh

16.8k15 gold badges49 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Tarek · Accepted Answer · 2016-12-23 22:48:17Z

1

set ref using a function instead of a string:

var myComponent = null;

...

componentDidMount: function() {
  setTimeout(this.measureView);
},
measureView: function() {
  this.myComponent.completeView.measure((ox, oy, width, height) => {
    this.setState({headerHeight: height});
  });
},
render : function(){
return (
  <TouchableHighlight onPress={() => this.props._pressRow(this.props.currentRowID)}>
    <View style={styles.container}
          ref={((component)=>this.myComponent = component)}>
      <View style={styles.colorView}>
      </View>
      <View style={styles.textWrapper}>
        <Text style={styles.text}>{this.props.text}</Text>
      </View>
    </View>
  </TouchableHighlight>
);
},

answered Dec 23, 2016 at 22:48

Tarek

6975 silver badges11 bronze badges

Collectives™ on Stack Overflow

refs are undefined in react native

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related