michaeljstevens / react-native-stopwatch-timer Goto Github PK

hi there it is better to get the individual seconds and minutes from getTime instead of getting a formatted value from it

Stopping the stopwatch does not stop counting the time. When you start the stopwatch again, it does not resume from the time it stopped. Instead,

Example scenario based on the TestApp example you provided:

• Start the stopwatch.
• Click "Stop" to stop the stopwatch on 00:00:05:00.
• Leave it stopped and wait about 10 seconds.
• Click "Start" to resume the stopwatch.

Expected stopwatch behavior: The stopwatch resumes from 00:00:05:000.
Actual behavior: The stopwatch resumes from about 00:00:15:000.

ummmmm it's kinda ugly?

    this.interval = this.interval ? this.interval : setInterval(() => {
        this.setState({elapsed: new Date() - this.state.startTime });
    }, 1);
  }

this.state.pausedTime deleted

getting the time from the stopwatch with getTime is not working as it keep showing my computer time only

So I am experiencing the issue , So when I press reset the Stopwatch goes back to 00:00:00 but when I press start again after pressing reset the stopwatch starts at 456294:34:08 and then starts counting up from there

The issue is not resolved properly as the more times we do start and stop it goes back more and more seconds in reverse then it shows like 0-1:55:46:342. Can you please take a look. Thanks in advance

I get this warning for the Timer component:

Warning: componentWillReceiveProps has been renamed, and is not recommended for use. See https://fb.me/react-unsafe-component-lifecycles for details.

• Move data fetching code or side effects to componentDidUpdate.
• If you're updating state whenever props change, refactor your code to use memoization techniques or move it to static getDerivedStateFromProps. Learn more at: https://fb.me/react-derived-state
• Rename componentWillReceiveProps to UNSAFE_componentWillReceiveProps to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run npx react-codemod rename-unsafe-lifecycles in your project source folder.

getMsecs function slows down the counter response so it switches seconds slower sometimes and it may even skip seconds sometime.

Hi, Is there a way for using multiple Timers in a FlatList?
Right now using 5 Timers at the same time makes other Timers unresponsive, and button onPress is not responding.
I know this is not an issue related directly to this component but I can't think of a way to make it work.

Any ideas?

If component is unmounted, the intervals set by setInterval never get cleared and the timer continues counting in the background. This is a problem and creates memory leaks.

I would love to be able to change the text style (options) on a state change.
eg; go from white text to green text when stopwatch is running.

Not sure how I would do this, any thoughts?

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;

i need to send the time to server so, while saving the time in local state variable using setstate({}) funtion under GetTime Callback the setstate function is undefined under gettime call back any workaround how to get the counter time ?

Resetting the timer with a new duration doesn't apply the new duration. I tried submitting a PR, as the fix is very simple, but pushes are not allowed.

I am working on an app where the stopwatch time must be stored to the database.
Is it possible to get the time that is displayed in the stopwatch?

Hey amazing git! Really appreciate your work.

I'm looking to reset and start the stopwatchTimer in one call. But it seems this doesn't work.

  componentDidUpdate(prevProps, prevState) {
  if ( some conditions ) {
       this.resetStopWatchTimer()
       this.setStopwatch();
//////

  }
  setStopwatch() {
    this.setState({stopwatchStart: true, stopwatchReset: false});
  };
  resetStopWatchTimer() {
    this.setState({stopwatchStart: false, stopwatchReset: true});
  }; 

In this case, it just keeps ticking.

Then I tried to do something inbetween like this

this.setState({stopwatchStart: true, stopwatchReset: true)}

And I think this "technically" works, but the stopwatch timer then loses its formatted time styling.

Anyways, I was curious what you think. I would be more than happy to contribute a fork if you think there's something missing here. I'm hoping for the chance that I'm actually just being dumb and there's a better way to do it. 👍

the style isn't changed when I change text size or background color, nothing happen.

Hello,

I'm using the code in the example (without the timer, only the stopwatch, and after 1 sec I got this weird bug with negative numbers replacing the normals numbers.

I'm on react-native 0.53, the code is the same as the example

I am developing one react native application for android and iOS.
In, Android everything is working fine but facing one issue with iOS app.

Issue :

• In one of my screen I am using Stopwatch component and few other buttons.
• When I am on that screen and send iOS application in background and resume again from background, all buttons stopped working and screen looks like it freeze completely.
• In this case, I will have to kill application and start again.

Please do needful.

Hello, thanks for this package.

Is there a where to specify what time to start the timer ?

like start from 01:22:00 instead of 00:00:00

Thanks.

Regards

currently I only need minutes and seconds, How I can disable hours?