https://github.com/hoaphantn7604/react-native-element-timer
A component that displays a timer and countdown for React Native.
https://github.com/hoaphantn7604/react-native-element-timer
clock components countdown elements react react-native react-native-countdown react-native-timer timer
Last synced: 3 months ago
JSON representation
A component that displays a timer and countdown for React Native.
- Host: GitHub
- URL: https://github.com/hoaphantn7604/react-native-element-timer
- Owner: hoaphantn7604
- License: mit
- Created: 2021-06-25T00:59:30.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2022-11-21T13:25:36.000Z (almost 3 years ago)
- Last Synced: 2025-04-10T20:38:07.510Z (6 months ago)
- Topics: clock, components, countdown, elements, react, react-native, react-native-countdown, react-native-timer, timer
- Language: TypeScript
- Homepage:
- Size: 490 KB
- Stars: 31
- Watchers: 2
- Forks: 8
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# react-native-element-timer
A component that displays a timer and countdown for React Native.
Implemented using [react-native-background-timer](https://github.com/ocetnik/react-native-background-timer)
## Getting started
```js
npm install react-native-element-timer --save
```
or
```js
yarn add react-native-element-timer
```
#### Demo
#### Timer Props
| Props | Type | isRequire | Description |
| ------------------ | -------------------- | --------- | --------------------------------------- |
| initialSeconds | Number | No | Initial seconds, defalut is 0 |
| autoStart | Boolean | No | Auto start timer |
| start | ref.start() | Yes | Start timer |
| pause | ref.pause() | Yes | Pause timer |
| resume | ref.resume() | Yes | Resume timer |
| stop | ref.stop() | Yes | Stop timer |
| style | ViewStyle | No | Styling container view |
| fontFamily | String | No | Customize font style |
| textStyle | TextStyle | No | Styling text |
| formatTime | hh:mm:ss or ss | No | Format time |
| onTimes | (seconds) => void | No | callback when running time |
| onPause | (seconds) => void | No | Callback when the pause event is called |
| onEnd | (seconds) => void | No | Callback when the stop event is called |
#### Countdown Props
| Props | Type | isRequire | default |
| ------------------ | -------------------- | --------- | --------------------------------------- |
| initialSeconds | Number | Yes | Initial seconds |
| autoStart | Boolean | No | Auto start timer |
| start | ref.start() | Yes | Start timer |
| pause | ref.pause() | Yes | Pause timer |
| resume | ref.resume() | Yes | Resume timer |
| stop | ref.stop() | Yes | Stop timer |
| style | ViewStyle | No | Styling container view |
| fontFamily | String | No | Customize font style |
| textStyle | TextStyle | No | Styling text |
| formatTime | hh:mm:ss or ss | No | Format time |
| onTimes | (seconds) => void | No | callback when running time |
| onPause | (seconds) => void | No | Callback when the pause event is called |
| onEnd | (seconds) => void | No | Callback when the stop event is called |
## Usage
```javascript
import React, {useRef} from 'react';
import {StyleSheet, Button, Text, SafeAreaView} from 'react-native';
import {Timer, Countdown} from 'react-native-element-timer';
const TimerScreen = _props => {
const timerRef = useRef(null);
const countdownRef = useRef(null);
return (
Timer:
{}}
onPause={e => {}}
onEnd={e => {}}
/>
{
timerRef.current.start();
}}
/>
{
timerRef.current.pause();
}}
/>
{
timerRef.current.resume();
}}
/>
{
timerRef.current.stop();
}}
/>
Countdown:
{}}
onPause={e => {}}
onEnd={(e) => {}}
/>
{
countdownRef.current.start();
}}
/>
{
countdownRef.current.pause();
}}
/>
{
countdownRef.current.resume();
}}
/>
{
countdownRef.current.stop();
}}
/>
);
};
export default TimerScreen;
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
padding: 20,
},
text: {
fontWeight: 'bold',
fontSize: 16,
marginTop: 40,
},
timer: {
marginVertical: 10,
},
timerText: {
fontSize: 20,
},
button: {
marginVertical: 5,
backgroundColor: 'white',
borderRadius: 24,
width: 100,
},
});
```
## Donate
Support maintainers with a donation and help them continue with activities.
