If I open and close a modal, while the timer has been running the play/pause button doesn't work anymore and the timer will keep on running.
Any advice much appreciated!
Here is a screen recording: https://www.dropbox.com/s/gczdpb6ir122jv1/Screen%20Recording%202020-05-03%20at%2014.14.58.mov?dl=0
Here is my code:
import React, { useState, Component } from 'react';
import { View, Button, Modal } from 'react-native';
import { Timer } from 'react-native-stopwatch-timer';
function Pomodoro(props) {
const [timerStart, setTimerStart] = useState(false);
const [timerReset, setTimerReset] = useState(false);
const [isSettingsVisible, setIsSettingsVisible] = useState(false);
const totalDuration = 100000;
const toggleTimer = () => {
setTimerStart(!timerStart);
setTimerReset(false);
};
const handleTimerComplete = () => {
setTimerStart(false);
setTimerReset(true);
};
const toggleModal = () => {
setIsSettingsVisible(!isSettingsVisible);
}
return (
<View style={{ alignItems: 'center', marginTop: 100 }}>
<Button title='Settings' onPress={toggleModal} />
<Modal visible={isSettingsVisible}>
<View style={{ marginTop: 100 }}>
<Button title="Close" onPress={toggleModal} />
</View>
</Modal>
<View>
<Timer
totalDuration={totalDuration}
start={timerStart}
reset={timerReset}
handleFinish={handleTimerComplete}
/>
</View>
<View>
<Button onPress={toggleTimer} title={!timerStart ? 'Start' : 'Pause' } />
</View>
</View>
);
}
export default Pomodoro;
If I open and close a modal, while the timer has been running the play/pause button doesn't work anymore and the timer will keep on running.
Any advice much appreciated!
Here is a screen recording: https://www.dropbox.com/s/gczdpb6ir122jv1/Screen%20Recording%202020-05-03%20at%2014.14.58.mov?dl=0
Here is my code: