noelyoo / React Native Timer Countdown
Licence: mit
⏱ A minimal and customizable countdown timer for React Native (iOS and Android)
Stars: ✭ 53
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to React Native Timer Countdown
Reactnativerubychina
ReactNative iOS APP for RubyChina
Stars: ✭ 637 (+1101.89%)
Mutual labels: reactnative
Bluewallet
Bitcoin thin client for iOS & Android. Built with React Native
Stars: ✭ 878 (+1556.6%)
Mutual labels: reactnative
Ecoleta
Projecto construído durante o Next Level Week 1 - Ecoleta by @Rocketseat
Stars: ✭ 46 (-13.21%)
Mutual labels: reactnative
Countdownlabel
Simple countdown UILabel with morphing animation, and some useful function.
Stars: ✭ 714 (+1247.17%)
Mutual labels: countdown
Gssoc2021 Hotelontouch
👨🔧👨🔧Manage your all hotel services at one place - This is the project repository for HotelOnTouch Project and this project is actively looking for new contributors👨🔧👩🏫
Stars: ✭ 30 (-43.4%)
Mutual labels: reactnative
React Native Audio Toolkit
Cross-platform audio library for React Native
Stars: ✭ 861 (+1524.53%)
Mutual labels: reactnative
Basic Redux React Native Boilerplate
Basic implementation of Redux + React Native
Stars: ✭ 44 (-16.98%)
Mutual labels: reactnative
Termdown
Countdown timer and stopwatch in your terminal
Stars: ✭ 749 (+1313.21%)
Mutual labels: countdown
Rn Countdown
⏰ 纯 JavaScript 实现的针对 React Native App 的倒计时组件。
Stars: ✭ 19 (-64.15%)
Mutual labels: countdown
Awesome Ui Component Library
Curated list of framework component libraries for UI styles/toolkit
Stars: ✭ 702 (+1224.53%)
Mutual labels: reactnative
Gittermobile
Unofficial Gitter.im (chat for GitHub) client for iOS and Android. [build with react-native]
Stars: ✭ 569 (+973.58%)
Mutual labels: reactnative
Expo Chroma Key Camera
Live green-screen effect with Expo and THREE.js
Stars: ✭ 28 (-47.17%)
Mutual labels: reactnative
Grocerystore With Server
Grocery Store with server integration
Stars: ✭ 51 (-3.77%)
Mutual labels: reactnative
React Native Markdown Package
React native markdown package is a Library for implementing markdown syntax in React Native
Stars: ✭ 50 (-5.66%)
Mutual labels: reactnative
React Native Heic Converter
Convert your HEIC files with React Native
Stars: ✭ 43 (-18.87%)
Mutual labels: reactnative
React Native Timer Countdown
⏱ A minimal and customizable countdown timer
for React Native (iOS and Android)
Installation
npm install --save react-native-timer-countdown
or
yarn add react-native-timer-countdown
Example
import 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;
Props
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 |
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.
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"
}
});
Contributing
We recommend the community help us make improvements. To report bugs please create an issue in this repository.
contribution guidelines.
Read ourAuthor
License
MIT
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].