React Native Timer Countdown

A 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

import TimerCountdown from 'react-native-timer-countdown';

render() {
    return (
        <TimerCountdown
            initialSecondsRemaining={1000*60}
            onTick={secondsRemaining => console.log('tick', secondsRemaining)}
            onTimeElapsed={() => console.log('complete')}
            allowFontScaling={true}
            style={{ fontSize: 20 }}
        />
    )
}

Props

Name Description Type Required Default Value
initialSecondsRemaining The time remaining for the countdown (in ms) number ✓
interval The time between timer ticks (in ms). number 1000ms
allowFontScaling to allow font scaling bool false
style The custom styling which will be applied to the Text component style
formatSecondsRemaining A function that formats the secondsRemaining func
onTick A function to call each tick. It returns the remaining seconds. func
onTimeElapsed A function to call when the countdown completes func

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 "./TimerCountdown";

const A = () => (
  <View style={styles.container}>
    <B />
    <Timer />
  </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 Timer = () => (
  <TimerCountdown
    initialSecondsRemaining={1000 * 60}
    onTick={secondsRemaining => console.log("tick", secondsRemaining)}
    onTimeElapsed={() => console.log("complete")}
    allowFontScaling={true}
    style={{ fontSize: 20 }}
  />
);

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center"
  }
});

GitHub