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
|
import React, {useEffect, useMemo, useState} from 'react';
import {Text, View} from 'react-native';
export const Clock: React.FC = React.memo(() => {
const [date, setDate] = useState(() => new Date());
useEffect(() => {
const interval = setInterval(() => {
setDate(new Date());
}, 5000);
return () => clearInterval(interval);
}, []);
const timeText = useMemo(() => {
const formatter = new Intl.DateTimeFormat('en', {
hour: 'numeric',
minute: 'numeric',
// second: 'numeric',
});
return formatter.format(date);
}, [date]);
const dateText = useMemo(() => {
const formatter = new Intl.DateTimeFormat('en-IN', {
month: 'short',
day: 'numeric',
weekday: 'long',
});
return formatter.format(date);
}, [date]);
return (
<View className="p-6">
<Text className="text-4xl font-bold">{timeText}</Text>
<Text className="text-lg">{dateText}</Text>
</View>
);
});
|
