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
+  const source = {
-    ? { uri: uri.remote || undefined }
-    : {
     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 (
-    <>
+    <View style={{ flexDirection: 'row', alignItems: 'center' }}>
-      {canFollowNotify && query.data?.following ? (
+      {!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,8 +17,7 @@ export interface Props {
   account: Mastodon.Account | undefined
 }
 
-const AccountInformation = React.memo(
+const AccountInformation: React.FC<Props> = ({ account }) => {
-  ({ account }: Props) => {
   const { colors } = useTheme()
 
   const { name } = useRoute()
@@ -50,18 +49,7 @@ const AccountInformation = React.memo(
       </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
-  }
-)
 
 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>
   )
 }