React-native: Pass event to other object

This is my first experience with JS/React/React Native. I don’t yet fully grasp mechanics of this framework, so be kind to me.

What I have :

<View style={styles.container}>
    <View style={styles.timerContainer}>
        <View style={styles.timerBar}>
            <Image style={styles.icon} source={require('../../img/time50.png')}/>
            {Timer}  //First
        </View>
        <View style={styles.timerBar}>
            <Image style={styles.icon} source={require('../../img/break50.png')}/>
            {Timer}  //Second
        </View>
    </View>
    <View style={styles.buttonContainer}>            
        <TouchableHighlight onPress={this.startWork}>
            <Image style={styles.imageButton} source={require('../../img/start.png')}/>
        </TouchableHighlight>
        <TouchableHighlight onPress={this.startBreak}>
            <Image style={styles.imageButton} source={require('../../img/break.png')}/>
        </TouchableHighlight>
        <TouchableHighlight onPress={this.stopWork}>
            <Image style={styles.imageButton} source={require('../../img/end.png')}/>
        </TouchableHighlight>
    </View>
</View>

Timer is a custom class, which will have ‘start’, ‘pause’ and ‘end’ methods. I want to call methods of both Timers when TouchableHighlight is pressed.

Overall it would look like this :

when first TouchableHighlight is pressed (startWork), Timer2.end and Timer1.start should be called, when second is pressed (startBreak), Timer1.pause, Timer2.start should be called, for third (stopWork) it would be Timer1.end, Timer2.end.

But how am I supposed to refer to these timers from onPress methods? Should I keep both Timers in some vars of parent class? I am totally stuck and have no idea where to start (and what’s acceptable). Such problem is not easily googlable (or I don’t know where to look). I would appreciate any help (solution, pointing to tutorial…).

When you render the timer components in this component you should assign a ref to each one of them, like

<Timer ref={r => this.timer1 = r}/>

Then in the Touchable callback functions you can call this.timer1.start()

Note: Cleaner ref setting would be to actually have another function, so you aren’t constantly binding in the render function:

setTimerOne = (r) => {
  this.timer1 = r;  
}

render() {
  <Timer ref={this.setTimerOne}/>
}