Skip to content

Modal disables start/pause button #27

@peterkortvel

Description

@peterkortvel

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;

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions