react-native-timer-countdown-lucas v0.0.2

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

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