Fixed #452

Unfortunately iOS does not display RTL languages automatically like Android does, so some simple JS library is needed

src/@types/untyped.d.ts

@@ -3,6 +3,7 @@ declare module 'htmlparser2-without-node-native'
 declare module 'react-native-feather'
 declare module 'react-native-htmlview'
 declare module 'react-native-toast-message'
+declare module 'rtl-detect'
 
 declare module '@helpers/features' {
   const features: { feature: string; version: number; reference?: string }[]

src/components/Parse/HTML.tsx

@@ -13,7 +13,7 @@ import { useTheme } from '@utils/styles/ThemeManager'
 import { isEqual } from 'lodash'
 import React, { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { Platform, Pressable, View } from 'react-native'
+import { Platform, Pressable, TextStyleIOS, View } from 'react-native'
 import HTMLView from 'react-native-htmlview'
 import { useSelector } from 'react-redux'
 
@@ -154,6 +154,7 @@ const renderNode = ({
 export interface Props {
   content: string
   size?: 'S' | 'M' | 'L'
+  textStyles?: TextStyleIOS
   adaptiveSize?: boolean
   emojis?: Mastodon.Emoji[]
   mentions?: Mastodon.Mention[]
@@ -171,6 +172,7 @@ const ParseHTML = React.memo(
   ({
     content,
     size = 'M',
+    textStyles,
     adaptiveSize = false,
     emojis,
     mentions,
@@ -294,6 +296,7 @@ const ParseHTML = React.memo(
                 }
               }}
               style={{
+                ...textStyles,
                 height: numberOfLines === 1 && !expanded ? 0 : undefined
               }}
               numberOfLines={

src/components/Timeline/Shared/Content.tsx

@@ -2,7 +2,9 @@ import { ParseHTML } from '@components/Parse'
 import { getInstanceAccount } from '@utils/slices/instancesSlice'
 import React, { useContext } from 'react'
 import { useTranslation } from 'react-i18next'
+import { Platform } from 'react-native'
 import { useSelector } from 'react-redux'
+import { isRtlLang } from 'rtl-detect'
 import StatusContext from './Context'
 
 export interface Props {
@@ -31,6 +33,11 @@ const TimelineContent: React.FC<Props> = ({ notificationOwnToot = false, setSpoi
             numberOfLines={999}
             highlighted={highlighted}
             disableDetails={disableDetails}
+            textStyles={
+              Platform.OS === 'ios' && status.language && isRtlLang(status.language)
+                ? { writingDirection: 'rtl' }
+                : undefined
+            }
           />
           <ParseHTML
             content={status.content}
@@ -50,6 +57,11 @@ const TimelineContent: React.FC<Props> = ({ notificationOwnToot = false, setSpoi
             setSpoilerExpanded={setSpoilerExpanded}
             highlighted={highlighted}
             disableDetails={disableDetails}
+            textStyles={
+              Platform.OS === 'ios' && status.language && isRtlLang(status.language)
+                ? { writingDirection: 'rtl' }
+                : undefined
+            }
           />
         </>
       ) : (
@@ -62,6 +74,11 @@ const TimelineContent: React.FC<Props> = ({ notificationOwnToot = false, setSpoi
           tags={status.tags}
           numberOfLines={highlighted || inThread ? 999 : notificationOwnToot ? 2 : undefined}
           disableDetails={disableDetails}
+          textStyles={
+            Platform.OS === 'ios' && status.language && isRtlLang(status.language)
+              ? { writingDirection: 'rtl' }
+              : undefined
+          }
         />
       )}
     </>