Updates

src/components/Icon.tsx

@@ -1,3 +1,4 @@
+import { StyleConstants } from '@root/utils/styles/constants'
 import React, { createElement } from 'react'
 import { StyleProp, View, ViewStyle } from 'react-native'
 import * as FeatherIcon from 'react-native-feather'
@@ -8,7 +9,6 @@ export interface Props {
   color: string
   fill?: string
   strokeWidth?: number
-  inline?: boolean // When used in line of text, need to drag it down
   style?: StyleProp<ViewStyle>
 }
 
@@ -18,7 +18,6 @@ const Icon: React.FC<Props> = ({
   color,
   fill,
   strokeWidth = 2,
-  inline = false,
   style
 }) => {
   return (
@@ -29,8 +28,7 @@ const Icon: React.FC<Props> = ({
           width: size,
           height: size,
           justifyContent: 'center',
-          alignItems: 'center',
-          marginBottom: inline ? -size * 0.125 : undefined
+          alignItems: 'center'
         }
       ]}
     >

src/components/Parse/Emojis.tsx

@@ -27,8 +27,7 @@ const ParseEmojis: React.FC<Props> = ({
     },
     image: {
       width: StyleConstants.Font.Size[size],
-      height: StyleConstants.Font.Size[size],
-      marginBottom: -StyleConstants.Font.Size[size] * 0.125
+      height: StyleConstants.Font.Size[size]
     }
   })
 
@@ -51,7 +50,6 @@ const ParseEmojis: React.FC<Props> = ({
                   {/* When emoji starts a paragraph, lineHeight will break */}
                   {i === 0 ? <Text> </Text> : null}
                   <Image
-                    // resizeMode='contain'
                     source={{ uri: emojis[emojiIndex].url }}
                     style={[styles.image]}
                   />

src/components/Parse/HTML.tsx

@@ -9,6 +9,8 @@ import React, { useCallback, useMemo, useState } from 'react'
 import { Pressable, Text, View } from 'react-native'
 import HTMLView from 'react-native-htmlview'
 import Animated, {
+  measure,
+  useAnimatedRef,
   useAnimatedStyle,
   useDerivedValue,
   useSharedValue,
@@ -103,7 +105,6 @@ const renderNode = ({
         >
           {!shouldBeTag ? (
             <Icon
-              inline
               color={theme.blue}
               name='ExternalLink'
               size={StyleConstants.Font.Size[size]}
@@ -162,7 +163,13 @@ const ParseHTML: React.FC<Props> = ({
   )
   const textComponent = useCallback(({ children }) => {
     if (children) {
-      return <ParseEmojis content={children.toString()} emojis={emojis} />
+      return (
+        <ParseEmojis
+          content={children.toString()}
+          emojis={emojis}
+          size={size}
+        />
+      )
     } else {
       return null
     }
@@ -171,14 +178,15 @@ const ParseHTML: React.FC<Props> = ({
     ({ children }) => {
       const lineHeight = StyleConstants.Font.LineHeight[size]
 
+      const [lines, setLines] = useState<number | undefined>(undefined)
       const [heightOriginal, setHeightOriginal] = useState<number>()
       const [heightTruncated, setHeightTruncated] = useState<number>()
-      const [allowExpand, setAllowExpand] = useState(false)
-      const [showAllText, setShowAllText] = useState(false)
+      const [expandAllow, setExpandAllow] = useState(false)
+      const [expanded, setExpanded] = useState(false)
 
       const viewHeight = useDerivedValue(() => {
-        if (allowExpand) {
-          if (showAllText) {
+        if (expandAllow) {
+          if (expanded) {
             return heightOriginal as number
           } else {
             return heightTruncated as number
@@ -186,49 +194,29 @@ const ParseHTML: React.FC<Props> = ({
         } else {
           return heightOriginal as number
         }
-      }, [heightOriginal, heightTruncated, allowExpand, showAllText])
+      }, [heightOriginal, heightTruncated, expandAllow, expanded])
       const ViewHeight = useAnimatedStyle(() => {
         return {
-          height: allowExpand
-            ? showAllText
+          height: expandAllow
+            ? expanded
               ? withTiming(viewHeight.value)
               : withTiming(viewHeight.value)
-            : undefined
+            : viewHeight.value
         }
       })
 
-      const calNumberOfLines = useMemo(() => {
-        if (numberOfLines === 0) {
-          // For spoilers without calculation
-          return showAllText ? undefined : 1
-        } else {
-          if (heightOriginal) {
-            if (!heightTruncated) {
-              return numberOfLines
-            } else {
-              return undefined
-            }
-          } else {
-            return undefined
-          }
-        }
-      }, [heightOriginal, heightTruncated, allowExpand, showAllText])
-
       const onLayout = useCallback(
         ({ nativeEvent }) => {
-          if (numberOfLines === 0) {
-            // For spoilers without calculation
-            setAllowExpand(true)
+          if (!heightOriginal) {
+            setHeightOriginal(nativeEvent.layout.height)
+            setLines(numberOfLines === 0 ? 1 : numberOfLines)
           } else {
-            if (!heightOriginal) {
-              setHeightOriginal(nativeEvent.layout.height)
+            if (!heightTruncated) {
+              setHeightTruncated(nativeEvent.layout.height)
+              setLines(undefined)
             } else {
-              if (!heightTruncated) {
-                setHeightTruncated(nativeEvent.layout.height)
-              } else {
-                if (heightOriginal > heightTruncated) {
-                  setAllowExpand(true)
-                }
+              if (heightOriginal > heightTruncated) {
+                setExpandAllow(true)
               }
             }
           }
@@ -239,21 +227,21 @@ const ParseHTML: React.FC<Props> = ({
       return (
         <View>
           <Animated.View style={[ViewHeight, { overflow: 'hidden' }]}>
-            <Text
+            <Animated.Text
+              children={children}
+              onLayout={onLayout}
+              numberOfLines={lines}
               style={{
                 ...StyleConstants.FontStyle[size],
                 color: theme.primary,
-                height: allowExpand ? heightOriginal : undefined
+                height: expandAllow ? heightOriginal : undefined
               }}
-              children={children}
-              numberOfLines={calNumberOfLines}
-              onLayout={onLayout}
             />
           </Animated.View>
-          {allowExpand ? (
+          {expandAllow ? (
             <Pressable
-              onPress={() => setShowAllText(!showAllText)}
-              style={{ marginTop: showAllText ? 0 : -lineHeight * 1.25 }}
+              onPress={() => setExpanded(!expanded)}
+              style={{ marginTop: expanded ? 0 : -lineHeight * 1.25 }}
             >
               <LinearGradient
                 colors={[
@@ -273,7 +261,7 @@ const ParseHTML: React.FC<Props> = ({
                     color: theme.primary
                   }}
                 >
-                  {`${showAllText ? '折叠' : '展开'}${expandHint}`}
+                  {`${expanded ? '折叠' : '展开'}${expandHint}`}
                 </Text>
               </LinearGradient>
             </Pressable>

src/components/Relationship/Incoming.tsx

@@ -32,7 +32,7 @@ const RelationshipIncoming: React.FC<Props> = ({ id }) => {
     onSuccess: ({ body }) => {
       haptics('Success')
       queryClient.setQueryData(relationshipQueryKey, body)
-      queryClient.invalidateQueries(['Notifications', {}])
+      queryClient.refetchQueries(['Notifications'])
     },
     onError: (err: any, { type }) => {
       haptics('Error')