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"
  }
});

Author

Noel Yoo

License

MIT