Skip to content
A minimal and customizable countdown timer for React Native (iOS and Android)
Branch: master
Clone or download
Latest commit 6079bb3 Mar 20, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github initial commit Mar 17, 2019
.editorconfig
.gitignore initial commit Mar 17, 2019
.npmignore
.prettierignore initial commit Mar 17, 2019
.prettierrc
.travis.yml
CONTRIBUTING.md initial commit Mar 17, 2019
LICENSE initial commit Mar 17, 2019
README.md docs(README.md): add badge for Travis CI build Mar 20, 2019
demo.gif initial commit Mar 17, 2019
index.js
index.tsx
package-lock.json
package.json chore: bump 4.1.0 Mar 20, 2019
tsconfig.json initial commit Mar 17, 2019
tslint.json initial commit Mar 17, 2019

README.md

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.

Read our contribution guidelines.

Author

Noel Yoo

License

MIT

You can’t perform that action at this time.