Updates

src/components/GracefullyImage.tsx

@@ -154,7 +154,7 @@ const GracefullyImage: React.FC<Props> = ({
       children={children}
       style={[style, dimension && { ...dimension }]}
       {...(onPress
-        ? !imageVisible
+        ? hidden
           ? { disabled: true }
           : { onPress }
         : { disabled: true })}

src/components/Instance.tsx

@@ -244,6 +244,7 @@ const ComponentInstance: React.FC<Props> = ({
       {type === 'local' && appData ? (
         <InstanceAuth
           instanceDomain={instanceDomain!}
+          instanceUri={instanceQuery.data!.uri}
           appData={appData}
           goBack={goBack}
         />

src/components/Instance/Auth.tsx

@@ -8,12 +8,14 @@ import { useDispatch } from 'react-redux'
 
 export interface Props {
   instanceDomain: string
+  // Domain can be different than uri
+  instanceUri: Mastodon.Instance['uri']
   appData: InstanceLocal['appData']
   goBack?: boolean
 }
 
 const InstanceAuth = React.memo(
-  ({ instanceDomain, appData, goBack }: Props) => {
+  ({ instanceDomain, instanceUri, appData, goBack }: Props) => {
     let redirectUri: string
     switch (Constants.manifest.releaseChannel) {
       case 'production':
@@ -70,6 +72,7 @@ const InstanceAuth = React.memo(
             localAddInstance({
               url: instanceDomain,
               token: accessToken,
+              uri: instanceUri,
               appData
             })
           )

src/components/Parse/Emojis.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
-import { Image, StyleSheet, Text } from 'react-native'
+import { StyleSheet, Text } from 'react-native'
+import { Image } from 'react-native-expo-image-cache'
 import { useTheme } from '@utils/styles/ThemeManager'
 import { StyleConstants } from '@utils/styles/constants'
 
@@ -49,10 +50,7 @@ const ParseEmojis: React.FC<Props> = ({
                 <Text key={i}>
                   {/* When emoji starts a paragraph, lineHeight will break */}
                   {i === 0 ? <Text> </Text> : null}
-                  <Image
-                    source={{ uri: emojis[emojiIndex].url }}
-                    style={[styles.image]}
-                  />
+                  <Image uri={emojis[emojiIndex].url} style={[styles.image]} />
                 </Text>
               )
             } else {

src/components/Parse/HTML.tsx

@@ -68,7 +68,7 @@ const renderNode = ({
             mention => mention.url === href
           )
           const differentAccount = routeParams?.account
-            ? routeParams.account.id !== mentions[accountIndex].id
+            ? routeParams.account.id !== mentions[accountIndex]?.id
             : true
           return (
             <Text

src/components/RelativeTime.tsx

@@ -5,22 +5,20 @@ import TimeAgo from 'react-timeago'
 // @ts-ignore
 import buildFormatter from 'react-timeago/lib/formatters/buildFormatter'
 
-import zh from '@root/i18n/zh/components/relativeTime'
-import en from '@root/i18n/en/components/relativeTime'
-
 export interface Props {
   date: string
 }
 
 const RelativeTime: React.FC<Props> = ({ date }) => {
-  const { i18n } = useTranslation()
-  const mapLanguageToTranslation: { [key: string]: Object } = {
-    'zh-CN': zh,
-    'en-US': en
-  }
-  const formatter = buildFormatter(mapLanguageToTranslation[i18n.language])
+  const { t } = useTranslation('relativeTime')
 
-  return <TimeAgo date={date} formatter={formatter} component={Text} />
+  return (
+    <TimeAgo
+      date={date}
+      component={Text}
+      formatter={buildFormatter(t('strings', { returnObjects: true }))}
+    />
+  )
 }
 
 export default RelativeTime

src/components/Timelines/Timeline.tsx

@@ -56,6 +56,7 @@ const Timeline: React.FC<Props> = ({
     refetch,
     isSuccess,
     isFetching,
+    isLoading,
     hasPreviousPage,
     fetchPreviousPage,
     isFetchingPreviousPage,
@@ -170,7 +171,8 @@ const Timeline: React.FC<Props> = ({
       <RefreshControl
         {...(Platform.OS === 'android' && { enabled: true })}
         refreshing={
-          isFetchingPreviousPage || (isFetching && !isFetchingNextPage)
+          isFetchingPreviousPage ||
+          (isFetching && !isFetchingNextPage && !isLoading)
         }
         onRefresh={() => {
           if (hasPreviousPage) {
@@ -192,7 +194,13 @@ const Timeline: React.FC<Props> = ({
         }}
       />
     ),
-    [hasPreviousPage, isFetchingPreviousPage, isFetching, isFetchingNextPage]
+    [
+      hasPreviousPage,
+      isFetchingPreviousPage,
+      isFetching,
+      isFetchingNextPage,
+      isLoading
+    ]
   )
   const onScrollToIndexFailed = useCallback(error => {
     const offset = error.averageItemLength * error.index
@@ -209,10 +217,10 @@ const Timeline: React.FC<Props> = ({
   return (
     <FlatList
       ref={flRef}
-      windowSize={11}
+      windowSize={8}
       data={flattenData}
-      initialNumToRender={5}
-      maxToRenderPerBatch={5}
+      initialNumToRender={3}
+      maxToRenderPerBatch={3}
       style={styles.flatList}
       renderItem={renderItem}
       onEndReached={onEndReached}

src/components/Timelines/Timeline/Shared/Poll.tsx

@@ -1,9 +1,9 @@
 import Button from '@components/Button'
 import haptics from '@components/haptics'
 import Icon from '@components/Icon'
+import { ParseEmojis } from '@components/Parse'
 import RelativeTime from '@components/RelativeTime'
-import { ParseEmojis } from '@root/components/Parse'
-import { toast } from '@root/components/toast'
+import { toast } from '@components/toast'
 import {
   QueryKeyTimeline,
   useTimelineMutation
@@ -32,7 +32,7 @@ const TimelinePoll: React.FC<Props> = ({
   sameAccount
 }) => {
   const { mode, theme } = useTheme()
-  const { t, i18n } = useTranslation('timeline')
+  const { t } = useTranslation('timeline')
 
   const [allOptions, setAllOptions] = useState(
     new Array(poll.options.length).fill(false)
@@ -220,7 +220,7 @@ const TimelinePoll: React.FC<Props> = ({
           <Icon
             style={styles.optionSelection}
             name={isSelected(index)}
-            size={StyleConstants.Font.Size.L}
+            size={StyleConstants.Font.Size.M}
             color={theme.primary}
           />
           <Text style={styles.optionText}>
@@ -275,6 +275,7 @@ const styles = StyleSheet.create({
     flex: 1
   },
   optionSelection: {
+    paddingTop: StyleConstants.Font.LineHeight.M - StyleConstants.Font.Size.M,
     marginRight: StyleConstants.Spacing.S
   },
   optionPercentage: {