talalmajali / react-native-countdown-component Goto Github PK

Warning: componentWillReceiveProps is deprecated and will be removed in the next major version. Use static getDerivedStateFromProps instead.

Please update the following components: CountDown

Learn more about this warning here:
https://fb.me/react-async-component-lifecycle-hooks

I think this change has broken the countdown: 28f0594

When I set the timeToShow property, the timer show only the fields I included in the array, but the timer itself doesn't work. For instance, it set timeToShow to ['M', 'S'] and until to {600}, and the timer will countdown only 2 seconds instead. If I remove the timeToShow property and leave it as default, everything works fine.

Hi, I am facing the count down unable to display in android, but ios can show it. May I know what's the problem?

Countdown text not properly showing, text cut off in onpluse mobile, view the screenshot, my timer countdown is 14 : 55 but it showing 1 : 5

Instead of the boxes , would it be possible to have a simple style mm:ss style?
For example: 10:34
I set the background to white but it looks strange without the :

React Native Environment Info:
System:
OS: Linux 4.4 Linux Mint 18 (Sarah)
CPU: (8) x64 Intel(R) Core(TM) i7-2600 CPU @ 3.40GHz
Memory: 1.49 GB / 15.65 GB
Shell: Unknown - /usr/bin/fish
Binaries:
Node: 8.11.3 - /usr/bin/node
npm: 6.4.1 - /usr/bin/npm
SDKs:
Android SDK:
API Levels: 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 7, 8
Build Tools: 19.0.0, 19.1.0, 20.0.0, 21.1.1, 21.1.2, 22.0.1, 23.0.1, 23.0.2, 23.0.3, 24.0.0, 24.0.1, 24.0.2, 24.0.3, 25.0.0, 25.0.1, 25.0.2, 25.0.3, 26.0.1, 26.0.2, 26.0.3, 27.0.3, 28.0.3
System Images: android-14 | ARM EABI v7a, android-16 | ARM EABI v7a, android-21 | Google APIs Intel x86 Atom_64, android-23 | Google APIs Intel x86 Atom
npmPackages:
react: 16.6.1 => 16.6.1
react-native: 0.57.5 => 0.57.5
npmGlobalPackages:
create-react-native-app: 2.0.2
react-native-cli: 2.0.1
react-native-create-library: 3.1.2

can you add the functionality of keeping the countdown running even if the app is in background?

The timer is working fine when the timer finishes after 1 minute but the output is 2 seconds left. Please tell me the solution.

is it possible to change padding and margin of the component ? i tried add style={{margin: 0, padding: 0}} unsuccessfully

It works properly in android.
But countdown timer goes twice as fast in ios.
-----------This is my code -------------

        <CountDown
          until={this.state.destroyTime}
          onFinish={() => this.timerAlert()}
          size={20}
          timeToShow={['M']}
          labelM={null}
          labelS={null}
          digitBgColor="transparent"
          digitTxtColor="#70a1ff"
        />

I would like to show the timer with maximum time, for example 00:60, until the user presses a Start button. At this point, the countdown will start.
However, passing until prop will always start the countdown, and I can't get it to show the max time without passing it until prop.
Thanks in advance for any tips.

timeLabels={{h: null, m: null, s: null}}
i only need h,m,s, i hope display 29:34:59
will be display problems

<CountDown
style={{paddingBottom:5}}
until={106500}
onFinish={() => console.log('finished')}
size={15}
timeToShow={['H', 'M', 'S']}
timeLabels={{h: null, m: null, s: null}}
showSeparator={true}
digitStyle={{backgroundColor: '#333', width:25, height:25}}
digitTxtStyle={{color: 'white'}}
/>

After the Timer start, how do i get the current value?
Like if i set until=10 , i want to set font color change to red when the time less than 5 ?

