A countdown timer is a reverse virtual clock which runs in reversible mode. We have seen the Countdown Timer in many mobile applications where after a certain time a particular task executed. This happens when the Countdown Timer reaches to Zero value. In react native we can make beautiful fully custom Countdown Timer using react-native-countdown-component NPM library. This library comes with many customization features also with on count down timer finish function calling feature. So let’s get started .
Contents in this project React Native Create Custom Countdown Timer for Android iOS Tutorial:
1. Open your react native project folder in command prompt or Terminal & execute below command to install the react-native-countdown-component library.
|
1
|
npm install react–native–countdown–component —save
|
Screenshot of CMD:
2. Open your project’s App.js file and Import StyleSheet, View, Text, Platform and Alert component in your project.
|
1
2
3
|
import React, { Component } from ‘react’;
import { StyleSheet, View, Text, Platform, Alert } from ‘react-native’;
|
3. Import Countdown component from react-native-countdown-component library in your project.
|
1
|
import CountDown from ‘react-native-countdown-component’;
|
4. Create 2 function named as onDoneCountdown() and onPressCountdown().
onDoneCountdown : Calls when countdown finish.
onPressCountdown : Calls when user press the countdown component.
|
1
2
3
4
5
6
7
8
9
10
11
|
onDoneCountdown = () => {
Alert.alert(“Countdown Finish.”);
}
onPressCountdown = () => {
Alert.alert(“Countdown Component Press.”);
}
|
5. Create Countdown component in render’s return block in Root View component.
until : Here 600 represents 600 seconds so it means 10 minutes. It will calculate seconds automatically into minutes and if you will give seconds more than 60 minutes then it will convert them into hours.
onFinish : Calls on countdown finish.
onPress : Calls on count down press event.
size : Size of countdown component
There are 14 different type of props available in Countdown timer library. You can learn about them here on its official GitHub page.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
render() {
return (
<View style={styles.MainContainer}>
<CountDown
until={600}
onFinish={this.onDoneCountdown}
onPress={this.onPressCountdown}
size={20}
/>
</View>
);
}
|
6. Creating style.
|
1
2
3
4
5
6
7
8
9
10
|
const styles = StyleSheet.create({
MainContainer: {
flex: 1,
paddingTop: (Platform.OS) === ‘ios’ ? 20 : 0,
alignItems: ‘center’,
justifyContent: ‘center’,
}
});
|
7. Complete source code for App.js file class.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
|
import React, { Component } from ‘react’;
import { StyleSheet, View, Text, Platform, Alert } from ‘react-native’;
import CountDown from ‘react-native-countdown-component’;
export default class App extends Component {
onDoneCountdown = () => {
Alert.alert(“Countdown Finish.”);
}
onPressCountdown = () => {
Alert.alert(“Countdown Component Press.”);
}
render() {
return (
<View style={styles.MainContainer}>
<CountDown
until={600}
onFinish={this.onDoneCountdown}
onPress={this.onPressCountdown}
size={20}
/>
</View>
);
}
}
const styles = StyleSheet.create({
MainContainer: {
flex: 1,
paddingTop: (Platform.OS) === ‘ios’ ? 20 : 0,
alignItems: ‘center’,
justifyContent: ‘center’,
}
});
|
Screenshots:
Also Read :
The Emulator Process for AVD was Killed Windows 7,8.1,10 Error Solution
Set Text Color in React Native Android iOS Tutorial
React Native Integrate Mapbox in Android iOS Example Tutorial
React Native Override Android Hardware Back Button Behavior
React Native Getting Started With React Navigation 3.x Tutorial to Add Activity
