Fix visual bugs

Somehow the `onError` of `react-native-fast-image` doesn't work anymore as expected. Maybe because the underlying `SDWebImage` is being patched to other versions.

src/components/GracefullyImage.tsx

@@ -53,26 +53,17 @@ const GracefullyImage = ({
 }: Props) => {
   const { reduceMotionEnabled } = useAccessibility()
   const { colors } = useTheme()
-  const [originalFailed, setOriginalFailed] = useState(false)
   const [imageLoaded, setImageLoaded] = useState(false)
 
-  const source = originalFailed
-    ? { uri: uri.remote || undefined }
-    : {
-        uri: reduceMotionEnabled && uri.static ? uri.static : uri.original
-      }
-
+  const source = {
+    uri: reduceMotionEnabled && uri.static ? uri.static : uri.original
+  }
   const onLoad = () => {
     setImageLoaded(true)
     if (setImageDimensions && source.uri) {
       Image.getSize(source.uri, (width, height) => setImageDimensions({ width, height }))
     }
   }
-  const onError = () => {
-    if (!originalFailed) {
-      setOriginalFailed(true)
-    }
-  }
 
   const blurhashView = useMemo(() => {
     if (hidden || !imageLoaded) {
@@ -101,10 +92,11 @@ const GracefullyImage = ({
         />
       ) : null}
       <FastImage
-        source={source}
+        source={{
+          uri: reduceMotionEnabled && uri.static ? uri.static : uri.original
+        }}
         style={[{ flex: 1 }, imageStyle]}
         onLoad={onLoad}
-        onError={onError}
       />
       {blurhashView}
     </Pressable>

src/components/Relationship/Outgoing.tsx

@@ -13,6 +13,8 @@ import { useQueryClient } from '@tanstack/react-query'
 import { useSelector } from 'react-redux'
 import { checkInstanceFeature } from '@utils/slices/instancesSlice'
 import { StyleConstants } from '@utils/styles/constants'
+import { View } from 'react-native'
+import { useRoute } from '@react-navigation/native'
 
 export interface Props {
   id: Mastodon.Account['id']
@@ -122,9 +124,12 @@ const RelationshipOutgoing: React.FC<Props> = ({ id }: Props) => {
     }
   }
 
+  const { name } = useRoute()
+  const isPageNotifications = name === 'Tab-Notifications-Root'
+
   return (
-    <>
-      {canFollowNotify && query.data?.following ? (
+    <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+      {!isPageNotifications && canFollowNotify && query.data?.following ? (
         <Button
           type='icon'
           content={query.data.notifying ? 'BellOff' : 'Bell'}
@@ -151,7 +156,7 @@ const RelationshipOutgoing: React.FC<Props> = ({ id }: Props) => {
         loading={query.isLoading || mutation.isLoading}
         disabled={query.isError || query.data?.blocked_by}
       />
-    </>
+    </View>
   )
 }
 

src/screens/Tabs/Shared/Account/Header.tsx

@@ -1,9 +1,8 @@
 import GracefullyImage from '@components/GracefullyImage'
 import navigationRef from '@helpers/navigationRef'
 import { getInstanceActive } from '@utils/slices/instancesSlice'
-import { useTheme } from '@utils/styles/ThemeManager'
 import React from 'react'
-import { Dimensions, Image, Pressable } from 'react-native'
+import { Dimensions, Image } from 'react-native'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import { useSelector } from 'react-redux'
 
@@ -12,13 +11,14 @@ export interface Props {
 }
 
 const AccountHeader: React.FC<Props> = ({ account }) => {
-  const { colors } = useTheme()
   const topInset = useSafeAreaInsets().top
 
   useSelector(getInstanceActive)
 
   return (
-    <Pressable
+    <GracefullyImage
+      uri={{ original: account?.header, static: account?.header_static }}
+      style={{ height: Dimensions.get('window').width / 3 + topInset }}
       onPress={() => {
         if (account) {
           Image.getSize(account.header, (width, height) =>
@@ -30,15 +30,7 @@ const AccountHeader: React.FC<Props> = ({ account }) => {
           )
         }
       }}
-    >
-      <GracefullyImage
-        uri={{ original: account?.header, static: account?.header_static }}
-        style={{
-          height: Dimensions.get('window').width / 3 + topInset,
-          backgroundColor: colors.disabled
-        }}
-      />
-    </Pressable>
+    />
   )
 }
 

src/screens/Tabs/Shared/Account/Information.tsx

@@ -17,51 +17,39 @@ export interface Props {
   account: Mastodon.Account | undefined
 }
 
-const AccountInformation = React.memo(
-  ({ account }: Props) => {
-    const { colors } = useTheme()
+const AccountInformation: React.FC<Props> = ({ account }) => {
+  const { colors } = useTheme()
 
-    const { name } = useRoute()
-    const myInfo = name !== 'Tab-Shared-Account'
+  const { name } = useRoute()
+  const myInfo = name !== 'Tab-Shared-Account'
 
-    return (
-      <View style={styles.base}>
-        <Placeholder
-          Animation={props => (
-            <Fade {...props} style={{ backgroundColor: colors.shimmerHighlight }} />
-          )}
-        >
-          <View style={styles.avatarAndActions}>
-            <AccountInformationAvatar account={account} myInfo={myInfo} />
-            <AccountInformationActions account={account} myInfo={myInfo} />
-          </View>
+  return (
+    <View style={styles.base}>
+      <Placeholder
+        Animation={props => (
+          <Fade {...props} style={{ backgroundColor: colors.shimmerHighlight }} />
+        )}
+      >
+        <View style={styles.avatarAndActions}>
+          <AccountInformationAvatar account={account} myInfo={myInfo} />
+          <AccountInformationActions account={account} myInfo={myInfo} />
+        </View>
 
-          <AccountInformationName account={account} />
+        <AccountInformationName account={account} />
 
-          <AccountInformationAccount account={account} />
+        <AccountInformationAccount account={account} />
 
-          <AccountInformationFields account={account} myInfo={myInfo} />
+        <AccountInformationFields account={account} myInfo={myInfo} />
 
-          <AccountInformationNote account={account} myInfo={myInfo} />
+        <AccountInformationNote account={account} myInfo={myInfo} />
 
-          <AccountInformationCreated account={account} hidden={myInfo} />
+        <AccountInformationCreated account={account} hidden={myInfo} />
 
-          <AccountInformationStats account={account} myInfo={myInfo} />
-        </Placeholder>
-      </View>
-    )
-  },
-  (prev, next) => {
-    let skipUpdate = true
-    if (prev.account?.id !== next.account?.id) {
-      skipUpdate = false
-    }
-    if (prev.account?.acct === next.account?.acct) {
-      skipUpdate = false
-    }
-    return skipUpdate
-  }
-)
+        <AccountInformationStats account={account} myInfo={myInfo} />
+      </Placeholder>
+    </View>
+  )
+}
 
 const styles = StyleSheet.create({
   base: {

src/screens/Tabs/Shared/Account/Information/Avatar.tsx

@@ -6,7 +6,6 @@ import { TabLocalStackParamList } from '@utils/navigation/navigators'
 import { getInstanceActive } from '@utils/slices/instancesSlice'
 import { StyleConstants } from '@utils/styles/constants'
 import React from 'react'
-import { Pressable } from 'react-native'
 import { useSelector } from 'react-redux'
 
 export interface Props {
@@ -18,7 +17,15 @@ const AccountInformationAvatar: React.FC<Props> = ({ account, myInfo }) => {
   const navigation = useNavigation<StackNavigationProp<TabLocalStackParamList>>()
   useSelector(getInstanceActive)
   return (
-    <Pressable
+    <GracefullyImage
+      key={account?.avatar}
+      style={{
+        borderRadius: 8,
+        overflow: 'hidden',
+        width: StyleConstants.Avatar.L,
+        height: StyleConstants.Avatar.L
+      }}
+      uri={{ original: account?.avatar, static: account?.avatar_static }}
       onPress={() => {
         if (account) {
           if (myInfo) {
@@ -33,19 +40,7 @@ const AccountInformationAvatar: React.FC<Props> = ({ account, myInfo }) => {
           }
         }
       }}
-      style={{
-        borderRadius: 8,
-        overflow: 'hidden',
-        width: StyleConstants.Avatar.L,
-        height: StyleConstants.Avatar.L
-      }}
-    >
-      <GracefullyImage
-        key={account?.avatar}
-        style={{ flex: 1 }}
-        uri={{ original: account?.avatar, static: account?.avatar_static }}
-      />
-    </Pressable>
+    />
   )
 }