This interval timer that I'm trying to setup in React native. It has it's it's start, pause and reset at a method. I have it setup that the user can enter the minutes and seconds for the timer and then it runs the rest period (without user input at the moment) and then goes back to running the timer again for the input value.
How can I call the timer to pause while the timer.start() is still running? As mine is linked to startClickTimer which is linked to everything else?
Link to the intervail timer's npm: https://www.npmjs.com/package/interval-timer
code:
export default class IntervalTimer extends Component {
constructor(props) {
super(props);
this.state = {
minutesInput: '',
secondsInput:'',
numberOfSets: '', //idk if this is even working...it use to be 4
timer: null,
currentSeconds: null,
active: true,
};
this.startClickTimer = this.startClickTimer.bind(this);
}
componentWillUnmount() {
const timer = this.state.timer;
timer.stop()
}
startClickTimer() {
console.log('<> <> in startClickTimer')
const optionsActive = {
startTime: parseInt(this.state.minutesInput) * 60 * 1000 + parseInt(this.state.secondsInput) * 1000, //how long the timer will be set to
updateFrequency: 1000,
selfAdjust: true,
countdown: true,
};
const optionsRest = {
startTime: 3000, //how long the timer will be set to
updateFrequency: 1000,
selfAdjust: true,
countdown: true,
};
const timer = new Timer(optionsActive);
this.setState({timer: timer});
timer.on('update', () => {
console.log(timer.getTime.seconds);
this.setState({currentSeconds: timer.getTime.seconds});
});
timer.on('end', () => {
const active = this.state.active;
console.log('<> <> end timer, active', active);
timer.reset(active ? optionsRest : optionsActive);
this.setState({active: !active});
timer.start();
// this.setState({currentSeconds: timer.getTime.seconds});
});
timer.start();
console.log('<> <> timer started')
}
// getMinutes(){
// return this.timer.getTime.minutes;
// }
// navbar static navigationOptions = { title: ${Strings.ST204}
, };
navigateToScreen = (route) => () => {
const navigateAction = NavigationActions.navigate({
routeName: route,
});
this.props.navigation.dispatch(navigateAction);
}
//end of navbar
render() {
return (
<View style={{flex:1, justifyContent:"space-between",margin:30}}>
{this.state.timer && (
<Text>{this.state.active ? 'Active Timer: ' : 'Rest Timer: '}{this.state.timer.getTime.minutes} : {this.state.timer.getTime.seconds}</Text>
)}
<View style={styles.SideBySide}>
<TextInput
placeholder='Min'
keyboardType={'numeric'}
style={{
alignSelf: 'center',
marginRight: 5,
Text: " + "
}}
value={this.state.minutesInput} //need to parse this into a string, right now its a number and react complains
onChangeText={(text) => {
// console.log("<> <> text input onChange udpate")
this.setState({
minutesInput: text
})
}
}
/>
{/*<Text>:</Text>*/}
<TextInput
placeholder='Sec'
keyboardType={'numeric'}
style={{
alignSelf: 'center',
// margin: 50
}}
value={this.state.secondsInput} //need to parse this into a string, right now its a number and react complains
onChangeText={(text) => {
this.setState({
secondsInput: text
})
}
}
/>
</View>
Please login or Register to submit your answer