Fixed #575

src/screens/ImagesViewer.tsx

@@ -25,7 +25,7 @@ const ZoomFlatList = createZoomListComponent(FlatList)
 
 const ScreenImagesViewer = ({
   route: {
-    params: { imageUrls, id }
+    params: { imageUrls, id, hideCounter }
   },
   navigation
 }: RootStackScreenProps<'Screen-ImagesViewer'>) => {
@@ -159,7 +159,9 @@ const ScreenImagesViewer = ({
         }}
       >
         <HeaderLeft content='X' native={false} background onPress={() => navigation.goBack()} />
-        <HeaderCenter inverted content={`${currentIndex + 1} / ${imageUrls.length}`} />
+        {!hideCounter ? (
+          <HeaderCenter inverted content={`${currentIndex + 1} / ${imageUrls.length}`} />
+        ) : null}
         <HeaderRight
           accessibilityLabel={t('content.actions.accessibilityLabel')}
           accessibilityHint={t('content.actions.accessibilityHint')}

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

@@ -1,47 +1,45 @@
-import Button from '@components/Button'
 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, View } from 'react-native'
+import { Dimensions, Image, Pressable } from 'react-native'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
+import { useSelector } from 'react-redux'
 
 export interface Props {
   account?: Mastodon.Account
-  edit?: boolean
 }
 
-const AccountHeader = React.memo(
-  ({ account, edit }: Props) => {
-    const { colors } = useTheme()
-    const topInset = useSafeAreaInsets().top
+const AccountHeader: React.FC<Props> = ({ account }) => {
+  const { colors } = useTheme()
+  const topInset = useSafeAreaInsets().top
 
-    return (
-      <View>
-        <GracefullyImage
-          uri={{ original: account?.header, static: account?.header_static }}
-          style={{
-            height: Dimensions.get('screen').width / 3 + topInset,
-            backgroundColor: colors.disabled
-          }}
-        />
-        {edit ? (
-          <View
-            style={{
-              position: 'absolute',
-              width: '100%',
-              height: '100%',
-              alignContent: 'center',
-              justifyContent: 'center',
-              alignItems: 'center'
-            }}
-          >
-            <Button type='icon' content='Edit' round onPress={() => {}} />
-          </View>
-        ) : null}
-      </View>
-    )
-  },
-  (_, next) => next.account === undefined
-)
+  useSelector(getInstanceActive)
+
+  return (
+    <Pressable
+      onPress={() => {
+        if (account) {
+          Image.getSize(account.header, (width, height) =>
+            navigationRef.navigate('Screen-ImagesViewer', {
+              imageUrls: [{ id: 'avatar', url: account.header, width, height }],
+              id: 'avatar',
+              hideCounter: true
+            })
+          )
+        }
+      }}
+    >
+      <GracefullyImage
+        uri={{ original: account?.header, static: account?.header_static }}
+        style={{
+          height: Dimensions.get('screen').width / 3 + topInset,
+          backgroundColor: colors.disabled
+        }}
+      />
+    </Pressable>
+  )
+}
 
 export default AccountHeader

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

@@ -1,28 +1,37 @@
-import Button from '@components/Button'
 import GracefullyImage from '@components/GracefullyImage'
+import navigationRef from '@helpers/navigationRef'
 import { useNavigation } from '@react-navigation/native'
 import { StackNavigationProp } from '@react-navigation/stack'
 import { TabLocalStackParamList } from '@utils/navigation/navigators'
 import { getInstanceActive } from '@utils/slices/instancesSlice'
 import { StyleConstants } from '@utils/styles/constants'
 import React from 'react'
-import { Pressable, View } from 'react-native'
+import { Pressable } from 'react-native'
 import { useSelector } from 'react-redux'
 
 export interface Props {
   account: Mastodon.Account | undefined
   myInfo: boolean
-  edit?: boolean
 }
 
-const AccountInformationAvatar: React.FC<Props> = ({ account, myInfo, edit }) => {
+const AccountInformationAvatar: React.FC<Props> = ({ account, myInfo }) => {
   const navigation = useNavigation<StackNavigationProp<TabLocalStackParamList>>()
   useSelector(getInstanceActive)
   return (
     <Pressable
-      disabled={!myInfo}
       onPress={() => {
-        myInfo && account && navigation.push('Tab-Shared-Account', { account })
+        if (account) {
+          if (myInfo) {
+            navigation.push('Tab-Shared-Account', { account })
+            return
+          } else {
+            navigationRef.navigate('Screen-ImagesViewer', {
+              imageUrls: [{ id: 'avatar', url: account.avatar }],
+              id: 'avatar',
+              hideCounter: true
+            })
+          }
+        }
       }}
       style={{
         borderRadius: 8,
@@ -36,20 +45,6 @@ const AccountInformationAvatar: React.FC<Props> = ({ account, myInfo, edit }) =>
         style={{ flex: 1 }}
         uri={{ original: account?.avatar, static: account?.avatar_static }}
       />
-      {edit ? (
-        <View
-          style={{
-            position: 'absolute',
-            width: '100%',
-            height: '100%',
-            alignContent: 'center',
-            justifyContent: 'center',
-            alignItems: 'center'
-          }}
-        >
-          <Button type='icon' content='Edit' round onPress={() => {}} />
-        </View>
-      ) : null}
     </Pressable>
   )
 }