React Native Timer Countdown

A customizable countdown component for React Native (iOS and Android).


npm install --save react-native-timer-countdown


yarn add react-native-timer-countdown


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

render() {
    return (
            onTick={secondsRemaining => console.log('tick', secondsRemaining)}
            onTimeElapsed={() => console.log('complete')}
            style={{ fontSize: 20 }}


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


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 />
export default A;

class B extends Component {
  state = { isPressed: false };
  render() {
    return (
      <View styles={{ flex: 1 }}>
          title={`${this.state.isPressed ? "Button Pressed" : "Button"}`}
          onPress={() => {
            this.setState({ isPressed: true });

const Timer = () => (
    initialSecondsRemaining={1000 * 60}
    onTick={secondsRemaining => console.log("tick", secondsRemaining)}
    onTimeElapsed={() => console.log("complete")}
    style={{ fontSize: 20 }}

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