Fix #631

src/components/Timeline/Shared/Content.tsx

@@ -3,10 +3,9 @@ import CustomText from '@components/Text'
 import { usePreferencesQuery } from '@utils/queryHooks/preferences'
 import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
-import i18next from 'i18next'
 import React, { useContext } from 'react'
 import { useTranslation } from 'react-i18next'
-import { Platform, View } from 'react-native'
+import { View } from 'react-native'
 import StatusContext from './Context'
 
 export interface Props {
@@ -23,11 +22,6 @@ const TimelineContent: React.FC<Props> = ({ notificationOwnToot = false, setSpoi
 
   const { data: preferences } = usePreferencesQuery()
 
-  const isRTLiOSTextStyles =
-    Platform.OS === 'ios' && status.language && i18next.dir(status.language) === 'rtl'
-      ? ({ writingDirection: 'rtl' } as { writingDirection: 'rtl' })
-      : undefined
-
   return (
     <View>
       {status.spoiler_text?.length ? (
@@ -36,13 +30,7 @@ const TimelineContent: React.FC<Props> = ({ notificationOwnToot = false, setSpoi
             content={status.spoiler_text}
             size={highlighted ? 'L' : 'M'}
             adaptiveSize
-            emojis={status.emojis}
-            mentions={status.mentions}
-            tags={status.tags}
             numberOfLines={999}
-            highlighted={highlighted}
-            disableDetails={disableDetails}
-            textStyles={isRTLiOSTextStyles}
           />
           {inThread ? (
             <CustomText
@@ -60,9 +48,6 @@ const TimelineContent: React.FC<Props> = ({ notificationOwnToot = false, setSpoi
             content={status.content}
             size={highlighted ? 'L' : 'M'}
             adaptiveSize
-            emojis={status.emojis}
-            mentions={status.mentions}
-            tags={status.tags}
             numberOfLines={
               preferences?.['reading:expand:spoilers'] || inThread
                 ? notificationOwnToot
@@ -72,9 +57,6 @@ const TimelineContent: React.FC<Props> = ({ notificationOwnToot = false, setSpoi
             }
             expandHint={t('shared.content.expandHint')}
             setSpoilerExpanded={setSpoilerExpanded}
-            highlighted={highlighted}
-            disableDetails={disableDetails}
-            textStyles={isRTLiOSTextStyles}
           />
         </>
       ) : (
@@ -82,12 +64,7 @@ const TimelineContent: React.FC<Props> = ({ notificationOwnToot = false, setSpoi
           content={status.content}
           size={highlighted ? 'L' : 'M'}
           adaptiveSize
-          emojis={status.emojis}
-          mentions={status.mentions}
-          tags={status.tags}
           numberOfLines={highlighted || inThread ? 999 : notificationOwnToot ? 2 : undefined}
-          disableDetails={disableDetails}
-          textStyles={isRTLiOSTextStyles}
         />
       )}
     </View>

src/components/Timeline/Shared/Context.tsx

@@ -14,6 +14,7 @@ type StatusContextType = {
   spoilerHidden?: boolean
   rawContent?: React.MutableRefObject<string[]> // When highlighted, for translate, edit history
   detectedLanguage?: React.MutableRefObject<string>
+  excludeMentions?: React.MutableRefObject<Mastodon.Mention[]>
 
   highlighted?: boolean
   inThread?: boolean

src/components/Timeline/Shared/HeaderDefault.tsx

@@ -13,6 +13,7 @@ import HeaderSharedAccount from './HeaderShared/Account'
 import HeaderSharedApplication from './HeaderShared/Application'
 import HeaderSharedCreated from './HeaderShared/Created'
 import HeaderSharedMuted from './HeaderShared/Muted'
+import HeaderSharedReplies from './HeaderShared/Replies'
 import HeaderSharedVisibility from './HeaderShared/Visibility'
 
 const TimelineHeaderDefault: React.FC = () => {
@@ -64,6 +65,7 @@ const TimelineHeaderDefault: React.FC = () => {
           />
           <HeaderSharedVisibility visibility={status.visibility} />
           <HeaderSharedMuted muted={status.muted} />
+          <HeaderSharedReplies />
           <HeaderSharedApplication application={status.application} />
         </View>
       </View>

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

@@ -0,0 +1,50 @@
+import CustomText from '@components/Text'
+import { useNavigation } from '@react-navigation/native'
+import { StyleConstants } from '@utils/styles/constants'
+import { useTheme } from '@utils/styles/ThemeManager'
+import React, { Fragment, useContext } from 'react'
+import { useTranslation } from 'react-i18next'
+import StatusContext from '../Context'
+
+const HeaderSharedReplies: React.FC = () => {
+  const { status, rawContent, excludeMentions, isConversation } = useContext(StatusContext)
+  if (!isConversation) return null
+
+  const navigation = useNavigation<any>()
+  const { t } = useTranslation('componentTimeline')
+  const { colors } = useTheme()
+
+  const mentionsBeginning = rawContent?.current?.[0]
+    .match(new RegExp(/^(?:@\S+\s+)+/))?.[0]
+    ?.match(new RegExp(/@\S+/, 'g'))
+  excludeMentions &&
+    (excludeMentions.current =
+      mentionsBeginning?.length && status?.mentions
+        ? status.mentions.filter(mention => mentionsBeginning.includes(`@${mention.username}`))
+        : [])
+
+  return excludeMentions?.current.length ? (
+    <CustomText
+      fontStyle='S'
+      style={{
+        marginLeft: StyleConstants.Spacing.S,
+        flexDirection: 'row',
+        color: colors.secondary
+      }}
+    >
+      Replies
+      {excludeMentions.current.map((mention, index) => (
+        <Fragment key={index}>
+          {' '}
+          <CustomText
+            style={{ color: colors.blue, paddingLeft: StyleConstants.Spacing.S }}
+            children={`@${mention.username}`}
+            onPress={() => navigation.push('Tab-Shared-Account', { account: mention })}
+          />
+        </Fragment>
+      ))}
+    </CustomText>
+  ) : null
+}
+
+export default HeaderSharedReplies