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/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>
+    />
   )
 }