Stopwatch is used to measure spending time of a certain activity between activation and deactivation time. In today’s life Stopwatch is used to calculate running time for health purpose, question asking time for quiz contest purpose and etc. In this tutorial we would Create Stopwatch Timer for both android and iOS react native mobile applications. The Stopwatch Timer has seconds and minutes count, i was unable to add the milliseconds countdown here guys because the setInterval() function is not working properly fast in milliseconds count. So i am making the Stopwatch in seconds and minutes count. Guys if you know the solution to adding the milliseconds count here with proper speed then please comment below. Thank you guys .
Content in this project React Native Create Stopwatch Timer Android iOS Example Tutorial:
1. Import StyleSheet, Text, View and TouchableOpacity component in your project.
|
1
2
3
|
import React, { Component } from ‘react’;
import { StyleSheet, Text, View, TouchableOpacity } from ‘react-native’;
|
2. Create constructor() in your main class. Inside the constructor() make 4 states named as timer, minutes_Counter, seconds_Counter & startDisable.
- timer : Used to hold the timer setInterval() object.
- minutes_Counter : Used to hold the minutes count.
- seconds_Counter : Used to hold the seconds count.
- startDisable : To enable and disable the Start & Clear button while stop watch is running.
|
1
2
3
4
5
6
7
8
9
10
|
constructor(props) {
super(props);
this.state = {
timer: null,
minutes_Counter: ’00’,
seconds_Counter: ’00’,
startDisable: false
}
}
|
3. Create componentWillUnmount() inbuilt life cycle function and clear the timer after app minimizing.
|
1
2
3
|
componentWillUnmount() {
clearInterval(this.state.timer);
}
|
4. Create a function named as onButtonStart(). We would call this function on Start button click event. Using this function we would start the stopwatch and start calculating time in seconds and minutes format. The JavaScript setInterval() is used here with 1000 time parameter which represents 1 Second. So it will update the time after each 1 second passed.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
onButtonStart = () => {
let timer = setInterval(() => {
var num = (Number(this.state.seconds_Counter) + 1).toString(),
count = this.state.minutes_Counter;
if (Number(this.state.seconds_Counter) == 59) {
count = (Number(this.state.minutes_Counter) + 1).toString();
num = ’00’;
}
this.setState({
minutes_Counter: count.length == 1 ? ‘0’ + count : count,
seconds_Counter: num.length == 1 ? ‘0’ + num : num
});
}, 1000);
this.setState({ timer });
this.setState({startDisable : true})
}
|
5. Create a function named as onButtonStop(). In this function we would simply stop the setInterval() function and make the state value true again so the Start and Clear button will be enabled again.
|
1
2
3
4
|
onButtonStop = () => {
clearInterval(this.state.timer);
this.setState({startDisable : false})
}
|
6. Create a function named as onButtonClear(). In this function we would set the timer value to null so it will stopped and set all the values to Zero again.
|
1
2
3
4
5
6
7
|
onButtonClear = () => {
this.setState({
timer: null,
minutes_Counter: ’00’,
seconds_Counter: ’00’,
});
}
|
7. Create a Text component to Show minutes and seconds value in render’s return block with 3 Touchable Opacity buttons.
|
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
|
render() {
return (
<View style={styles.MainContainer}>
<Text style={styles.counterText}>{this.state.minutes_Counter} : {this.state.seconds_Counter}</Text>
<TouchableOpacity
onPress={this.onButtonStart}
activeOpacity={0.6}
style={[styles.button, { backgroundColor: this.state.startDisable ? ‘#B0BEC5’ : ‘#FF6F00’ }]}
disabled={this.state.startDisable} >
<Text style={styles.buttonText}>START</Text>
</TouchableOpacity>
<TouchableOpacity
onPress={this.onButtonStop}
activeOpacity={0.6}
style={[styles.button, { backgroundColor: ‘#FF6F00’}]} >
<Text style={styles.buttonText}>STOP</Text>
</TouchableOpacity>
<TouchableOpacity
onPress={this.onButtonClear}
activeOpacity={0.6}
style={[styles.button, { backgroundColor: this.state.startDisable ? ‘#B0BEC5’ : ‘#FF6F00’ }]}
disabled={this.state.startDisable} >
<Text style={styles.buttonText}> CLEAR </Text>
</TouchableOpacity>
</View>
);
}
|
8. Creating Style.
|
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
|
const styles = StyleSheet.create({
MainContainer: {
flex: 1,
justifyContent: ‘center’,
alignItems: ‘center’,
backgroundColor: ‘#F5FCFF’,
},
button: {
width: ‘80%’,
paddingTop:8,
paddingBottom:8,
borderRadius:7,
marginTop: 10
},
buttonText:{
color:‘#fff’,
textAlign:‘center’,
fontSize: 20
},
counterText:{
fontSize: 28,
color: ‘#000’
}
});
|
9. 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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
|
import React, { Component } from ‘react’;
import { StyleSheet, Text, View, TouchableOpacity } from ‘react-native’;
export default class StopWatch extends Component {
constructor(props) {
super(props);
this.state = {
timer: null,
minutes_Counter: ’00’,
seconds_Counter: ’00’,
startDisable: false
}
}
componentWillUnmount() {
clearInterval(this.state.timer);
}
onButtonStart = () => {
let timer = setInterval(() => {
var num = (Number(this.state.seconds_Counter) + 1).toString(),
count = this.state.minutes_Counter;
if (Number(this.state.seconds_Counter) == 59) {
count = (Number(this.state.minutes_Counter) + 1).toString();
num = ’00’;
}
this.setState({
minutes_Counter: count.length == 1 ? ‘0’ + count : count,
seconds_Counter: num.length == 1 ? ‘0’ + num : num
});
}, 1000);
this.setState({ timer });
this.setState({startDisable : true})
}
onButtonStop = () => {
clearInterval(this.state.timer);
this.setState({startDisable : false})
}
onButtonClear = () => {
this.setState({
timer: null,
minutes_Counter: ’00’,
seconds_Counter: ’00’,
});
}
render() {
return (
<View style={styles.MainContainer}>
<Text style={styles.counterText}>{this.state.minutes_Counter} : {this.state.seconds_Counter}</Text>
<TouchableOpacity
onPress={this.onButtonStart}
activeOpacity={0.6}
style={[styles.button, { backgroundColor: this.state.startDisable ? ‘#B0BEC5’ : ‘#FF6F00’ }]}
disabled={this.state.startDisable} >
<Text style={styles.buttonText}>START</Text>
</TouchableOpacity>
<TouchableOpacity
onPress={this.onButtonStop}
activeOpacity={0.6}
style={[styles.button, { backgroundColor: ‘#FF6F00’}]} >
<Text style={styles.buttonText}>STOP</Text>
</TouchableOpacity>
<TouchableOpacity
onPress={this.onButtonClear}
activeOpacity={0.6}
style={[styles.button, { backgroundColor: this.state.startDisable ? ‘#B0BEC5’ : ‘#FF6F00’ }]}
disabled={this.state.startDisable} >
<Text style={styles.buttonText}> CLEAR </Text>
</TouchableOpacity>
</View>
);
}
}
const styles = StyleSheet.create({
MainContainer: {
flex: 1,
justifyContent: ‘center’,
alignItems: ‘center’,
backgroundColor: ‘#F5FCFF’,
},
button: {
width: ‘80%’,
paddingTop:8,
paddingBottom:8,
borderRadius:7,
marginTop: 10
},
buttonText:{
color:‘#fff’,
textAlign:‘center’,
fontSize: 20
},
counterText:{
fontSize: 28,
color: ‘#000’
}
});
|
Screenshots:
Also Read :
Remove Text Input Bottom Underline in React Native Android iOS
React Native Show Floating Action Button Above ListView FlatList
React Native Create Drop Shadow Effect Text in Android iOS Example
React Native Set Default PlaceHolder Text in TextInput Component
React Native Set View Width Height in Fixed Dimensions Android iOS
