Using format.js

https://github.com/tooot-app/app/issues/280

src/components/Timeline/Shared/HeaderDefault.tsx

@@ -18,9 +18,15 @@ export interface Props {
   queryKey?: QueryKeyTimeline
   rootQueryKey?: QueryKeyTimeline
   status: Mastodon.Status
+  highlighted: boolean
 }
 
-const TimelineHeaderDefault = ({ queryKey, rootQueryKey, status }: Props) => {
+const TimelineHeaderDefault = ({
+  queryKey,
+  rootQueryKey,
+  status,
+  highlighted
+}: Props) => {
   const { t } = useTranslation('componentTimeline')
   const navigation = useNavigation<StackNavigationProp<RootStackParamList>>()
   const { colors } = useTheme()
@@ -40,6 +46,7 @@ const TimelineHeaderDefault = ({ queryKey, rootQueryKey, status }: Props) => {
           <HeaderSharedCreated
             created_at={status.created_at}
             edited_at={status.edited_at}
+            highlighted={highlighted}
           />
           <HeaderSharedVisibility visibility={status.visibility} />
           <HeaderSharedMuted muted={status.muted} />

src/components/Timeline/Shared/HeaderShared/Created.tsx

@@ -1,25 +1,43 @@
 import Icon from '@components/Icon'
-import RelativeTime from '@components/RelativeTime'
 import CustomText from '@components/Text'
 import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
+import { FormattedDate, FormattedRelativeTime, FormattedTime } from 'react-intl'
 
 export interface Props {
   created_at: Mastodon.Status['created_at'] | number
   edited_at?: Mastodon.Status['edited_at']
+  highlighted: boolean
 }
 
 const HeaderSharedCreated = React.memo(
-  ({ created_at, edited_at }: Props) => {
+  ({ created_at, edited_at, highlighted }: Props) => {
     const { t } = useTranslation('componentTimeline')
     const { colors } = useTheme()
 
+    const actualTime = edited_at || created_at
+
     return (
       <>
         <CustomText fontStyle='S' style={{ color: colors.secondary }}>
-          <RelativeTime date={edited_at || created_at} />
+          {highlighted ? (
+            <>
+              <FormattedDate
+                value={new Date(actualTime)}
+                dateStyle='medium'
+                timeStyle='short'
+              />
+            </>
+          ) : (
+            <FormattedRelativeTime
+              value={
+                -(new Date().getTime() - new Date(actualTime).getTime()) / 1000
+              }
+              updateIntervalInSeconds={1}
+            />
+          )}
         </CustomText>
         {edited_at ? (
           <Icon

src/components/Timeline/Shared/Poll.tsx

@@ -17,6 +17,7 @@ import { useTheme } from '@utils/styles/ThemeManager'
 import { maxBy } from 'lodash'
 import React, { useCallback, useMemo, useState } from 'react'
 import { Trans, useTranslation } from 'react-i18next'
+import { FormattedRelativeTime } from 'react-intl'
 import { Pressable, StyleSheet, Text, View } from 'react-native'
 import { useQueryClient } from 'react-query'
 
@@ -158,7 +159,16 @@ const TimelinePoll: React.FC<Props> = ({
           <CustomText fontStyle='S' style={{ color: colors.secondary }}>
             <Trans
               i18nKey='componentTimeline:shared.poll.meta.expiration.until'
-              components={[<RelativeTime date={poll.expires_at} />]}
+              components={[
+                <FormattedRelativeTime
+                  value={
+                    (new Date(poll.expires_at).getTime() -
+                      new Date().getTime()) /
+                    1000
+                  }
+                  updateIntervalInSeconds={1}
+                />
+              ]}
             />
           </CustomText>
         )