⏱ A minimal and customizable countdown timer
for React Native (iOS and Android)
npm install --save react-native-timer-countdownor
yarn add react-native-timer-countdownimport React from "react";
import { StyleSheet, View } from "react-native";
import TimerCountdown from "react-native-timer-countdown";
const App = () => (
<View style={styles.container}>
<TimerCountdown
initialMilliseconds={1000 * 60}
onTick={(milliseconds) => console.log("tick", milliseconds)}
onExpire={() => console.log("complete")}
formatMilliseconds={(milliseconds) => {
const remainingSec = Math.round(milliseconds / 1000);
const seconds = parseInt((remainingSec % 60).toString(), 10);
const minutes = parseInt(((remainingSec / 60) % 60).toString(), 10);
const hours = parseInt((remainingSec / 3600).toString(), 10);
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.create({
container: {
flex: 1,
backgroundColor: "#fff",
alignItems: "center",
justifyContent: "center"
}
});
export default App;| Name | Type | Description | Required |
|---|---|---|---|
| initialMilliseconds | number | The remaining milliseconds for the countdown | Yes |
| formatMilliseconds | function (milliseconds: number) => void |
A function that formats the milliseconds | No |
| onTick | function (milliseconds: number) => void |
A function to call each tick | No |
| onExpire | function () => void |
A function to call when the countdown finishes | No |
| allowFontScaling | boolean | A boolean for allowFontScaling. The default is false |
No |
| style | object | Custom style to be applied to the Text component | No |
buttons clicked -> state changes -> react rerenders -> timer restarts
Provided the state changes only occur in component B, A component will not rerender. As a result, no more unintended timer restarts.
import React, { Component } from "react";
import { StyleSheet, Button, View } from "react-native";
import TimerCountdown from "react-native-timer-countdown";
const A = () => (
<View style={styles.container}>
<B />
<TimerCountdown initialMilliseconds={1000 * 60} />
</View>
);
export default A;
class B extends Component {
state = { isPressed: false };
render() {
return (
<View styles={{ flex: 1 }}>
<Button
title={`${this.state.isPressed ? "Button Pressed" : "Button"}`}
onPress={() => {
this.setState({ isPressed: true });
}}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff",
alignItems: "center",
justifyContent: "center"
}
});MIT
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent