upd: modal img

Deskripsi:
- view foto profile
- view foto detail member
- view image banner

No Issues

app/(application)/member/[id].tsx

@@ -5,13 +5,15 @@ import LabelStatus from "@/components/labelStatus";
 import HeaderRightMemberDetail from "@/components/member/headerMemberDetail";
 import Skeleton from "@/components/skeleton";
 import Text from "@/components/Text";
+import { assetUserImage } from "@/constants/AssetsError";
 import { ConstEnv } from "@/constants/ConstEnv";
 import { valueRoleUser } from "@/constants/RoleUser";
 import Styles from "@/constants/Styles";
 import { apiGetProfile } from "@/lib/api";
 import { router, Stack, useLocalSearchParams } from "expo-router";
 import { useEffect, useState } from "react";
-import { RefreshControl, SafeAreaView, ScrollView, View } from "react-native";
+import { Pressable, RefreshControl, SafeAreaView, ScrollView, View } from "react-native";
+import ImageViewing from 'react-native-image-viewing';
 import Toast from "react-native-toast-message";
 import { useSelector } from "react-redux";
 
@@ -32,12 +34,13 @@ type Props = {
 export default function MemberDetail() {
    const { id } = useLocalSearchParams<{ id: string }>();
    const [data, setData] = useState<Props>()
-   const [error, setError] = useState(false)
+   const [errorImg, setErrorImg] = useState(false)
    const entityUser = useSelector((state: any) => state.user)
    const [isEdit, setEdit] = useState(true)
    const arrSkeleton = Array.from({ length: 5 }, (_, index) => index)
    const [loading, setLoading] = useState(true)
    const [refreshing, setRefreshing] = useState(false)
+   const [preview, setPreview] = useState(false)
 
    async function handleLoad(loading: boolean) {
       try {
@@ -100,7 +103,9 @@ export default function MemberDetail() {
                      </>
                      :
                      <>
-                        <ImageUser src={`${ConstEnv.url_storage}/files/${data?.img}`} size="lg" />
+                        <Pressable onPress={() => setPreview(true)}>
+                           <ImageUser src={`${ConstEnv.url_storage}/files/${data?.img}`} size="lg" onError={setErrorImg} />
+                        </Pressable>
                         <Text style={[Styles.textSubtitle, Styles.cWhite, Styles.mt10, { textAlign: 'center' }]}>{data?.name}</Text>
                         <Text style={[Styles.textMediumNormal, Styles.cWhite]}>{data?.role}</Text>
                      </>
@@ -136,6 +141,14 @@ export default function MemberDetail() {
 
             </View>
          </ScrollView>
+
+         <ImageViewing
+            images={[{ uri: errorImg ? assetUserImage.uri : `${ConstEnv.url_storage}/files/${data?.img}` }]}
+            imageIndex={0}
+            visible={preview}
+            onRequestClose={() => setPreview(false)}
+            doubleTapToZoomEnabled
+         />
       </SafeAreaView>
    )
 }