The Date() function has many sub-functions which is used to retrieve current timing Hours, minutes and seconds. Getting existing time in react native android iOS app from real device is very useful for server applications, where developer needs to obtain system time on login applications or chatting applications so it can show the time of sent data to user. So in this tutorial we would going to create a react native android iOS app to Get current time in 12 hours AM PM format in real device. We would also making the Live Digital Clock in our this app using setInterval() function. The clocks runs in real time with seconds update and when application user clicks on button it would fetch the current time and show inside Alert dialog message.
Contents in this project Get current time in 12 hours AM PM format in React Native Android iOS App with Live Digital Clock:
1. Import StyleSheet, Text, View, Button and Alert component in your project.
|
1
2
3
|
import React, { Component } from ‘react’;
import { StyleSheet, Text, View, Button, Alert } from ‘react-native’;
|
2. Create constructor() in your project and make a State named as time. This state is used to Hold the complete time.
|
1
2
3
4
5
6
7
8
9
10
|
constructor(props) {
super(props);
this.state = {
time: ”
};
}
|
3. Create a function named as GetTime() in your class. This function would fetch time from local Android – iOS device and set into State.
|
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
|
GetTime() {
// Creating variables to hold time.
var date, TimeType, hour, minutes, seconds, fullTime;
// Creating Date() function object.
date = new Date();
// Getting current hour from Date object.
hour = date.getHours();
// Checking if the Hour is less than equals to 11 then Set the Time format as AM.
if(hour <= 11)
{
TimeType = ‘AM’;
}
else{
// If the Hour is Not less than equals to 11 then Set the Time format as PM.
TimeType = ‘PM’;
}
// IF current hour is grater than 12 then minus 12 from current hour to make it in 12 Hours Format.
if( hour > 12 )
{
hour = hour – 12;
}
// If hour value is 0 then by default set its value to 12, because 24 means 0 in 24 hours time format.
if( hour == 0 )
{
hour = 12;
}
// Getting the current minutes from date object.
minutes = date.getMinutes();
// Checking if the minutes value is less then 10 then add 0 before minutes.
if(minutes < 10)
{
minutes = ‘0’ + minutes.toString();
}
//Getting current seconds from date object.
seconds = date.getSeconds();
// If seconds value is less than 10 then add 0 before seconds.
if(seconds < 10)
{
seconds = ‘0’ + seconds.toString();
}
// Adding all the variables in fullTime variable.
fullTime = hour.toString() + ‘:’ + minutes.toString() + ‘:’ + seconds.toString() + ‘ ‘ + TimeType.toString();
// Setting up fullTime variable in State.
this.setState({
time: fullTime
});
}
|
4. Create componentDidMount() function in your class and call the above GetTime() function using setInterval() function. This function would calls infinite time on defined time. We are defining the calling time as 1000 Milliseconds = 1 Second. So the setInterval() function would automatically calls on every second. This would make our clock look like Live Digital Clock.
|
1
2
3
4
5
|
componentDidMount() {
this.Clock = setInterval( () => this.GetTime(), 1000 );
}
|
5. Create componentWillUnmount() function and clear the this.clock above object using clearInterval() function.
|
1
2
3
4
5
|
componentWillUnmount(){
clearInterval(this.Clock);
}
|
6. Create a function named as showTime(). We would call this function on Button onPress event and this function would print the Current time value on screen using Alert.
|
1
2
3
4
5
|
showTime=()=>{
Alert.alert(this.state.time.toString()) ;
}
|
7. Crate 1 Text and 1 Button component in render’s return block. The Text component shows the real time and the button would show us the current time in Alert.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
render()
{
return (
<View style={styles.MainContainer}>
<Text style={styles.TextStyle}> {this.state.time} </Text>
<Button title=‘Click Here To Get Current Time’ onPress={this.showTime} />
</View>
);
}
|
8. Create Style for View and Text component.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
const styles = StyleSheet.create(
{
MainContainer:
{
justifyContent: ‘center’,
alignItems: ‘center’,
flex:1,
margin: 10
},
TextStyle:
{
fontSize: 26,
textAlign: ‘center’,
color: ‘#009688’,
marginBottom: 20,
}
});
|
9. Complete source code for App.js File :
|
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
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
|
import React, { Component } from ‘react’;
import { StyleSheet, Text, View, Button, Alert } from ‘react-native’;
export default class MainActivity extends Component {
constructor(props) {
super(props);
this.state = {
time: ”
};
}
componentDidMount() {
this.Clock = setInterval( () => this.GetTime(), 1000 );
}
componentWillUnmount(){
clearInterval(this.Clock);
}
GetTime() {
// Creating variables to hold time.
var date, TimeType, hour, minutes, seconds, fullTime;
// Creating Date() function object.
date = new Date();
// Getting current hour from Date object.
hour = date.getHours();
// Checking if the Hour is less than equals to 11 then Set the Time format as AM.
if(hour <= 11)
{
TimeType = ‘AM’;
}
else{
// If the Hour is Not less than equals to 11 then Set the Time format as PM.
TimeType = ‘PM’;
}
// IF current hour is grater than 12 then minus 12 from current hour to make it in 12 Hours Format.
if( hour > 12 )
{
hour = hour – 12;
}
// If hour value is 0 then by default set its value to 12, because 24 means 0 in 24 hours time format.
if( hour == 0 )
{
hour = 12;
}
// Getting the current minutes from date object.
minutes = date.getMinutes();
// Checking if the minutes value is less then 10 then add 0 before minutes.
if(minutes < 10)
{
minutes = ‘0’ + minutes.toString();
}
//Getting current seconds from date object.
seconds = date.getSeconds();
// If seconds value is less than 10 then add 0 before seconds.
if(seconds < 10)
{
seconds = ‘0’ + seconds.toString();
}
// Adding all the variables in fullTime variable.
fullTime = hour.toString() + ‘:’ + minutes.toString() + ‘:’ + seconds.toString() + ‘ ‘ + TimeType.toString();
// Setting up fullTime variable in State.
this.setState({
time: fullTime
});
}
showTime=()=>{
Alert.alert(this.state.time.toString()) ;
}
render()
{
return (
<View style={styles.MainContainer}>
<Text style={styles.TextStyle}> {this.state.time} </Text>
<Button title=‘Click Here To Get Current Time’ onPress={this.showTime} />
</View>
);
}
}
const styles = StyleSheet.create(
{
MainContainer:
{
justifyContent: ‘center’,
alignItems: ‘center’,
flex:1,
margin: 10
},
TextStyle:
{
fontSize: 26,
textAlign: ‘center’,
color: ‘#009688’,
marginBottom: 20,
}
});
|
Screenshot in Android device :
Screenshot in iOS device :
Also Read :
React Native Set Hint PlaceHolder Align Center Inside TextInput
React Native Change Background Color Using Animation in Android iOS
How to Install React Native on MAC step by step Tutorial
React Native Generate Release key hash for Facebook Login in Windows
React Native Count TextInput Inside Text Length Automatically
