Fixed #301

src/components/RelativeTime.tsx

@@ -0,0 +1,32 @@
+import { useEffect, useState } from 'react'
+import { FormattedRelativeTime } from 'react-intl'
+import { AppState } from 'react-native'
+
+export interface Props {
+  type: 'past' | 'future'
+  time: string | number
+}
+
+const RelativeTime: React.FC<Props> = ({ type, time }) => {
+  const [now, setNow] = useState(new Date().getTime())
+  useEffect(() => {
+    const appStateListener = AppState.addEventListener('change', state => {
+      setNow(new Date().getTime())
+    })
+
+    return () => {
+      appStateListener.remove()
+    }
+  }, [])
+
+  return (
+    <FormattedRelativeTime
+      value={
+        ((type === 'past' ? -1 : 1) * (now - new Date(time).getTime())) / 1000
+      }
+      updateIntervalInSeconds={1}
+    />
+  )
+}
+
+export default RelativeTime

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

@@ -1,10 +1,11 @@
 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 } from 'react-intl'
+import { FormattedDate } from 'react-intl'
 
 export interface Props {
   created_at: Mastodon.Status['created_at'] | number
@@ -31,12 +32,7 @@ const HeaderSharedCreated = React.memo(
               />
             </>
           ) : (
-            <FormattedRelativeTime
-              value={
-                -(new Date().getTime() - new Date(actualTime).getTime()) / 1000
-              }
-              updateIntervalInSeconds={1}
-            />
+            <RelativeTime type='past' time={actualTime} />
           )}
         </CustomText>
         {edited_at ? (

src/components/Timeline/Shared/Poll.tsx

@@ -4,6 +4,7 @@ import haptics from '@components/haptics'
 import Icon from '@components/Icon'
 import { displayMessage } from '@components/Message'
 import { ParseEmojis } from '@components/Parse'
+import RelativeTime from '@components/RelativeTime'
 import CustomText from '@components/Text'
 import {
   MutationVarsTimelineUpdateStatusProperty,
@@ -16,8 +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 { Pressable, View } from 'react-native'
 import { useQueryClient } from 'react-query'
 
 export interface Props {
@@ -289,15 +289,7 @@ const TimelinePoll: React.FC<Props> = ({
         return (
           <Trans
             i18nKey='componentTimeline:shared.poll.meta.expiration.until'
-            components={[
-              <FormattedRelativeTime
-                value={
-                  (new Date(poll.expires_at).getTime() - new Date().getTime()) /
-                  1000
-                }
-                updateIntervalInSeconds={1}
-              />
-            ]}
+            components={[<RelativeTime type='future' time={poll.expires_at} />]}
           />
         )
       }

src/screens/Announcements.tsx

@@ -2,6 +2,7 @@ import analytics from '@components/analytics'
 import Button from '@components/Button'
 import haptics from '@components/haptics'
 import { ParseHTML } from '@components/Parse'
+import RelativeTime from '@components/RelativeTime'
 import CustomText from '@components/Text'
 import { BlurView } from '@react-native-community/blur'
 import { useAccessibility } from '@utils/accessibility/AccessibilityManager'
@@ -92,15 +93,7 @@ const ScreenAnnouncements: React.FC<
             <Trans
               i18nKey='screenAnnouncements:content.published'
               components={[
-                <FormattedRelativeTime
-                  value={
-                    -(
-                      new Date().getTime() -
-                      new Date(item.published_at).getTime()
-                    ) / 1000
-                  }
-                  updateIntervalInSeconds={1}
-                />
+                <RelativeTime type='past' time={item.published_at} />
               ]}
             />
           </CustomText>