React Native Timer Countdown

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

Install

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

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

Author

Noel Yoo

License

MIT