First step to adapt to Android

2025-06-05 22:19:13 +02:00 · 2021-01-13 01:03:46 +01:00
parent 2df172d026
commit 49715bba0d
39 changed files with 417 additions and 324 deletions
--- a/src/Index.tsx
+++ b/src/Index.tsx
@@ -108,7 +108,6 @@ const Index: React.FC<Props> = ({ localCorrupt }) => {
      refetchIntervalInBackground: true
    }
  })
-
  const prevNotification = useSelector(getLocalNotification)
  useEffect(() => {
    if (queryNotification.data?.pages) {
@@ -244,7 +243,7 @@ const Index: React.FC<Props> = ({ localCorrupt }) => {
  )
  return (
    <>
-      <StatusBar barStyle={barStyle[mode]} />
+      <StatusBar barStyle={barStyle[mode]} backgroundColor={theme.background} />
      <NavigationContainer
        ref={navigationRef}
        theme={themes[mode]}
@@ -293,7 +292,7 @@ const Index: React.FC<Props> = ({ localCorrupt }) => {
          <Tab.Screen name='Screen-Me' component={ScreenMe} />
        </Tab.Navigator>

-        <Toast ref={Toast.setRef} config={toastConfig} />
+        {/* <Toast ref={Toast.setRef} config={toastConfig} /> */}
      </NavigationContainer>
    </>
  )
--- a/src/components/CustomRefreshControl.tsx
+++ b/src/components/CustomRefreshControl.tsx
@@ -1,61 +0,0 @@
-import { QueryKeyTimeline } from '@utils/queryHooks/timeline'
-import React, { useRef } from 'react'
-import { RefreshControl } from 'react-native'
-import { InfiniteData, useQueryClient } from 'react-query'
-
-export interface Props {
-  queryKey: QueryKeyTimeline
-  isFetchingPreviousPage: boolean
-  isFetching: boolean
-  fetchPreviousPage: () => void
-  refetch: () => void
-}
-
-const CustomRefreshControl = React.memo(
-  ({
-    queryKey,
-    isFetchingPreviousPage,
-    isFetching,
-    fetchPreviousPage,
-    refetch
-  }: Props) => {
-    const queryClient = useQueryClient()
-    const refreshCount = useRef(0)
-
-    return (
-      <RefreshControl
-        refreshing={
-          refreshCount.current < 2 ? isFetchingPreviousPage : isFetching
-        }
-        onRefresh={async () => {
-          if (refreshCount.current < 2) {
-            await fetchPreviousPage()
-            refreshCount.current++
-          } else {
-            queryClient.setQueryData<InfiniteData<any> | undefined>(
-              queryKey,
-              data => {
-                if (data) {
-                  return {
-                    pages: data.pages.slice(1),
-                    pageParams: data.pageParams.slice(1)
-                  }
-                }
-              }
-            )
-            await refetch()
-            refreshCount.current = 0
-          }
-        }}
-      />
-    )
-  },
-  (prev, next) => {
-    let skipUpdate = true
-    skipUpdate = prev.isFetchingPreviousPage === next.isFetchingPreviousPage
-    skipUpdate = prev.isFetching === next.isFetching
-    return skipUpdate
-  }
-)
-
-export default CustomRefreshControl
--- a/src/components/Menu/Row.tsx
+++ b/src/components/Menu/Row.tsx
@@ -65,7 +65,7 @@ const MenuRow: React.FC<Props> = ({
          {iconFront && (
            <Icon
              name={iconFront}
-              size={StyleConstants.Font.Size.M + 2}
+              size={StyleConstants.Font.Size.L}
              color={theme[iconFrontColor]}
              style={styles.iconFront}
            />
@@ -118,7 +118,7 @@ const MenuRow: React.FC<Props> = ({
              <>
                <Icon
                  name={iconBack}
-                  size={StyleConstants.Font.Size.M + 2}
+                  size={StyleConstants.Font.Size.L}
                  color={theme[iconBackColor]}
                  style={[styles.iconBack, { opacity: loading ? 0 : 1 }]}
                />
@@ -139,6 +139,7 @@ const styles = StyleSheet.create({
  core: {
    flex: 1,
    flexDirection: 'row',
+    alignItems: 'center',
    paddingLeft: StyleConstants.Spacing.Global.PagePadding,
    paddingRight: StyleConstants.Spacing.Global.PagePadding
  },
--- a/src/components/Parse/HTML.tsx
+++ b/src/components/Parse/HTML.tsx
@@ -45,12 +45,9 @@ const renderNode = ({
            ? routeParams.hashtag !== tag[1] && routeParams.hashtag !== tag[2]
            : true
          return (
-            <Text
+            <Pressable
              key={index}
-              style={{
-                color: theme.blue,
-                ...StyleConstants.FontStyle[size]
-              }}
+              hitSlop={StyleConstants.Font.Size[size] / 2}
              onPress={() => {
                !disableDetails &&
                  differentTag &&
@@ -59,9 +56,16 @@ const renderNode = ({
                  })
              }}
            >
-              {node.children[0].data}
-              {node.children[1]?.children[0].data}
-            </Text>
+              <Text
+                style={{
+                  color: theme.blue,
+                  ...StyleConstants.FontStyle[size]
+                }}
+              >
+                {node.children[0].data}
+                {node.children[1]?.children[0].data}
+              </Text>
+            </Pressable>
          )
        } else if (classes.includes('mention') && mentions) {
          const accountIndex = mentions.findIndex(
@@ -71,12 +75,9 @@ const renderNode = ({
            ? routeParams.account.id !== mentions[accountIndex].id
            : true
          return (
-            <Text
+            <Pressable
              key={index}
-              style={{
-                color: accountIndex !== -1 ? theme.blue : undefined,
-                ...StyleConstants.FontStyle[size]
-              }}
+              hitSlop={StyleConstants.Font.Size[size] / 2}
              onPress={() => {
                accountIndex !== -1 &&
                  !disableDetails &&
@@ -86,9 +87,16 @@ const renderNode = ({
                  })
              }}
            >
-              {node.children[0].data}
-              {node.children[1]?.children[0].data}
-            </Text>
+              <Text
+                style={{
+                  color: accountIndex !== -1 ? theme.blue : undefined,
+                  ...StyleConstants.FontStyle[size]
+                }}
+              >
+                {node.children[0].data}
+                {node.children[1]?.children[0].data}
+              </Text>
+            </Pressable>
          )
        }
      } else {
@@ -99,12 +107,9 @@ const renderNode = ({
        const shouldBeTag =
          tags && tags.filter(tag => `#${tag.name}` === content).length > 0
        return (
-          <Text
+          <Pressable
            key={index}
-            style={{
-              color: theme.blue,
-              ...StyleConstants.FontStyle[size]
-            }}
+            hitSlop={StyleConstants.Font.Size[size] / 2}
            onPress={async () =>
              !disableDetails && !shouldBeTag
                ? await openLink(href)
@@ -113,15 +118,22 @@ const renderNode = ({
                  })
            }
          >
-            {!shouldBeTag ? (
-              <Icon
-                color={theme.blue}
-                name='ExternalLink'
-                size={StyleConstants.Font.Size[size]}
-              />
-            ) : null}
-            {content || (showFullLink ? href : domain[1])}
-          </Text>
+            <Text
+              style={{
+                color: theme.blue,
+                ...StyleConstants.FontStyle[size]
+              }}
+            >
+              {!shouldBeTag ? (
+                <Icon
+                  color={theme.blue}
+                  name='ExternalLink'
+                  size={StyleConstants.Font.Size[size]}
+                />
+              ) : null}
+              {content || (showFullLink ? href : domain[1])}
+            </Text>
+          </Pressable>
        )
      }
      break
@@ -206,7 +218,7 @@ const ParseHTML: React.FC<Props> = ({
      }, [])

      return (
-        <View>
+        <View style={{ overflow: 'hidden' }}>
          <Text
            children={children}
            onTextLayout={onTextLayout}
@@ -222,14 +234,21 @@ const ParseHTML: React.FC<Props> = ({
                layoutAnimation()
                setExpanded(!expanded)
              }}
-              style={{ marginTop: expanded ? 0 : -lineHeight * 2.25 }}
+              style={{
+                marginTop: expanded
+                  ? 0
+                  : -lineHeight * (numberOfLines === 0 ? 1 : 2)
+              }}
            >
              <LinearGradient
                colors={[
                  theme.backgroundGradientStart,
                  theme.backgroundGradientEnd
                ]}
-                locations={[0, lineHeight / (StyleConstants.Font.Size.S * 4)]}
+                locations={[
+                  0,
+                  lineHeight / (StyleConstants.Font.Size[size] * 5)
+                ]}
                style={{
                  paddingTop: StyleConstants.Font.Size.S * 2,
                  paddingBottom: StyleConstants.Font.Size.S
--- a/src/components/Timelines.tsx
+++ b/src/components/Timelines.tsx
@@ -69,7 +69,9 @@ const Timelines: React.FC<Props> = ({ name, content }) => {
  )

  return (
-    <Stack.Navigator screenOptions={{ headerHideShadow: true }}>
+    <Stack.Navigator
+      screenOptions={{ headerHideShadow: true, headerTopInsetEnabled: false }}
+    >
      <Stack.Screen
        // @ts-ignore
        name={`Screen-${name}-Root`}
--- a/src/components/Timelines/Timeline.tsx
+++ b/src/components/Timelines/Timeline.tsx
@@ -9,12 +9,13 @@ import { useScrollToTop } from '@react-navigation/native'
 import { localUpdateNotification } from '@utils/slices/instancesSlice'
 import { StyleConstants } from '@utils/styles/constants'
 import React, { useCallback, useEffect, useMemo, useRef } from 'react'
-import { StyleSheet } from 'react-native'
+import { RefreshControl, StyleSheet } from 'react-native'
 import { FlatList } from 'react-native-gesture-handler'
 import { useDispatch } from 'react-redux'
 import { QueryKeyTimeline, useTimelineQuery } from '@utils/queryHooks/timeline'
 import { findIndex } from 'lodash'
 import CustomRefreshControl from '@components/CustomRefreshControl'
+import { InfiniteData, useQueryClient } from 'react-query'

 export interface Props {
  page: App.Pages
@@ -156,14 +157,35 @@ const Timeline: React.FC<Props> = ({
    () => <TimelineEnd hasNextPage={!disableInfinity ? hasNextPage : false} />,
    [hasNextPage]
  )
+
+  const queryClient = useQueryClient()
+  const refreshCount = useRef(0)
  const refreshControl = useMemo(
    () => (
-      <CustomRefreshControl
-        queryKey={queryKey}
-        isFetchingPreviousPage={isFetchingNextPage}
-        isFetching={isFetching}
-        fetchPreviousPage={fetchPreviousPage}
-        refetch={refetch}
+      <RefreshControl
+        refreshing={
+          refreshCount.current < 2 ? isFetchingPreviousPage : isFetching
+        }
+        onRefresh={async () => {
+          if (refreshCount.current < 2) {
+            await fetchPreviousPage()
+            refreshCount.current++
+          } else {
+            queryClient.setQueryData<InfiniteData<any> | undefined>(
+              queryKey,
+              data => {
+                if (data) {
+                  return {
+                    pages: data.pages.slice(1),
+                    pageParams: data.pageParams.slice(1)
+                  }
+                }
+              }
+            )
+            await refetch()
+            refreshCount.current = 0
+          }
+        }}
      />
    ),
    [isFetchingPreviousPage, isFetching]
@@ -199,10 +221,10 @@ const Timeline: React.FC<Props> = ({
      {...(queryKey &&
        queryKey[1].page === 'RemotePublic' && { ListHeaderComponent })}
      {...(toot && isSuccess && { onScrollToIndexFailed })}
-      maintainVisibleContentPosition={{
-        minIndexForVisible: 0,
-        autoscrollToTopThreshold: 2
-      }}
+      // maintainVisibleContentPosition={{
+      //   minIndexForVisible: 0,
+      //   autoscrollToTopThreshold: 2
+      // }}
    />
  )
 }
--- a/src/components/Timelines/Timeline/End.tsx
+++ b/src/components/Timelines/Timeline/End.tsx
@@ -20,7 +20,7 @@ const TimelineEnd: React.FC<Props> = ({ hasNextPage }) => {
      ) : (
        <Text style={[styles.text, { color: theme.secondary }]}>
          <Trans
-            i18nKey='timeline:shared.end.message' // optional -> fallbacks to defaults if not provided
+            i18nKey='timeline:shared.end.message'
            components={[
              <Icon
                name='Coffee'
--- a/src/components/Timelines/Timeline/Shared/Actions.tsx
+++ b/src/components/Timelines/Timeline/Shared/Actions.tsx
@@ -11,7 +11,14 @@ import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
 import React, { useCallback, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
-import { ActionSheetIOS, Pressable, StyleSheet, Text, View } from 'react-native'
+import {
+  Platform,
+  Pressable,
+  Share,
+  StyleSheet,
+  Text,
+  View
+} from 'react-native'
 import { useQueryClient } from 'react-query'

 export interface Props {
@@ -35,12 +42,39 @@ const TimelineActions: React.FC<Props> = ({ queryKey, status, reblog }) => {
    onSuccess: (_, params) => {
      const theParams = params as MutationVarsTimelineUpdateStatusProperty
      if (
+        // Un-bookmark from bookmarks page
        (queryKey[1].page === 'Bookmarks' &&
          theParams.payload.property === 'bookmarked') ||
+        // Un-favourite from favourites page
        (queryKey[1].page === 'Favourites' &&
-          theParams.payload.property === 'favourited')
+          theParams.payload.property === 'favourited') ||
+        // Un-reblog from following page
+        (queryKey[1].page === 'Following' &&
+          theParams.payload.property === 'reblogged' &&
+          theParams.payload.currentValue === true)
      ) {
        queryClient.invalidateQueries(queryKey)
+      } else if (theParams.payload.property === 'reblogged') {
+        // When reblogged, update cache of following page
+        const tempQueryKey: QueryKeyTimeline = [
+          'Timeline',
+          { page: 'Following' }
+        ]
+        queryClient.invalidateQueries(tempQueryKey)
+      } else if (theParams.payload.property === 'favourited') {
+        // When favourited, update favourited page
+        const tempQueryKey: QueryKeyTimeline = [
+          'Timeline',
+          { page: 'Favourites' }
+        ]
+        queryClient.invalidateQueries(tempQueryKey)
+      } else if (theParams.payload.property === 'bookmarked') {
+        // When bookmarked, update bookmark page
+        const tempQueryKey: QueryKeyTimeline = [
+          'Timeline',
+          { page: 'Bookmarks' }
+        ]
+        queryClient.invalidateQueries(tempQueryKey)
      }
    },
    onError: (err: any, params, oldData) => {
@@ -115,23 +149,18 @@ const TimelineActions: React.FC<Props> = ({ queryKey, status, reblog }) => {
      }),
    [status.bookmarked]
  )
-  const onPressShare = useCallback(
-    () =>
-      ActionSheetIOS.showShareActionSheetWithOptions(
-        {
-          url: status.uri,
-          excludedActivityTypes: [
-            'com.apple.UIKit.activity.Mail',
-            'com.apple.UIKit.activity.Print',
-            'com.apple.UIKit.activity.SaveToCameraRoll',
-            'com.apple.UIKit.activity.OpenInIBooks'
-          ]
-        },
-        () => haptics('Error'),
-        () => haptics('Success')
-      ),
-    []
-  )
+  const onPressShare = useCallback(() => {
+    switch (Platform.OS) {
+      case 'ios':
+        return Share.share({
+          url: status.uri
+        })
+      case 'android':
+        return Share.share({
+          message: status.uri
+        })
+    }
+  }, [])

  const childrenReply = useMemo(
    () => (
@@ -139,7 +168,7 @@ const TimelineActions: React.FC<Props> = ({ queryKey, status, reblog }) => {
        <Icon
          name='MessageCircle'
          color={iconColor}
-          size={StyleConstants.Font.Size.M + 2}
+          size={StyleConstants.Font.Size.L}
        />
        {status.replies_count > 0 && (
          <Text
@@ -165,7 +194,7 @@ const TimelineActions: React.FC<Props> = ({ queryKey, status, reblog }) => {
            ? theme.disabled
            : iconColorAction(status.reblogged)
        }
-        size={StyleConstants.Font.Size.M + 2}
+        size={StyleConstants.Font.Size.L}
      />
    ),
    [status.reblogged]
@@ -175,7 +204,7 @@ const TimelineActions: React.FC<Props> = ({ queryKey, status, reblog }) => {
      <Icon
        name='Heart'
        color={iconColorAction(status.favourited)}
-        size={StyleConstants.Font.Size.M + 2}
+        size={StyleConstants.Font.Size.L}
      />
    ),
    [status.favourited]
@@ -185,18 +214,14 @@ const TimelineActions: React.FC<Props> = ({ queryKey, status, reblog }) => {
      <Icon
        name='Bookmark'
        color={iconColorAction(status.bookmarked)}
-        size={StyleConstants.Font.Size.M + 2}
+        size={StyleConstants.Font.Size.L}
      />
    ),
    [status.bookmarked]
  )
  const childrenShare = useMemo(
    () => (
-      <Icon
-        name='Share2'
-        color={iconColor}
-        size={StyleConstants.Font.Size.M + 2}
-      />
+      <Icon name='Share2' color={iconColor} size={StyleConstants.Font.Size.L} />
    ),
    []
  )
@@ -252,6 +277,7 @@ const styles = StyleSheet.create({
    width: '20%',
    flexDirection: 'row',
    justifyContent: 'center',
+    alignItems: 'center',
    paddingVertical: StyleConstants.Spacing.S
  }
 })
--- a/src/components/Timelines/Timeline/Shared/HeaderActions/Root.tsx
+++ b/src/components/Timelines/Timeline/Shared/HeaderActions/Root.tsx
@@ -36,7 +36,7 @@ const HeaderActions = React.memo(
        <Icon
          name='MoreHorizontal'
          color={theme.secondary}
-          size={StyleConstants.Font.Size.M + 2}
+          size={StyleConstants.Font.Size.L}
        />
      ),
      []
--- a/src/components/Timelines/Timeline/Shared/HeaderConversation.tsx
+++ b/src/components/Timelines/Timeline/Shared/HeaderConversation.tsx
@@ -65,7 +65,7 @@ const HeaderConversation: React.FC<Props> = ({ queryKey, conversation }) => {
      <Icon
        name='Trash'
        color={theme.secondary}
-        size={StyleConstants.Font.Size.M + 2}
+        size={StyleConstants.Font.Size.L}
      />
    ),
    []
--- a/src/components/Timelines/Timeline/Shared/HeaderShared/Created.tsx
+++ b/src/components/Timelines/Timeline/Shared/HeaderShared/Created.tsx
@@ -1,8 +1,8 @@
-import relativeTime from '@components/relativeTime'
 import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
-import React, { useEffect, useState } from 'react'
+import React from 'react'
 import { useTranslation } from 'react-i18next'
+import Moment from 'react-moment'
 import { StyleSheet, Text } from 'react-native'

 export interface Props {
@@ -13,16 +13,10 @@ const HeaderSharedCreated: React.FC<Props> = ({ created_at }) => {
  const { theme } = useTheme()
  const { i18n } = useTranslation()

-  const [since, setSince] = useState(relativeTime(created_at, i18n.language))
-  useEffect(() => {
-    const timer = setTimeout(() => {
-      setSince(relativeTime(created_at, i18n.language))
-    }, 1000)
-    return () => clearTimeout(timer)
-  }, [since])
-
  return (
-    <Text style={[styles.created_at, { color: theme.secondary }]}>{since}</Text>
+    <Text style={[styles.created_at, { color: theme.secondary }]}>
+      <Moment date={created_at} locale={i18n.language} element={Text} fromNow />
+    </Text>
  )
 }

--- a/src/components/Timelines/Timeline/Shared/Poll.tsx
+++ b/src/components/Timelines/Timeline/Shared/Poll.tsx
@@ -10,8 +10,10 @@ import {
 } from '@utils/queryHooks/timeline'
 import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
+import { maxBy } from 'lodash'
 import React, { useCallback, useMemo, useState } from 'react'
-import { useTranslation } from 'react-i18next'
+import { Trans, useTranslation } from 'react-i18next'
+import Moment from 'react-moment'
 import { Pressable, StyleSheet, Text, View } from 'react-native'
 import { useQueryClient } from 'react-query'

@@ -123,16 +125,24 @@ const TimelinePoll: React.FC<Props> = ({
    } else {
      return (
        <Text style={[styles.expiration, { color: theme.secondary }]}>
-          {t('shared.poll.meta.expiration.until', {
-            at: relativeTime(poll.expires_at, i18n.language)
-          })}
+          <Trans
+            i18nKey='timeline:shared.poll.meta.expiration.until'
+            components={[
+              <Moment
+                date={poll.expires_at}
+                locale={i18n.language}
+                element={Text}
+                fromNow
+              />
+            ]}
+          />
        </Text>
      )
    }
  }, [mode, poll.expired, poll.expires_at])

  const isSelected = useCallback(
-    (index: number): any =>
+    (index: number): string =>
      allOptions[index]
        ? `Check${poll.multiple ? 'Square' : 'Circle'}`
        : `${poll.multiple ? 'Square' : 'Circle'}`,
@@ -140,6 +150,8 @@ const TimelinePoll: React.FC<Props> = ({
  )

  const pollBodyDisallow = useMemo(() => {
+    const maxValue = maxBy(poll.options, option => option.votes_count)
+      ?.votes_count
    return poll.options.map((option, index) => (
      <View key={index} style={styles.optionContainer}>
        <View style={styles.optionContent}>
@@ -152,7 +164,7 @@ const TimelinePoll: React.FC<Props> = ({
            }
            size={StyleConstants.Font.Size.M}
            color={
-              poll.own_votes?.includes(index) ? theme.primary : theme.disabled
+              poll.own_votes?.includes(index) ? theme.blue : theme.disabled
            }
          />
          <Text style={styles.optionText}>
@@ -160,7 +172,11 @@ const TimelinePoll: React.FC<Props> = ({
          </Text>
          <Text style={[styles.optionPercentage, { color: theme.primary }]}>
            {poll.votes_count
-              ? Math.round((option.votes_count / poll.voters_count) * 100)
+              ? Math.round(
+                  (option.votes_count /
+                    (poll.voters_count || poll.votes_count)) *
+                    100
+                )
              : 0}
            %
          </Text>
@@ -171,9 +187,11 @@ const TimelinePoll: React.FC<Props> = ({
            styles.background,
            {
              width: `${Math.round(
-                (option.votes_count / poll.voters_count) * 100
+                (option.votes_count / (poll.voters_count || poll.votes_count)) *
+                  100
              )}%`,
-              backgroundColor: theme.disabled
+              backgroundColor:
+                option.votes_count === maxValue ? theme.blue : theme.disabled
            }
          ]}
        />
@@ -221,14 +239,28 @@ const TimelinePoll: React.FC<Props> = ({
    ))
  }, [mode, allOptions])

+  const pollVoteCounts = useMemo(() => {
+    if (poll.voters_count !== null) {
+      return (
+        <Text style={[styles.votes, { color: theme.secondary }]}>
+          {t('shared.poll.meta.count.voters', { count: poll.voters_count })}
+        </Text>
+      )
+    } else if (poll.votes_count !== null) {
+      return (
+        <Text style={[styles.votes, { color: theme.secondary }]}>
+          {t('shared.poll.meta.count.votes', { count: poll.votes_count })}
+        </Text>
+      )
+    }
+  }, [poll.voters_count, poll.votes_count])
+
  return (
    <View style={styles.base}>
      {poll.expired || poll.voted ? pollBodyDisallow : pollBodyAllow}
      <View style={styles.meta}>
        {pollButton}
-        <Text style={[styles.votes, { color: theme.secondary }]}>
-          {t('shared.poll.meta.voted', { count: poll.voters_count })}
-        </Text>
+        {pollVoteCounts}
        {pollExpiration}
      </View>
    </View>
--- a/src/components/relativeTime.ts
+++ b/src/components/relativeTime.ts
@@ -1,27 +0,0 @@
-const relativeTime = (date: string, language: string) => {
-  const units = {
-    year: 24 * 60 * 60 * 1000 * 365,
-    month: (24 * 60 * 60 * 1000 * 365) / 12,
-    day: 24 * 60 * 60 * 1000,
-    hour: 60 * 60 * 1000,
-    minute: 60 * 1000,
-    second: 1000
-  }
-
-  const rtf = new Intl.RelativeTimeFormat(language, {
-    numeric: 'auto'
-  })
-
-  const elapsed = +new Date(date) - +new Date()
-
-  // "Math.abs" accounts for both "past" & "future" scenarios
-  for (const u in units) {
-    // @ts-ignore
-    if (Math.abs(elapsed) > units[u] || u == 'second') {
-      // @ts-ignore
-      return rtf.format(Math.round(elapsed / units[u]), u)
-    }
-  }
-}
-
-export default relativeTime
--- a/src/i18n/i18n.ts
+++ b/src/i18n/i18n.ts
@@ -13,29 +13,24 @@ import { store } from '@root/store'
 if (!getSettingsLanguage(store.getState())) {
  const deviceLocal = Localization.locale
  if (deviceLocal.startsWith('zh')) {
-    store.dispatch(changeLanguage('zh'))
+    store.dispatch(changeLanguage('zh-CN'))
  } else {
-    store.dispatch(changeLanguage('en'))
+    store.dispatch(changeLanguage('en-US'))
  }
 }
-
 i18next.use(initReactI18next).init({
-  lng: getSettingsLanguage(store.getState()),
-  fallbackLng: 'en',
-  supportedLngs: ['zh', 'en'],
-  nonExplicitSupportedLngs: true,
+  lng: 'zh-CN',
+  fallbackLng: 'en-US',
+  supportedLngs: ['zh-CN', 'en-US'],

  ns: ['common'],
  defaultNS: 'common',

-  resources: {
-    zh: zh,
-    en: en
-  },
+  resources: { 'zh-CN': zh, 'en-US': en },

  saveMissing: true,
  missingKeyHandler: (lng, ns, key, fallbackValue) => {
-    console.warn('i18n missing: ' + ns + ' : ' + key)
+    console.log('i18n missing: ' + lng + ' - ' + ns + ' : ' + key)
  },

  // react options
--- a/src/i18n/zh/components/timeline.ts
+++ b/src/i18n/zh/components/timeline.ts
@@ -123,11 +123,14 @@ export default {
          vote: '投票',
          refresh: '刷新'
        },
+        count: {
+          voters: '已投{{count}}人 • ',
+          votes: '{{count}}票 • '
+        },
        expiration: {
          expired: '投票已结束',
-          until: '{{at}}截止'
-        },
-        voted: '已投{{count}}人 • '
+          until: '<0 />截止'
+        }
      }
    }
  }
--- a/src/screens/Me.tsx
+++ b/src/screens/Me.tsx
@@ -19,7 +19,7 @@ const ScreenMe: React.FC = () => {
  const { t } = useTranslation()

  return (
-    <Stack.Navigator screenOptions={{ headerHideShadow: true }}>
+    <Stack.Navigator screenOptions={{ headerHideShadow: true, headerTopInsetEnabled: false }}>
      <Stack.Screen
        name='Screen-Me-Root'
        component={ScreenMeRoot}
--- a/src/screens/Me/Root.tsx
+++ b/src/screens/Me/Root.tsx
@@ -20,17 +20,13 @@ import { StackScreenProps } from '@react-navigation/stack'
 const ScreenMeRoot: React.FC<StackScreenProps<
  Nav.MeStackParamList,
  'Screen-Me-Root'
->> = ({
-  route: {
-    params: { navigateAway }
-  },
-  navigation
-}) => {
+>> = ({ route: { params }, navigation }) => {
  useEffect(() => {
-    if (navigateAway) {
-      navigation.navigate(navigateAway)
+    if (params && params.navigateAway) {
+      console.log('oops')
+      navigation.navigate(params.navigateAway)
    }
-  }, [navigateAway])
+  }, [params])
  const localActiveIndex = useSelector(getLocalActiveIndex)

  const scrollRef = useRef<Animated.ScrollView>(null)
--- a/src/screens/Me/Settings.tsx
+++ b/src/screens/Me/Settings.tsx
@@ -1,5 +1,6 @@
 import Button from '@components/Button'
 import { MenuContainer, MenuRow } from '@components/Menu'
+import { useActionSheet } from '@expo/react-native-action-sheet'
 import { useNavigation } from '@react-navigation/native'
 import haptics from '@root/components/haptics'
 import { persistor } from '@root/store'
@@ -23,11 +24,13 @@ import { useTheme } from '@utils/styles/ThemeManager'
 import prettyBytes from 'pretty-bytes'
 import React, { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { ActionSheetIOS, StyleSheet, Text } from 'react-native'
+import { StyleSheet, Text } from 'react-native'
 import { CacheManager } from 'react-native-expo-image-cache'
+import { ScrollView } from 'react-native-gesture-handler'
 import { useDispatch, useSelector } from 'react-redux'

 const DevDebug: React.FC = () => {
+  const { showActionSheetWithOptions } = useActionSheet()
  const localActiveIndex = useSelector(getLocalActiveIndex)
  const localInstances = useSelector(getLocalInstances)

@@ -43,7 +46,7 @@ const DevDebug: React.FC = () => {
        content={localInstances.length.toString()}
        iconBack='ChevronRight'
        onPress={() =>
-          ActionSheetIOS.showActionSheetWithOptions(
+          showActionSheetWithOptions(
            {
              options: localInstances
                .map(instance => {
@@ -71,6 +74,7 @@ const DevDebug: React.FC = () => {
 }

 const ScreenMeSettings: React.FC = () => {
+  const { showActionSheetWithOptions } = useActionSheet()
  const navigation = useNavigation()
  const { t, i18n } = useTranslation('meSettings')
  const { setTheme, theme } = useTheme()
@@ -87,15 +91,16 @@ const ScreenMeSettings: React.FC = () => {
  }, [])

  return (
-    <>
+    <ScrollView>
      <MenuContainer>
        <MenuRow
          title={t('content.language.heading')}
          content={t(`content.language.options.${settingsLanguage}`)}
          iconBack='ChevronRight'
          onPress={() =>
-            ActionSheetIOS.showActionSheetWithOptions(
+            showActionSheetWithOptions(
              {
+                title: t('content.language.heading'),
                options: [
                  t('content.language.options.zh'),
                  t('content.language.options.en'),
@@ -107,13 +112,13 @@ const ScreenMeSettings: React.FC = () => {
                switch (buttonIndex) {
                  case 0:
                    haptics('Success')
-                    dispatch(changeLanguage('zh'))
-                    i18n.changeLanguage('zh')
+                    dispatch(changeLanguage('zh-CN'))
+                    i18n.changeLanguage('zh-CN')
                    break
                  case 1:
                    haptics('Success')
-                    dispatch(changeLanguage('en'))
-                    i18n.changeLanguage('en')
+                    dispatch(changeLanguage('en-US'))
+                    i18n.changeLanguage('en-US')
                    break
                }
              }
@@ -125,8 +130,9 @@ const ScreenMeSettings: React.FC = () => {
          content={t(`content.theme.options.${settingsTheme}`)}
          iconBack='ChevronRight'
          onPress={() =>
-            ActionSheetIOS.showActionSheetWithOptions(
+            showActionSheetWithOptions(
              {
+                title: t('content.theme.heading'),
                options: [
                  t('content.theme.options.auto'),
                  t('content.theme.options.light'),
@@ -161,8 +167,9 @@ const ScreenMeSettings: React.FC = () => {
          content={t(`content.browser.options.${settingsBrowser}`)}
          iconBack='ChevronRight'
          onPress={() =>
-            ActionSheetIOS.showActionSheetWithOptions(
+            showActionSheetWithOptions(
              {
+                title: t('content.browser.heading'),
                options: [
                  t('content.browser.options.internal'),
                  t('content.browser.options.external'),
@@ -226,7 +233,7 @@ const ScreenMeSettings: React.FC = () => {
      </MenuContainer>

      {__DEV__ ? <DevDebug /> : null}
-    </>
+    </ScrollView>
  )
 }

--- a/src/screens/Me/Switch.tsx
+++ b/src/screens/Me/Switch.tsx
@@ -8,7 +8,7 @@ const Stack = createNativeStackNavigator()

 const ScreenMeSwitch: React.FC = ({ navigation }) => {
  return (
-    <Stack.Navigator screenOptions={{ headerHideShadow: true }}>
+    <Stack.Navigator screenOptions={{ headerHideShadow: true, headerTopInsetEnabled: false }}>
      <Stack.Screen
        name='Screen-Me-Switch-Root'
        component={ScreenMeSwitchRoot}
--- a/src/screens/Notifications.tsx
+++ b/src/screens/Notifications.tsx
@@ -16,7 +16,8 @@ const ScreenNotifications: React.FC = () => {
    <Stack.Navigator
      screenOptions={{
        headerTitle: t('notifications:heading'),
-        headerHideShadow: true
+        headerHideShadow: true,
+        headerTopInsetEnabled: false
      }}
    >
      <Stack.Screen name='Screen-Notifications-Root'>
--- a/src/screens/Public.tsx
+++ b/src/screens/Public.tsx
@@ -1,5 +1,4 @@
 import Timelines from '@components/Timelines'
-import { getRemoteUrl } from '@utils/slices/instancesSlice'
 import React from 'react'
 import { useTranslation } from 'react-i18next'

--- a/src/screens/Shared/Account/Information.tsx
+++ b/src/screens/Shared/Account/Information.tsx
@@ -73,19 +73,24 @@ const AccountInformation: React.FC<Props> = ({

      <AccountInformationAccount ref={shimmerAccountRef} account={account} />

-      {account?.fields && account.fields.length > 0 ? (
-        <AccountInformationFields account={account} />
+      {!ownAccount ? (
+        <>
+          {account?.fields && account.fields.length > 0 ? (
+            <AccountInformationFields account={account} />
+          ) : null}
+          {account?.note &&
+          account.note.length > 0 &&
+          account.note !== '<p></p>' ? (
+            // Empty notes might generate empty p tag
+            <AccountInformationNotes account={account} />
+          ) : null}
+          <AccountInformationCreated
+            ref={shimmerCreatedRef}
+            account={account}
+          />
+        </>
      ) : null}

-      {account?.note &&
-      account.note.length > 0 &&
-      account.note !== '<p></p>' ? (
-        // Empty notes might generate empty p tag
-        <AccountInformationNotes account={account} />
-      ) : null}
-
-      <AccountInformationCreated ref={shimmerCreatedRef} account={account} />
-
      <AccountInformationStats ref={shimmerStatsRef} account={account} />
    </View>
  )
--- a/src/screens/Shared/Announcements.tsx
+++ b/src/screens/Shared/Announcements.tsx
@@ -1,8 +1,6 @@
-import client from '@api/client'
 import Button from '@components/Button'
 import haptics from '@components/haptics'
 import { ParseHTML } from '@components/Parse'
-import relativeTime from '@components/relativeTime'
 import { useBottomTabBarHeight } from '@react-navigation/bottom-tabs'
 import {
  useAnnouncementMutation,
@@ -12,6 +10,7 @@ import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
 import React, { useCallback, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
+import Moment from 'react-moment'
 import {
  Dimensions,
  Image,
@@ -25,33 +24,6 @@ import { FlatList, ScrollView } from 'react-native-gesture-handler'
 import { SafeAreaView } from 'react-native-safe-area-context'
 import { SharedAnnouncementsProp } from './sharedScreens'

-const fireMutation = async ({
-  announcementId,
-  type,
-  name,
-  me
-}: {
-  announcementId: Mastodon.Announcement['id']
-  type: 'reaction' | 'dismiss'
-  name?: Mastodon.AnnouncementReaction['name']
-  me?: boolean
-}) => {
-  switch (type) {
-    case 'reaction':
-      return client<{}>({
-        method: me ? 'delete' : 'put',
-        instance: 'local',
-        url: `announcements/${announcementId}/reactions/${name}`
-      })
-    case 'dismiss':
-      return client<{}>({
-        method: 'post',
-        instance: 'local',
-        url: `announcements/${announcementId}/dismiss`
-      })
-  }
-}
-
 const ScreenSharedAnnouncements: React.FC<SharedAnnouncementsProp> = ({
  route: {
    params: { showAll = false }
@@ -108,7 +80,13 @@ const ScreenSharedAnnouncements: React.FC<SharedAnnouncementsProp> = ({
          ]}
        >
          <Text style={[styles.published, { color: theme.secondary }]}>
-            发布于 {relativeTime(item.published_at, i18n.language)}
+            发布于{' '}
+            <Moment
+              date={item.published_at}
+              locale={i18n.language}
+              element={Text}
+              fromNow
+            />
          </Text>
          <ScrollView style={styles.scrollView} showsVerticalScrollIndicator>
            <ParseHTML
--- a/src/screens/Shared/Compose.tsx
+++ b/src/screens/Shared/Compose.tsx
@@ -214,7 +214,7 @@ const Compose: React.FC<SharedComposeProp> = ({
        edges={hasKeyboard ? ['left', 'right'] : ['left', 'right', 'bottom']}
      >
        <ComposeContext.Provider value={{ composeState, composeDispatch }}>
-          <Stack.Navigator>
+          <Stack.Navigator screenOptions={{ headerTopInsetEnabled: false }}>
            <Stack.Screen
              name='Screen-Shared-Compose-Root'
              component={ComposeRoot}
--- a/src/screens/Shared/Compose/Actions.tsx
+++ b/src/screens/Shared/Compose/Actions.tsx
@@ -1,13 +1,15 @@
 import Icon from '@components/Icon'
+import { useActionSheet } from '@expo/react-native-action-sheet'
 import { StyleConstants } from '@utils/styles/constants'
 import layoutAnimation from '@utils/styles/layoutAnimation'
 import { useTheme } from '@utils/styles/ThemeManager'
 import React, { useCallback, useContext, useMemo } from 'react'
-import { ActionSheetIOS, Pressable, StyleSheet, View } from 'react-native'
+import { Pressable, StyleSheet, View } from 'react-native'
 import addAttachment from './/addAttachment'
 import ComposeContext from './utils/createContext'

 const ComposeActions: React.FC = () => {
+  const { showActionSheetWithOptions } = useActionSheet()
  const { composeState, composeDispatch } = useContext(ComposeContext)
  const { theme } = useTheme()

@@ -24,7 +26,10 @@ const ComposeActions: React.FC = () => {
    if (composeState.poll.active) return

    if (composeState.attachments.uploads.length < 4) {
-      return await addAttachment({ composeDispatch })
+      return await addAttachment({
+        composeDispatch,
+        showActionSheetWithOptions
+      })
    }
  }, [composeState.poll.active, composeState.attachments.uploads])

@@ -64,7 +69,7 @@ const ComposeActions: React.FC = () => {
  }, [composeState.visibility])
  const visibilityOnPress = useCallback(() => {
    if (!composeState.visibilityLock) {
-      ActionSheetIOS.showActionSheetWithOptions(
+      showActionSheetWithOptions(
        {
          options: ['公开', '不公开', '仅关注着', '私信', '取消'],
          cancelButtonIndex: 4
--- a/src/screens/Shared/Compose/Attachments.tsx
+++ b/src/screens/Shared/Compose/Attachments.tsx
@@ -1,6 +1,7 @@
 import Button from '@components/Button'
 import haptics from '@components/haptics'
 import Icon from '@components/Icon'
+import { useActionSheet } from '@expo/react-native-action-sheet'
 import { useNavigation } from '@react-navigation/native'
 import { StyleConstants } from '@utils/styles/constants'
 import layoutAnimation from '@utils/styles/layoutAnimation'
@@ -28,6 +29,7 @@ import { ExtendedAttachment } from './utils/types'
 const DEFAULT_HEIGHT = 200

 const ComposeAttachments: React.FC = () => {
+  const { showActionSheetWithOptions } = useActionSheet()
  const { composeState, composeDispatch } = useContext(ComposeContext)
  const { theme } = useTheme()
  const navigation = useNavigation()
@@ -192,7 +194,9 @@ const ComposeAttachments: React.FC = () => {
            backgroundColor: theme.backgroundOverlay
          }
        ]}
-        onPress={async () => await addAttachment({ composeDispatch })}
+        onPress={async () =>
+          await addAttachment({ composeDispatch, showActionSheetWithOptions })
+        }
      >
        <Button
          type='icon'
@@ -200,7 +204,9 @@ const ComposeAttachments: React.FC = () => {
          spacing='M'
          round
          overlay
-          onPress={async () => await addAttachment({ composeDispatch })}
+          onPress={async () =>
+            await addAttachment({ composeDispatch, showActionSheetWithOptions })
+          }
          style={{
            position: 'absolute',
            top:
--- a/src/screens/Shared/Compose/EditAttachment.tsx
+++ b/src/screens/Shared/Compose/EditAttachment.tsx
@@ -146,7 +146,7 @@ const ComposeEditAttachment: React.FC<Props> = ({
  return (
    <KeyboardAvoidingView behavior='padding' style={{ flex: 1 }}>
      <SafeAreaView style={{ flex: 1 }} edges={['left', 'right', 'bottom']}>
-        <Stack.Navigator>
+        <Stack.Navigator screenOptions={{ headerTopInsetEnabled: false }}>
          <Stack.Screen
            name='Screen-Shared-Compose-EditAttachment-Root'
            children={children}
--- a/src/screens/Shared/Compose/EditAttachment/Root.tsx
+++ b/src/screens/Shared/Compose/EditAttachment/Root.tsx
@@ -65,7 +65,10 @@ const ComposeEditAttachmentRoot: React.FC<Props> = ({
          为附件添加文字说明
        </Text>
        <TextInput
-          style={[styles.altTextInput, { borderColor: theme.border }]}
+          style={[
+            styles.altTextInput,
+            { borderColor: theme.border, color: theme.primary }
+          ]}
          autoCapitalize='none'
          autoCorrect={false}
          maxLength={1500}
--- a/src/screens/Shared/Compose/Poll.tsx
+++ b/src/screens/Shared/Compose/Poll.tsx
@@ -1,13 +1,15 @@
 import Button from '@components/Button'
 import Icon from '@components/Icon'
 import { MenuRow } from '@components/Menu'
+import { useActionSheet } from '@expo/react-native-action-sheet'
 import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
 import React, { useContext, useEffect, useState } from 'react'
-import { ActionSheetIOS, StyleSheet, TextInput, View } from 'react-native'
+import { StyleSheet, TextInput, View } from 'react-native'
 import ComposeContext from './utils/createContext'

 const ComposePoll: React.FC = () => {
+  const { showActionSheetWithOptions } = useActionSheet()
  const {
    composeState: {
      poll: { total, options, multiple, expire }
@@ -111,7 +113,7 @@ const ComposePoll: React.FC = () => {
        title='可选项'
        content={multiple ? '多选' : '单选'}
        onPress={() =>
-          ActionSheetIOS.showActionSheetWithOptions(
+          showActionSheetWithOptions(
            {
              options: ['单选', '多选', '取消'],
              cancelButtonIndex: 2
@@ -130,7 +132,7 @@ const ComposePoll: React.FC = () => {
        title='有效期'
        content={expireMapping[expire]}
        onPress={() =>
-          ActionSheetIOS.showActionSheetWithOptions(
+          showActionSheetWithOptions(
            {
              options: [...Object.values(expireMapping), '取消'],
              cancelButtonIndex: 7
--- a/src/screens/Shared/Compose/addAttachment.ts
+++ b/src/screens/Shared/Compose/addAttachment.ts
@@ -4,14 +4,16 @@ import * as Crypto from 'expo-crypto'
 import { ImageInfo } from 'expo-image-picker/build/ImagePicker.types'
 import * as VideoThumbnails from 'expo-video-thumbnails'
 import { Dispatch } from 'react'
-import { ActionSheetIOS, Alert, Linking } from 'react-native'
+import { Alert, Linking } from 'react-native'
 import { ComposeAction } from './utils/types'
+import { ActionSheetOptions } from '@expo/react-native-action-sheet'

 export interface Props {
  composeDispatch: Dispatch<ComposeAction>
+  showActionSheetWithOptions: (options: ActionSheetOptions, callback: (i: number) => void) => void
 }

-const addAttachment = async ({ composeDispatch }: Props): Promise<any> => {
+const addAttachment = async ({ composeDispatch, showActionSheetWithOptions }: Props): Promise<any> => {
  const uploadAttachment = async (result: ImageInfo) => {
    const hash = await Crypto.digestStringAsync(
      Crypto.CryptoDigestAlgorithm.SHA256,
@@ -106,7 +108,7 @@ const addAttachment = async ({ composeDispatch }: Props): Promise<any> => {
      })
  }

-  ActionSheetIOS.showActionSheetWithOptions(
+  showActionSheetWithOptions(
    {
      options: ['从相册选取', '现照', '取消'],
      cancelButtonIndex: 2
--- a/src/screens/Shared/ImagesViewer.tsx
+++ b/src/screens/Shared/ImagesViewer.tsx
@@ -1,9 +1,14 @@
-import haptics from '@components/haptics'
 import { HeaderLeft, HeaderRight } from '@components/Header'
 import { StyleConstants } from '@utils/styles/constants'
 import { findIndex } from 'lodash'
 import React, { useCallback, useState } from 'react'
-import { ActionSheetIOS, Image, StyleSheet, Text } from 'react-native'
+import {
+  Image,
+  Platform,
+  Share,
+  StyleSheet,
+  Text
+} from 'react-native'
 import ImageViewer from 'react-native-image-zoom-viewer'
 import { IImageInfo } from 'react-native-image-zoom-viewer/built/image-viewer.type'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
@@ -69,8 +74,18 @@ const ScreenSharedImagesViewer: React.FC<SharedImagesViewerProp> = ({
    ),
    []
  )
+
+  const onPress = useCallback(() => {
+    switch (Platform.OS) {
+      case 'ios':
+        return Share.share({ url: imageUrls[currentIndex].url })
+      case 'android':
+        return Share.share({ message: imageUrls[currentIndex].url })
+    }
+  }, [currentIndex])
+
  return (
-    <Stack.Navigator screenOptions={{ headerHideShadow: true }}>
+    <Stack.Navigator screenOptions={{ headerHideShadow: true, headerTopInsetEnabled: false }}>
      <Stack.Screen
        name='Screen-Shared-ImagesViewer-Root'
        component={component}
@@ -85,20 +100,7 @@ const ScreenSharedImagesViewer: React.FC<SharedImagesViewerProp> = ({
              {currentIndex + 1} / {imageUrls.length}
            </Text>
          ),
-          headerRight: () => (
-            <HeaderRight
-              content='Share'
-              onPress={() =>
-                ActionSheetIOS.showShareActionSheetWithOptions(
-                  {
-                    url: imageUrls[currentIndex].url
-                  },
-                  () => haptics('Error'),
-                  () => haptics('Success')
-                )
-              }
-            />
-          )
+          headerRight: () => <HeaderRight content='Share' onPress={onPress} />
        }}
      />
    </Stack.Navigator>
--- a/src/startup/dev.ts
+++ b/src/startup/dev.ts
@@ -6,12 +6,12 @@ const dev = () => {
  if (__DEV__) {
    Analytics.setDebugModeEnabled(true)

-    log('log', 'devs', 'initializing wdyr')
-    const whyDidYouRender = require('@welldone-software/why-did-you-render')
-    whyDidYouRender(React, {
-      trackHooks: true,
-      hotReloadBufferMs: 1000
-    })
+    // log('log', 'devs', 'initializing wdyr')
+    // const whyDidYouRender = require('@welldone-software/why-did-you-render')
+    // whyDidYouRender(React, {
+    //   trackHooks: true,
+    //   hotReloadBufferMs: 1000
+    // })
  }
 }

--- a/src/utils/slices/settingsSlice.ts
+++ b/src/utils/slices/settingsSlice.ts
@@ -3,7 +3,7 @@ import { RootState } from '@root/store'
 import * as Analytics from 'expo-firebase-analytics'

 export type SettingsState = {
-  language: 'zh' | 'en' | undefined
+  language: 'zh-CN' | 'en-US' | undefined
  theme: 'light' | 'dark' | 'auto'
  browser: 'internal' | 'external'
  analytics: boolean