React Native Timer Countdown
A customizable countdown component for React Native (iOS and Android).
Install
npm install --save react-native-timer-countdown-lucas
Usage
; { return <TimerCountdown initialSecondsRemaining=1000*60 onTick= console onTimeElapsed= console allowFontScaling=true style= fontSize: 20 /> }
Props
Name | Description | Type | Required | Default Value |
---|---|---|---|---|
initialSecondsRemaining | The time remaining for the countdown (in ms) | number | ✓ | |
interval | The time between timer ticks (in ms). | number | 1000ms | |
allowFontScaling | to allow font scaling | bool | false | |
style | The custom styling which will be applied to the Text component | style | ||
formatSecondsRemaining | A function that formats the secondsRemaining | func | ||
onTick | A function to call each tick. It returns the remaining seconds. | func | ||
onTimeElapsed | A function to call when the countdown completes | func |
FAQ
Why does this timer restart whenever I click any button?
What's happening
buttons clicked -> state changes -> react rerenders -> timer restarts
How to not to restart the timer component
Provided the state changes only occur in component B, A component will not rerender. As a result, no more unintended timer restarts.
;;; const A = <View style=stylescontainer> <B /> <Timer /> </View>;; state = isPressed: false ; { return <View styles= flex: 1 > <Button title=`` onPress= { this; } /> </View> ; } const Timer = <TimerCountdown initialSecondsRemaining=1000 * 60 onTick= console onTimeElapsed= console allowFontScaling=true style= fontSize: 20 />; const styles = StyleSheet;
Author
Noel Yoo
License
MIT