Get current time in 12 hours AM PM format in React Native Android iOS

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.

2. Create constructor() in your project and make a State named as time. This state is used to Hold the complete 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.

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.

5. Create componentWillUnmount() function and clear the this.clock above object using clearInterval() function.

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.

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.

8. Create Style for View and Text component.

9. Complete source code for App.js File :

Screenshot in Android device :

Get current time in 12 hours AM PM format

Screenshot in iOS device :

Leave a Reply

Your email address will not be published. Required fields are marked *