Calling Method in React Native using Refs Does Nothing - reactjs

Question

I'm making a simple pomodoro 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 reset, which I call from resetTimer 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 here in the docs. Any help resolving this issue would be appreciated!
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 = () => {
this.setState(prevState => ({
minutes: (prevState.pomodoro ? 5 : 25),
seconds: 0,
}))
}
decrement = () => {
if ((this.state.minutes+this.state.seconds)===0){
this.setState(prevState => ({
pomodoro: !prevState.pomodoro,
minutes: (prevState.pomodoro ? 25 : 5),
}))
} else{
if (this.props.start){
if (this.state.seconds===0){
this.setState(prevState => ({
minutes: prevState.minutes - 1,
seconds: 59,
}))
} else{
this.setState(prevState => ({
seconds: prevState.seconds - 1
}))
}
}
}
}
render() {
return (
<Text style={styles.time}>
{("0"+this.state.minutes).slice(-2)}:
{("0"+this.state.seconds).slice(-2)}
{this.props.start}
</Text>
);
}
}
export default class App extends React.Component {
constructor (props) {
super(props)
this.state = {
start: false,
pomodoro: false,
buttonText: "Start"
}
}
toggleStart = () => this.setState(prevState => ({
start: !prevState.start,
buttonText: (prevState.start ? "Start" : "Stop")
}))
resetTimer = () => {
this.toggleStart()
this._timer.reset()
}
render() {
return (
<View style={styles.container}>
<Timer
start={this.state.start}
pomodoro={this.state.pomodoro}
reset={this.state.reset}
toggleStart={() => this.toggleStart}
ref={component => { this._timer = component; }}
/>
<View style={styles.buttonRow}>
<Button
title={this.state.buttonText}
onPress={this.toggleStart}>
</Button>
<Button
title="Reset"
onPress={this.resetTimer}>
Timer.resetTime
</Button>
</View>
</View>
);
}
}
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'
},
});

Answer 1

Usually, you shouldn't have to call a childs function in the parent. When you find yourself in this situation, you might be overcomplicating your component structure. Why not move the reset button into the Timer component?
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 = () => this.setState(prevState({
minutes: (prevState.pomodoro ? 5 : 25),
seconds: 0,
}))
decrement = () => {
if ((this.state.minutes+this.state.seconds)===0){
this.setState(prevState => ({
pomodoro: !prevState.pomodoro,
minutes: (prevState.pomodoro ? 25 : 5),
}))
} else{
if (this.props.start){
if (this.state.seconds===0){
this.setState(prevState => ({
minutes: prevState.minutes - 1,
seconds: 59,
}))
} else{
this.setState(prevState => ({
seconds: prevState.seconds - 1
}))
}
}
}
}
render() {
return (
<View>
<Text style={styles.time}>
{("0"+this.state.minutes).slice(-2)}:
{("0"+this.state.seconds).slice(-2)}
{this.props.start}
</Text>
<View style={styles.buttonRow}>
<Button
title={this.props.buttonText}
onPress={this.props.toggleStart}>
</Button>
<Button
title="Reset"
onPress={this.reset}>
Timer.resetTime
</Button>
</View>
</View>
);
}
}
export default class App extends React.Component {
constructor (props) {
super(props)
this.state = {
start: false,
pomodoro: false,
buttonText: "Start"
}
}
toggleStart = () => this.setState(prevState => ({
start: !prevState.start,
buttonText: (prevState.start ? "Start" : "Stop")
}))
render() {
return (
<View style={styles.container}>
<Timer
start={this.state.start}
pomodoro={this.state.pomodoro}
toggleStart={this.toggleStart}
buttonText={this.state.buttonText}
/>
</View>
);
}
}
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'
},
});