react-native-hq-times
v1.0.12
Published
HQ Rentals Times
Downloads
8
Readme
HQ Rentals Times
A React Native Timer Counter Add-ons
Install
npm install --save react-native-hq-times
or
yarn add react-native-hq-times
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"
}
});
License
MIT