Fixed #446

src/components/Timeline/Default.tsx

@@ -16,8 +16,8 @@ import { getInstanceAccount } from '@utils/slices/instancesSlice'
 import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
 import { uniqBy } from 'lodash'
-import React, { useCallback, useRef } from 'react'
-import { Pressable, View } from 'react-native'
+import React, { useRef } from 'react'
+import { Pressable, StyleProp, View, ViewStyle } from 'react-native'
 import { useSelector } from 'react-redux'
 import TimelineContextMenu from './Shared/ContextMenu'
 import TimelineFeedback from './Shared/Feedback'
@@ -45,6 +45,10 @@ const TimelineDefault: React.FC<Props> = ({
   disableDetails = false,
   disableOnPress = false
 }) => {
+  if (highlighted) {
+    disableOnPress = true
+  }
+
   const { colors } = useTheme()
   const instanceAccount = useSelector(getInstanceAccount, () => true)
   const navigation = useNavigation<StackNavigationProp<TabLocalStackParamList>>()
@@ -63,19 +67,100 @@ const TimelineDefault: React.FC<Props> = ({
     return <TimelineFiltered phrase={filtered} />
   }
 
-  const onPress = useCallback(() => {
+  const onPress = () => {
     analytics('timeline_default_press', {
       page: queryKey ? queryKey[1].page : origin
     })
-    !disableOnPress &&
-      !highlighted &&
-      navigation.push('Tab-Shared-Toot', {
-        toot: actualStatus,
-        rootQueryKey: queryKey
-      })
-  }, [])
+    navigation.push('Tab-Shared-Toot', {
+      toot: actualStatus,
+      rootQueryKey: queryKey
+    })
+  }
 
-  return (
+  const mainStyle: StyleProp<ViewStyle> = {
+    padding: StyleConstants.Spacing.Global.PagePadding,
+    backgroundColor: colors.backgroundDefault,
+    paddingBottom: disableDetails ? StyleConstants.Spacing.Global.PagePadding : 0
+  }
+  const main = () => (
+    <>
+      {item.reblog ? (
+        <TimelineActioned action='reblog' account={item.account} />
+      ) : item._pinned ? (
+        <TimelineActioned action='pinned' account={item.account} />
+      ) : null}
+
+      <View style={{ flex: 1, width: '100%', flexDirection: 'row' }}>
+        <TimelineAvatar
+          queryKey={disableOnPress ? undefined : queryKey}
+          account={actualStatus.account}
+          highlighted={highlighted}
+        />
+        <TimelineHeaderDefault
+          queryKey={disableOnPress ? undefined : queryKey}
+          status={actualStatus}
+          highlighted={highlighted}
+        />
+      </View>
+
+      <View
+        style={{
+          paddingTop: highlighted ? StyleConstants.Spacing.S : 0,
+          paddingLeft: highlighted ? 0 : StyleConstants.Avatar.M + StyleConstants.Spacing.S
+        }}
+      >
+        {typeof actualStatus.content === 'string' && actualStatus.content.length > 0 ? (
+          <TimelineContent
+            status={actualStatus}
+            highlighted={highlighted}
+            disableDetails={disableDetails}
+          />
+        ) : null}
+        {queryKey && actualStatus.poll ? (
+          <TimelinePoll
+            queryKey={queryKey}
+            rootQueryKey={rootQueryKey}
+            statusId={actualStatus.id}
+            poll={actualStatus.poll}
+            reblog={item.reblog ? true : false}
+            sameAccount={ownAccount}
+          />
+        ) : null}
+        {!disableDetails &&
+        Array.isArray(actualStatus.media_attachments) &&
+        actualStatus.media_attachments.length ? (
+          <TimelineAttachment status={actualStatus} />
+        ) : null}
+        {!disableDetails && actualStatus.card ? <TimelineCard card={actualStatus.card} /> : null}
+        {!disableDetails ? (
+          <TimelineFullConversation queryKey={queryKey} status={actualStatus} />
+        ) : null}
+        <TimelineTranslate status={actualStatus} highlighted={highlighted} />
+        <TimelineFeedback status={actualStatus} highlighted={highlighted} />
+      </View>
+
+      {queryKey && !disableDetails ? (
+        <TimelineActions
+          queryKey={queryKey}
+          rootQueryKey={rootQueryKey}
+          highlighted={highlighted}
+          status={actualStatus}
+          ownAccount={ownAccount}
+          accts={uniqBy(
+            ([actualStatus.account] as Mastodon.Account[] & Mastodon.Mention[])
+              .concat(actualStatus.mentions)
+              .filter(d => d?.id !== instanceAccount?.id),
+            d => d?.id
+          ).map(d => d?.acct)}
+          reblog={item.reblog ? true : false}
+        />
+      ) : null}
+    </>
+  )
+
+  return disableOnPress ? (
+    <View style={mainStyle}>{main()}</View>
+  ) : (
     <TimelineContextMenu
       copiableContent={copiableContent}
       status={actualStatus}
@@ -84,86 +169,11 @@ const TimelineDefault: React.FC<Props> = ({
     >
       <Pressable
         accessible={highlighted ? false : true}
-        style={{
-          padding: StyleConstants.Spacing.Global.PagePadding,
-          backgroundColor: colors.backgroundDefault,
-          paddingBottom:
-            disableDetails && disableOnPress ? StyleConstants.Spacing.Global.PagePadding : 0
-        }}
+        style={mainStyle}
         onPress={onPress}
         onLongPress={() => {}}
       >
-        {item.reblog ? (
-          <TimelineActioned action='reblog' account={item.account} />
-        ) : item._pinned ? (
-          <TimelineActioned action='pinned' account={item.account} />
-        ) : null}
-
-        <View style={{ flex: 1, width: '100%', flexDirection: 'row' }}>
-          <TimelineAvatar
-            queryKey={disableOnPress ? undefined : queryKey}
-            account={actualStatus.account}
-            highlighted={highlighted}
-          />
-          <TimelineHeaderDefault
-            queryKey={disableOnPress ? undefined : queryKey}
-            status={actualStatus}
-            highlighted={highlighted}
-          />
-        </View>
-
-        <View
-          style={{
-            paddingTop: highlighted ? StyleConstants.Spacing.S : 0,
-            paddingLeft: highlighted ? 0 : StyleConstants.Avatar.M + StyleConstants.Spacing.S
-          }}
-        >
-          {typeof actualStatus.content === 'string' && actualStatus.content.length > 0 ? (
-            <TimelineContent
-              status={actualStatus}
-              highlighted={highlighted}
-              disableDetails={disableDetails}
-            />
-          ) : null}
-          {queryKey && actualStatus.poll ? (
-            <TimelinePoll
-              queryKey={queryKey}
-              rootQueryKey={rootQueryKey}
-              statusId={actualStatus.id}
-              poll={actualStatus.poll}
-              reblog={item.reblog ? true : false}
-              sameAccount={ownAccount}
-            />
-          ) : null}
-          {!disableDetails &&
-          Array.isArray(actualStatus.media_attachments) &&
-          actualStatus.media_attachments.length ? (
-            <TimelineAttachment status={actualStatus} />
-          ) : null}
-          {!disableDetails && actualStatus.card ? <TimelineCard card={actualStatus.card} /> : null}
-          {!disableDetails ? (
-            <TimelineFullConversation queryKey={queryKey} status={actualStatus} />
-          ) : null}
-          <TimelineTranslate status={actualStatus} highlighted={highlighted} />
-          <TimelineFeedback status={actualStatus} highlighted={highlighted} />
-        </View>
-
-        {queryKey && !disableDetails ? (
-          <TimelineActions
-            queryKey={queryKey}
-            rootQueryKey={rootQueryKey}
-            highlighted={highlighted}
-            status={actualStatus}
-            ownAccount={ownAccount}
-            accts={uniqBy(
-              ([actualStatus.account] as Mastodon.Account[] & Mastodon.Mention[])
-                .concat(actualStatus.mentions)
-                .filter(d => d?.id !== instanceAccount?.id),
-              d => d?.id
-            ).map(d => d?.acct)}
-            reblog={item.reblog ? true : false}
-          />
-        ) : null}
+        {main()}
       </Pressable>
     </TimelineContextMenu>
   )