talalmajali / react-native-countdown-component Goto Github PK
View Code? Open in Web Editor NEWReact Native CountDown
License: MIT License
React Native CountDown
License: MIT License
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 })
}
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.
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
Hi,
is it possible to keep the CountDown running even if the back button pressed and component unmounted?
I think this change has broken the countdown: 28f0594
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 });
});
};
Hey, great library!
The onFinish() prop is not triggered when the app is in the background.
Steve
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?
The timer is working fine when the timer finishes after 1 minute but the output is 2 seconds left. Please tell me the solution.
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)
is it possible to change padding and margin of the component ? i tried add style={{margin: 0, padding: 0}} unsuccessfully
Hiding the day component will be very usefull for this module. Is this avilable???
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,
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
seconds min boxes show only single digit and not the second digit
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}
/>
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!
Tried this
<CountDown
until={3}
onFinish={() => alert('finished')}
onPress={() => alert('hello')}
size={20}
timeToShow={['1','1','48','10']}
/>
But timer is not displaying.
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'}}
/>
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 :
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.
can you add the functionality of keeping the countdown running even if the app is in background?
Hi, it's a good countdown timer. But I want to know how I pause and resume this timer. Please tell me.
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
/>
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.
Is there a way to restart a timer once the countdown is finished or to manually start the countdown (on button press for example)?
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 use this library in android and ios. when change Tab navigation and back, value of seconds part changed. example : 2 => 2.000001020
As title says.
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, I am facing the count down unable to display in android, but ios can show it. May I know what's the problem?
hey, i just download the lib,
i just curious, can we change the separator from ':' to '-'
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
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?
Any plans?
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.
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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.