Can't access refs to call a method from a different component

Question

I'm new to React-Native and I've been trying to call a method from another component, but I can't seem to access refs properly. Here's how my render method looks like

<Content contentContainerStyle={styles.content}>
...
  <PostComponent style={styles.cardStyle} ref="cardRef" />
     <View style={styles.horizontalTextContainer}>
       <this.refs.cardRef.getText />
     </View>
...
</Content>

In the PostComponent component, here's the method that I'm trying to call:

  getText() {
    return (
      <Text>Hello</Text>
    );
  }

In the same component's constructor, I can use refs just fine to call a method like so:

constructor(props) {
    super(props);
    newthis = this
    this.state = {
      time: 20,
      cards: [],
    }
    var timer = setInterval(() => {
      this.setState({
      time: --this.state.time,
     })
     if(this.state.time == 0) {
        this.setState({
          time: 20,
        })
        this.refs.cardRef.timesUp();
      }
    }, 1000);
  }

Strangely, the ref works inside the setInverval method but not right outside it - how is the scope even working here? Also, if you notice I have a hacky "newthis" to save the global this - because in some methods of the component I can't access "this" (it's undefined).

Answer 1

In the constructor, when the call is made the component is still not mounted. refs can be safely accessed only after componentDidMount lifecycle method. Also string type refs are deprecated https://facebook.github.io/react/docs/refs-and-the-dom.html . Please use callback function syntax.

In your case, the refs are probably working in setInterval due to the time interval. The component would have mounted by 1000ms.

And to avoid hacky newThis , you can use arrow functions or bind this in the constructor. Most callback functions of the components have their own this context.

constructor(props) {
    super(props);
    newthis = this
    this.state = {
      time: 20,
      cards: [],
    }
 }
 componentDidMount() {
  this.timer = setInterval(() => {
      this.setState({
      time: --this.state.time,
     })
     if(this.state.time == 0) {
        this.setState({
          time: 20,
        })
        this.cardRef.timesUp();
      }
    }, 1000);
  }
  componentWillUnmount() {
   clearInterval(this.timer)
  }
...

<Content contentContainerStyle={styles.content}>
...
  <PostComponent style={styles.cardStyle} ref={(ref) => this.cardRef = ref} />
     <View style={styles.horizontalTextContainer}>
       {this.cardRef.getText()}
     </View>
...
</Content>