Fixed #359

src/components/Parse/HTML.tsx

@@ -249,37 +249,23 @@ const ParseHTML = React.memo(
       ({ children }: any) => {
         const { t } = useTranslation('componentParse')
 
-        const [expandAllow, setExpandAllow] = useState(false)
+        const [totalLines, setTotalLines] = useState<number>()
         const [expanded, setExpanded] = useState(highlighted)
 
         return (
           <View style={{ overflow: 'hidden' }}>
-            <CustomText
+            {typeof totalLines === 'number' ? (
-              children={children}
-              onTextLayout={({ nativeEvent }) => {
-                if (
-                  numberOfLines === 1 ||
-                  nativeEvent.lines.length >= numberOfLines + 5
-                ) {
-                  setExpandAllow(true)
-                }
-              }}
-              numberOfLines={
-                expandAllow ? (expanded ? 999 : numberOfLines) : undefined
-              }
-              selectable={selectable}
-            />
-            {expandAllow ? (
               <Pressable
-                accessibilityLabel=''
+                accessibilityLabel={t('HTML.accessibilityHint')}
                 onPress={() => {
-                  analytics('status_readmore', { allow: expandAllow, expanded })
+                  analytics('status_readmore', { totalLines, expanded })
                   layoutAnimation()
                   setExpanded(!expanded)
                 }}
                 style={{
+                  flexDirection: 'row',
                   justifyContent: 'center',
-                  marginTop: expanded ? 0 : -adaptedLineheight,
+                  alignItems: 'center',
                   minHeight: 44,
                   backgroundColor: colors.backgroundDefault
                 }}
@@ -288,14 +274,47 @@ const ParseHTML = React.memo(
                   style={{
                     textAlign: 'center',
                     ...StyleConstants.FontStyle.S,
-                    color: colors.primaryDefault
+                    color: colors.primaryDefault,
+                    marginRight: StyleConstants.Spacing.S
                   }}
                   children={t(`HTML.expanded.${expanded.toString()}`, {
-                    hint: expandHint
+                    hint: expandHint,
+                    totalLines:
+                      numberOfLines > 1 && typeof totalLines === 'number'
+                        ? t('HTML.totalLines', { count: totalLines })
+                        : ''
                   })}
                 />
+                <Icon
+                  name={expanded ? 'Minimize2' : 'Maximize2'}
+                  color={colors.primaryDefault}
+                  strokeWidth={2}
+                  size={StyleConstants.Font.Size[size]}
+                />
               </Pressable>
             ) : null}
+            <CustomText
+              children={children}
+              onTextLayout={({ nativeEvent }) => {
+                if (
+                  numberOfLines === 1 ||
+                  nativeEvent.lines.length >= numberOfLines + 5
+                ) {
+                  setTotalLines(nativeEvent.lines.length)
+                }
+              }}
+              style={{
+                height: numberOfLines === 1 && !expanded ? 0 : undefined
+              }}
+              numberOfLines={
+                typeof totalLines === 'number'
+                  ? expanded
+                    ? 999
+                    : numberOfLines
+                  : undefined
+              }
+              selectable={selectable}
+            />
           </View>
         )
       },

src/components/Timeline/Default.tsx

@@ -5,6 +5,7 @@ import TimelineAttachment from '@components/Timeline/Shared/Attachment'
 import TimelineAvatar from '@components/Timeline/Shared/Avatar'
 import TimelineCard from '@components/Timeline/Shared/Card'
 import TimelineContent from '@components/Timeline/Shared/Content'
+// @ts-ignore
 import TimelineHeaderDefault from '@components/Timeline/Shared/HeaderDefault'
 import TimelinePoll from '@components/Timeline/Shared/Poll'
 import { useNavigation } from '@react-navigation/native'

src/components/Timeline/Notifications.tsx

@@ -5,6 +5,7 @@ import TimelineAttachment from '@components/Timeline/Shared/Attachment'
 import TimelineAvatar from '@components/Timeline/Shared/Avatar'
 import TimelineCard from '@components/Timeline/Shared/Card'
 import TimelineContent from '@components/Timeline/Shared/Content'
+// @ts-ignore
 import TimelineHeaderNotification from '@components/Timeline/Shared/HeaderNotification'
 import TimelinePoll from '@components/Timeline/Shared/Poll'
 import { useNavigation } from '@react-navigation/native'

src/i18n/en/components/parse.json

@@ -1,9 +1,11 @@
 {
   "HTML": {
+    "accessibilityHint": "Tap to expand or collapse content",
     "expanded": {
-      "true": "Fold {{hint}}",
+      "true": "{{hint}}{{totalLines}}",
-      "false": "Expand {{hint}}"
+      "false": "{{hint}}{{totalLines}}"
     },
-    "defaultHint": "article"
+    "totalLines": " ({{count}} lines)",
+    "defaultHint": "Long toot"
   }
 }

src/i18n/en/components/timeline.json

@@ -81,7 +81,7 @@
       "accessibilityHint": "Tap to go to {{name}}'s page"
     },
     "content": {
-      "expandHint": "hidden content"
+      "expandHint": "Hidden content"
     },
     "filtered": "Filtered",
     "fullConversation": "Read conversations",