<CountDown
digitStyle={{backgroundColor: '#FFF'}}
until={10}
timeToShow={['H','M','S']}
onFinish={() => alert('Time's Up'}
onPress={() => alert('hello')}
size={20}
/>

seconds min boxes show only single digit and not the second digit

Hi, it's a good countdown timer. But I want to know how I pause and resume this timer. Please tell me.

Hiding the day component will be very usefull for this module. Is this avilable???

Hi! Thanks for a great component!

I'm having an issue with the counter showing the right value (until) after setting it on the emulator (Android Studio - Pixel XL2) but when I do the same thing after building the app (Expo, React Native) and installing it on my phone (Pixel xl2) the component does not update the displayed value after setting it. Only when the value is changed again it shows the OLD previous value (which is not right anymore).

Here's my code:

            <Timer 
                isrunning ={isRunning} 
                time={time}.      //Time is connected to the until prop in the timer
                onPress={() => this.TimePicker.open()}
                finishHandler = {onFinishHandler}
            />


        <TimePicker
            ref={ref => {
                this.TimePicker = ref;
            }}
            onCancel={onCancel}
            onConfirm={(hour, minute) => onConfirm(hour, minute)}
            maxHour = {59}
            hourUnit = {' Min'}
            maxMinute = {59}
            minuteUnit = {' Sec'}
            />

const onConfirm = (hour, minute) => {
this.TimePicker.close();
setTime(parseInt(minute) + parseInt(hour)*60)
}

TLDR: Component is updating in emulator but is not updating on built app (expo, react native) on phone (Google Pixel xl2)

I think there should be an example of resetting the timer on state or props change because I am trying and it's just not working at the moment. My code is as follows:
State:

this.state = {
      pinInput: "",
      pinSent: false,
      id: 1,
      until: 60 * 10,
      runCountdown: false
};

Render method:

<CountDown
    id={this.state.id.toString()}
    until={this.state.until}
    running={this.state.runCountdown}
     onFinish={() => alert("Finished")}
     // onPress={() => alert("hello")}
    size={24}
    timeToShow={["M", "S"]}
    timeLabels={{ m: "Minute(s)", s: "Second(s)" }}
    separatorStyle={{ color: colors.primary, textAlign: "center" }}
    showSeparator
/>

componentDidMount:

componentDidMount() {
    this._someAxiosRequest();
}

_someAxiosRequest:

_someAxiosRequest = _ => {
    this.setState({
      spinner: true,
      pinSent: false,
      runCountdown: false
    });
    axios
      .post(api, { email: this.props.user.email })
      .then(({ data }) => {
        console.log(data);
        this.setState({
          spinner: false,
          pinSent: true,
          id: ++this.state.id,
          until: 60 * 10,
          runCountdown: true
        });
      })
      .catch(err => {
        console.log(err);
        this.setState({ spinner: false });
      });
  };

i use this library in android and ios. when change Tab navigation and back, value of seconds part changed. example : 2 => 2.000001020

Any plans?

timer count down to negative when the app is in the background and reopen it 3 seconds or less before the timer ends.

hey, i just download the lib,
i just curious, can we change the separator from ':' to '-'

When onFinish is defined, this warning is issued: "Warning: Can't call setState (or forceUpdate) on an unmounted component. This is a no-op, but it indicates a memory leak in your application". This happens if in the custom onFinish method for instance the user navigates to other screen, but the next line is this.setState({until: 0}); which is triggered toward an unmounted component already. What I suggest is to move the this.setState({until: 0}); right after the if (until <= 1) and before the clearInterval(this.timer) in the updateTimer method.

Firstly thanks for this component , makes the developers life pretty easy .
```
<CountDown
id={this.state.id}
size={10}
until={5}
onFinish={() => {
this.setState({
isResendDisabled: false
});
}}
digitStyle={{
backgroundColor: "#FFF",
borderWidth: 0
}}
digitTxtStyle={{ color: "#000" }}
timeLabelStyle={{
color: "red",
fontWeight: "bold"
}}
separatorStyle={{ color: "#000" }}
timeToShow={["M", "S"]}
timeLabels={{ m: null, s: null }}
showSeparator
/>

However, im not able to the unit parts of the seconds , its only displaying 3 ,2 ,1,0 .Instead of 35,34,33,32...00

What could  be the issue ? Tried the example code and still the same issue.

hi
my code is;
<CountDown

                 timeToShow={['M', 'S']}
                 timeLabels={{ m: '', s: '' }}
                 digitStyle={{ backgroundColor: 'transparent' }}
                  showSeparator={true}
                 until={this.state.until}
                  size={moderateScale(20)}
               />

My problem is that it shows seconds first, then minutes!!! there isn't any styles. why?????!!!

Hey, great library!

The onFinish() prop is not triggered when the app is in the background.

Steve

It would be great if it supports up to miliseconds..
I implemented your code to support milisecons(by just adding calculated mili) but at the same time I couldn't get it right when having to render multiple timers at once like 4. I set timeout to call every 93 ms and one time seems rendering okay, but as soon as the number of timer increases, they get buggier and all respond slower than they should. Wondering if anyone have faced this kind of issue in terms of rending component in miliseconds degree.

Hi,

I use this countdown but when i see my console to analyse my logs, there are these lines "until = 2900".

How can i disable these logs ?

Thank you

Is it possible to add the timer to status bar and notification bar when app goes to background? something like the Android device’s built-in Clock app?

Hey! I'm trying to reduce the space between the Separator and the Digit Style, but the space is measured by the font size as the following code:

renderDigit = (d) => {
const {digitStyle, digitTxtStyle, size} = this.props;
return (
<View style={[
styles.digitCont,
digitStyle,
{width: size * 2.3, height: size * 2.6},
]}>
<Text style={[
styles.digitTxt,
{fontSize: size},
digitTxtStyle,
]}>
{d}


);
};

Is there someway to change this to have more control over the component size by padding or something like this?

Hi,
is it possible to keep the CountDown running even if the back button pressed and component unmounted?

Hello,
I'm trying to remove Days from showing. I'm using this code

<CountDown
      until={100}
      onFinish={() => alert('finished')}
      onPress={() => alert('hello')}
      size={12}
      digitBgColor={'#fff'}
      digitTxtColor={'#1CC625'}
      timeToShow={['H', 'M', 'S']}
      labelH={''}
      labelM={''}
      labelS={''}
/>

but when I run it, the component looping to create the component

• When passing in a new time based on a state change it doesn't update the timer to reflect state change.

Is there a way to restart a timer once the countdown is finished or to manually start the countdown (on button press for example)?

Tried this
<CountDown
until={3}
onFinish={() => alert('finished')}
onPress={() => alert('hello')}
size={20}
timeToShow={['1','1','48','10']}

  />

But timer is not displaying.

If you exit the application, for example, open the notification center several times, the decrement of time will go faster exponentially

when I refresh to reload data to get time countdown and set it for until props, but after 2 times refresh the countdown pause. 3rd I refresh, the countdown is running exactly. Please give me a solution. Thanks a lot.

Having no license on a repository means that you are disallowing the use of your component in any other projects, for any reason. This is usually not what is intended. (https://choosealicense.com/no-permission/)

If this module is meant to be open source, I'd suggest a permissive license like MIT.

Thanks!

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.

Above Error or warning show when the timer is finished after time.

<CountDown
until = {5}
size={14}
onFinish={() => { (this.state.otp_resend) ? console.log("Sorry No timer") : this.showresendbutton() }}
digitStyle={{backgroundColor: 'transparent',textAlign: 'left',color: '#cccccc', margin:0,height:10}}
digitTxtStyle={{color: '#000000',textAlign: 'left', margin:0}}
timeToShow={['M', 'S']}
timeLabels={{m: '', s: ''}}
style={{ textAlign: 'left', margin:0, }}
showSeparator
/>

showresendbutton= async () => {
this.setState({ otp_resend: true })
}

only one digit is showing in minutes and second.

I wish to restart the timer automatically once the timer finishes.

I've looked at the closed issue #12 ,

but if you pass the same until value using onFinish prop, the countdown does not restart.

However on many occasions the until value needs to be the same.

How do we solve the issue?

At the end of the first time, go to the onFinish method, reset the time, and transfer different id and time. Debugging finds that the new data has been passed in, but there is no new time on the component for countdown, and the "00:00:00" is still displayed.

constructor(props) {
super(props);
this.timeid = '1',
this.state = {
endtime: 3,
};
}
onFinish() {
this.timeid = '2'
this.setState({
endtime: 30,
});

}

<CountDown
id={this.timeid}
size={12}
until={this.state.endtime}
onFinish={() => this.onFinish()}

                digitStyle={{ backgroundColor: 'black', borderWidth: 4, }}
                digitTxtStyle={{ color: 'white', fontSize: 14 }}
                timeLabelStyle={{ color: 'red', fontWeight: 'bold' }}
                separatorStyle={{ color: 'black' }}
                timeToShow={['H', 'M', 'S']}
                timeLabels={{ m: null, s: null }}
                showSeparator
            />

As title says.