Fixed #60

package.json

@@ -46,7 +46,6 @@
     "expo-firebase-analytics": "~2.6.0",
     "expo-haptics": "~8.4.0",
     "expo-image-picker": "~9.2.0",
-    "expo-linear-gradient": "~8.4.0",
     "expo-linking": "~2.0.1",
     "expo-localization": "~9.1.0",
     "expo-notifications": "~0.8.2",

src/components/Parse/HTML.tsx

@@ -9,10 +9,9 @@ import { StyleConstants } from '@utils/styles/constants'
 import layoutAnimation from '@utils/styles/layoutAnimation'
 import { adaptiveScale } from '@utils/styles/scaling'
 import { useTheme } from '@utils/styles/ThemeManager'
-import { LinearGradient } from 'expo-linear-gradient'
 import React, { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { Platform, Pressable, Text, View } from 'react-native'
+import { Pressable, Text, View } from 'react-native'
 import HTMLView from 'react-native-htmlview'
 import { useSelector } from 'react-redux'
 
@@ -164,7 +163,8 @@ export interface Props {
   disableDetails?: boolean
 }
 
-const ParseHTML: React.FC<Props> = ({
+const ParseHTML = React.memo(
+  ({
     content,
     size = 'M',
     adaptiveSize = false,
@@ -175,7 +175,7 @@ const ParseHTML: React.FC<Props> = ({
     numberOfLines = 10,
     expandHint,
     disableDetails = false
-}) => {
+  }: Props) => {
     const adaptiveFontsize = useSelector(getSettingsFontsize)
     const adaptedFontsize = adaptiveScale(
       StyleConstants.Font.Size[size],
@@ -190,7 +190,7 @@ const ParseHTML: React.FC<Props> = ({
       StackNavigationProp<Nav.TabLocalStackParamList>
     >()
     const route = useRoute()
-  const { theme } = useTheme()
+    const { mode, theme } = useTheme()
     const { t, i18n } = useTranslation('componentParse')
     if (!expandHint) {
       expandHint = t('HTML.defaultHint')
@@ -235,18 +235,9 @@ const ParseHTML: React.FC<Props> = ({
         const [expanded, setExpanded] = useState(false)
 
         const onTextLayout = useCallback(({ nativeEvent }) => {
-        switch (Platform.OS) {
+          if (nativeEvent.lines.length >= numberOfLines) {
-          case 'ios':
-            if (nativeEvent.lines.length === numberOfLines + 1) {
             setExpandAllow(true)
           }
-            break
-          case 'android':
-            if (nativeEvent.lines.length > numberOfLines + 1) {
-              setExpandAllow(true)
-            }
-            break
-        }
         }, [])
 
         return (
@@ -254,7 +245,7 @@ const ParseHTML: React.FC<Props> = ({
             <Text
               children={children}
               onTextLayout={onTextLayout}
-            numberOfLines={expanded ? 999 : numberOfLines + 1}
+              numberOfLines={expanded ? 999 : numberOfLines}
             />
             {expandAllow ? (
               <Pressable
@@ -264,20 +255,10 @@ const ParseHTML: React.FC<Props> = ({
                   setExpanded(!expanded)
                 }}
                 style={{
-                marginTop: expanded
+                  justifyContent: 'center',
-                  ? 0
+                  marginTop: expanded ? 0 : -adaptedLineheight,
-                  : -adaptedLineheight * (numberOfLines === 0 ? 1 : 2)
+                  minHeight: 44,
-              }}
+                  backgroundColor: theme.background
-            >
-              <LinearGradient
-                colors={[
-                  theme.backgroundGradientStart,
-                  theme.backgroundGradientEnd
-                ]}
-                locations={[0, adaptedLineheight / (adaptedFontsize * 5)]}
-                style={{
-                  paddingTop: StyleConstants.Font.Size.S * 2,
-                  paddingBottom: StyleConstants.Font.Size.S
                 }}
               >
                 <Text
@@ -286,18 +267,16 @@ const ParseHTML: React.FC<Props> = ({
                     ...StyleConstants.FontStyle.S,
                     color: theme.primary
                   }}
-                >
+                  children={t(`HTML.expanded.${expanded.toString()}`, {
-                  {expanded
+                    hint: expandHint
-                    ? t('HTML.expanded.true', { hint: expandHint })
+                  })}
-                    : t('HTML.expanded.false', { hint: expandHint })}
+                />
-                </Text>
-              </LinearGradient>
               </Pressable>
             ) : null}
           </View>
         )
       },
-    [theme, i18n.language]
+      [mode, i18n.language]
     )
 
     return (
@@ -308,7 +287,8 @@ const ParseHTML: React.FC<Props> = ({
         renderNode={renderNodeCallback}
       />
     )
-}
+  },
+  () => true
+)
 
-// export default ParseHTML
+export default ParseHTML
-export default React.memo(ParseHTML, () => true)

src/components/Timeline/Shared/Content.tsx

@@ -1,8 +1,6 @@
 import { ParseHTML } from '@components/Parse'
-import { StyleConstants } from '@utils/styles/constants'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
-import { View } from 'react-native'
 
 export interface Props {
   status: Mastodon.Status
@@ -24,7 +22,6 @@ const TimelineContent = React.memo(
       <>
         {status.spoiler_text ? (
           <>
-            <View style={{ marginBottom: StyleConstants.Font.Size.M }}>
             <ParseHTML
               content={status.spoiler_text}
               size={highlighted ? 'L' : 'M'}
@@ -35,7 +32,6 @@ const TimelineContent = React.memo(
               numberOfLines={999}
               disableDetails={disableDetails}
             />
-            </View>
             <ParseHTML
               content={status.content}
               size={highlighted ? 'L' : 'M'}
@@ -43,7 +39,7 @@ const TimelineContent = React.memo(
               emojis={status.emojis}
               mentions={status.mentions}
               tags={status.tags}
-              numberOfLines={0}
+              numberOfLines={1}
               expandHint={t('shared.content.expandHint')}
               disableDetails={disableDetails}
             />