React Native Timer Countdown
A highly customizable countdown component for React Native (iOS and Android).
Install
npm install --save react-native-timer-countdown
or
yarn add react-native-timer-countdown
Usage
;;; const App = <View style=stylescontainer> <TimerCountdown initialSecondsRemaining=1000 * 60 onTick= console onComplete= console formatSecondsRemaining= { const remainingSec = Math; const seconds = ; const minutes = ; const hours = ; const s = seconds < 10 ? '0' + seconds : seconds; const m = minutes < 10 ? '0' + minutes : minutes; let h = hours < 10 ? '0' + hours : hours; h = h === '00' ? '' : h + ':'; return h + m + ':' + s; } allowFontScaling=true style= fontSize: 20 /> </View>; const styles = StyleSheet; ;
Props
Name | Description | Type | Required | Default Value |
---|---|---|---|---|
initialSecondsRemaining | The time remaining for the countdown (in ms) | number | ✓ | |
formatSecondsRemaining | A function that formats the secondsRemaining | func | ||
onTick | A function to call each tick. It returns the remaining seconds. | func | ||
onComplete | A function to call when the countdown completes | func | ||
allowFontScaling | to allow font scaling | bool | false | |
style | The custom styling which will be applied to the Text component | style |
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 /> <TimerCountdown initialSecondsRemaining=1000 * 60 /> </View>;; state = isPressed: false ; { return <View styles= flex: 1 > <Button title=`` onPress= { this; } /> </View> ; } const styles = StyleSheet;
Author
Noel Yoo
License
MIT