title: Calling Method in React Native using Refs Does Nothing
body: <p>I'm making a simple <a href="https://en.wikipedia.org/wiki/Pomodoro_Technique" rel="nofollow noreferrer">pomodoro</a> app in React Native, and I came across a problem with calling a method from a child component. In the code below, the method I am trying to call is <code>reset</code>, which I call from <code>resetTimer</code> in the parent. This does not work, though no errors are produced; console.logging within the method also produces nothing. I followed the model outlined <a href="https://facebook.github.io/react-native/docs/direct-manipulation.html" rel="nofollow noreferrer">here</a> in the docs. Any help resolving this issue would be appreciated!</p>
  
  <pre><code>import React from 'react';
  import { StyleSheet, Text, View, Button } from 'react-native';
  
  class Timer extends React.Component {
      constructor(props) {
          super(props)
          this.state = {
              minutes: 25,
        seconds: 0,
        pomodoro: props.pomodoro,
          }
      }
  
    componentDidMount() {
      this.interval = setInterval(this.decrement, 1000)
    }
  
    reset = () =&gt; {
      this.setState(prevState =&gt; ({
        minutes: (prevState.pomodoro ? 5 : 25),
        seconds: 0,
      }))
    }
  
    decrement = () =&gt; {
      if ((this.state.minutes+this.state.seconds)===0){
        this.setState(prevState =&gt; ({
          pomodoro: !prevState.pomodoro,
          minutes: (prevState.pomodoro ? 25 : 5),
        }))
      } else{
        if (this.props.start){
          if (this.state.seconds===0){
            this.setState(prevState =&gt; ({
              minutes: prevState.minutes - 1,
              seconds: 59,
            }))      
          } else{
            this.setState(prevState =&gt; ({
              seconds: prevState.seconds - 1
            }))
          }
        }
      }
    }
    render() {
      return (
      &lt;Text style={styles.time}&gt;
        {("0"+this.state.minutes).slice(-2)}:
        {("0"+this.state.seconds).slice(-2)}
        {this.props.start}
      &lt;/Text&gt;
      );
    }
  }
  
  export default class App extends React.Component {
    constructor (props) {
          super(props)
          this.state = {
              start: false,
        pomodoro: false,
        buttonText: "Start"
          }
    }
  
    toggleStart = () =&gt; this.setState(prevState =&gt; ({
      start: !prevState.start,
      buttonText: (prevState.start ? "Start" : "Stop")
    }))
  
    resetTimer = () =&gt; {
      this.toggleStart()
      this._timer.reset()
    }
  
    render() {
      return (
        &lt;View style={styles.container}&gt;
          &lt;Timer 
          start={this.state.start} 
          pomodoro={this.state.pomodoro}
          reset={this.state.reset}
          toggleStart={() =&gt; this.toggleStart}
          ref={component =&gt; { this._timer = component; }}
          /&gt;
          &lt;View style={styles.buttonRow}&gt; 
            &lt;Button 
            title={this.state.buttonText} 
            onPress={this.toggleStart}&gt;
            &lt;/Button&gt;
  
            &lt;Button 
            title="Reset"
            onPress={this.resetTimer}&gt;
            Timer.resetTime
            &lt;/Button&gt;
          &lt;/View&gt;
        &lt;/View&gt;
      );
      }
  }
  
  const styles = StyleSheet.create({
    container: {
      flex: 1,
      backgroundColor: '#fff',
      alignItems: 'center',
      justifyContent: 'center',
    },
    time: {
      fontSize: 70,
      color: 'tomato',
      alignItems: 'center',
      justifyContent: 'center',
    },
    buttonRow: {
      flexDirection: 'row'
    },
  });
  </code></pre>