Navigate back to the homepage

How to get current time in react native?

Infinitbility
React Native
February 11th, 2022 · 1 min read
keep affilitate

Hello Friends 👋,

Welcome To Infinitbility! ❤️

To get the current datetime in react native has the Date() object it will return every time the current date and time when we use it.

we have to just write new Date() and it returns the date object where we get a year, month, date, hours, minutes, and seconds.

1let today = new Date();
2console.log(today); // 2022-02-06T08:05:49.292Z

Now, we know we have the current date time but we can’t show the same to also users.

To format, we have multiple packages like Day.js, and Moment.js.

But if wanna follow a custom formater follow the below code.

Let see how we can show current time in react native.

1import React, { useState, useEffect } from 'react';
2import { Text, View, StyleSheet } from 'react-native';
3
4export default function App() {
5 const [time, setTime] = useState(null);
6
7 useEffect(() => {
8 let time = getCurrentTime();
9 setTime(time);
10 }, []);
11
12 const getCurrentTime = () => {
13 let today = new Date();
14 let hours = (today.getHours() < 10 ? '0' : '') + today.getHours();
15 let minutes = (today.getMinutes() < 10 ? '0' : '') + today.getMinutes();
16 let seconds = (today.getSeconds() < 10 ? '0' : '') + today.getSeconds();
17 return hours + ':' + minutes + ':' + seconds;
18 }
19
20 return (
21 <View style={styles.container}>
22 <Text style={styles.paragraph}>{'Current time'} - {time}</Text>
23 </View>
24 );
25}
26
27const styles = StyleSheet.create({
28 container: {
29 flex: 1,
30 justifyContent: 'center',
31 backgroundColor: '#ecf0f1',
32 padding: 8,
33 },
34 paragraph: {
35 margin: 24,
36 fontSize: 18,
37 fontWeight: 'bold',
38 textAlign: 'center',
39 },
40});

Output

React Native, current, time, example
React Native, get current time example.

In above example, we are extracting and formating new Date() to time in React Native.

Thanks for reading…

Follow me on Twitter

Join our email list and get notified about new content

No worries, I respect your privacy and I will never abuse your email.

Every week, on Tuesday, you will receive a list of free tutorials I made during the week (I write one every day) and news on other training products I create.

melio affilitate

Looking For React Native Tutorial?

we are trying to create the best Tutorial for react native developers.

When you want a daily updates about React Native Tutorial or infinitbility update subscribe to our newsletter.

Read React Native Tutorial

Request New Tutorial or Article on mail [email protected]

Guide book

Guidebook: The Javascript Monorepo Photoshop Guide

Tutorials

Categories

More articles from Infinitbility

How to get object value using the dynamic key in javascript?

Example of access object value using dynamic key in javascript.

February 10th, 2022 · 1 min read

How to get array length in react native?

React Native, get length of array example.

February 9th, 2022 · 1 min read
© 2020–2022 Infinitbility
About
Link to $https://medium.com/infinitbilityLink to $https://www.facebook.com/InfinitbilityLink to $https://github.com/infinitbilityLink to $https://twitter.com/infinitbilityLink to $https://www.buymeacoffee.com/infinitbilityLink to $mailto:[email protected]