upd: modal img

Deskripsi: - view foto profile - view foto detail member - view image banner No Issues
2026-01-23 17:18:08 +08:00
parent b99476a593
commit 013589b9f7
8 changed files with 66 additions and 17 deletions
--- a/app/(application)/banner/index.tsx
+++ b/app/(application)/banner/index.tsx
@@ -18,6 +18,7 @@ import { router, Stack } from "expo-router"
 import * as Sharing from 'expo-sharing'
 import { useState } from "react"
 import { Alert, Image, Platform, RefreshControl, SafeAreaView, ScrollView, View } from "react-native"
+import ImageViewing from 'react-native-image-viewing'
 import * as mime from 'react-native-mime-types'
 import Toast from "react-native-toast-message"
 import { useDispatch, useSelector } from "react-redux"
@@ -38,12 +39,13 @@ export default function BannerList() {
   const dispatch = useDispatch()
   const [refreshing, setRefreshing] = useState(false)
   const [loadingOpen, setLoadingOpen] = useState(false)
+   const [viewImg, setViewImg] = useState(false)

   const handleDeleteEntity = async () => {
      try {
         const hasil = await decryptToken(String(token?.current));
         const deletedEntity = await apiDeleteBanner({ user: hasil }, dataId);
-         if (deletedEntity.success ) {
+         if (deletedEntity.success) {
            Toast.show({ type: 'small', text1: 'Berhasil menghapus data', })
            apiGetBanner({ user: hasil }).then((data) =>
               dispatch(setEntities(data.data))
@@ -167,8 +169,14 @@ export default function BannerList() {
               />
               <MenuItemRow
                  icon={<MaterialCommunityIcons name="file-eye" color="black" size={25} />}
-                  title="Lihat / Share"
-                  onPress={() => { openFile() }}
+                  title="Lihat"
+                  onPress={() => {
+                     setModal(false)
+                     setTimeout(() => {
+                        setViewImg(true);
+                     }, 1000);
+                     // openFile() 
+                  }}
               />
               <MenuItemRow
                  icon={<Ionicons name="trash" color="black" size={25} />}
@@ -184,6 +192,14 @@ export default function BannerList() {
               />
            </View>
         </DrawerBottom>
+
+         <ImageViewing
+            images={[{ uri: `${ConstEnv.url_storage}/files/${selectFile?.image}` }]}
+            imageIndex={0}
+            visible={viewImg}
+            onRequestClose={() => setViewImg(false)}
+            doubleTapToZoomEnabled
+         />
      </SafeAreaView>
   )
 }
--- a/app/(application)/member/[id].tsx
+++ b/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>
   )
 }
--- a/app/(application)/profile.tsx
+++ b/app/(application)/profile.tsx
@@ -3,19 +3,22 @@ import ButtonBackHeader from "@/components/buttonBackHeader";
 import { ButtonHeader } from "@/components/buttonHeader";
 import ItemDetailMember from "@/components/itemDetailMember";
 import Text from "@/components/Text";
+import { assetUserImage } from "@/constants/AssetsError";
 import { ConstEnv } from "@/constants/ConstEnv";
 import Styles from "@/constants/Styles";
 import { useAuthSession } from "@/providers/AuthProvider";
 import { AntDesign } from "@expo/vector-icons";
 import { router, Stack } from "expo-router";
 import { useState } from "react";
-import { Image, SafeAreaView, ScrollView, View } from "react-native";
+import { Image, Pressable, SafeAreaView, ScrollView, View } from "react-native";
+import ImageViewing from 'react-native-image-viewing';
 import { useSelector } from 'react-redux';

 export default function Profile() {
   const { signOut } = useAuthSession()
   const entities = useSelector((state: any) => state.entities)
   const [error, setError] = useState(false)
+   const [preview, setPreview] = useState(false)


   return (
@@ -41,11 +44,13 @@ export default function Profile() {
         <ScrollView style={[Styles.h100]}>
            <View style={{ flexDirection: 'column' }}>
               <View style={[Styles.wrapHeadViewMember]}>
-                  <Image
-                     source={error ? require("../../assets/images/user.jpg") : { uri: `${ConstEnv.url_storage}/files/${entities.img}` }}
-                     onError={() => { setError(true) }}
-                     style={[Styles.userProfileBig]}
-                  />
+                  <Pressable onPress={() => setPreview(true)}>
+                     <Image
+                        source={error ? require("../../assets/images/user.jpg") : { uri: `${ConstEnv.url_storage}/files/${entities.img}` }}
+                        onError={() => { setError(true) }}
+                        style={[Styles.userProfileBig]}
+                     />
+                  </Pressable>
                  <Text style={[Styles.textSubtitle, Styles.cWhite, Styles.mt10]}>{entities.name}</Text>
                  <Text style={[Styles.textMediumNormal, Styles.cWhite]}>{entities.role}</Text>
               </View>
@@ -65,6 +70,13 @@ export default function Profile() {
               </View>
            </View>
         </ScrollView>
+         <ImageViewing
+            images={[{ uri: error ? assetUserImage.uri : `${ConstEnv.url_storage}/files/${entities.img}` }]}
+            imageIndex={0}
+            visible={preview}
+            onRequestClose={() => setPreview(false)}
+            doubleTapToZoomEnabled
+         />
      </SafeAreaView>
   )
 }
--- a/bun.lockb
+++ b/bun.lockb
--- a/components/imageNew.tsx
+++ b/components/imageNew.tsx
@@ -6,17 +6,19 @@ type Props = {
   src: string,
   size?: 'sm' | 'xs' | 'lg'
   border?: boolean
+   onError?: (val:boolean) => void
 }

-export default function ImageUser({ src, size }: Props) {
+export default function ImageUser({ src, size, onError }: Props) {
   const [error, setError] = useState(false)
   return (
      <Image
         source={error ? require('../assets/images/user.jpg') : { uri: src }}
         style={[size == 'xs' ? Styles.userProfileExtraSmall : size == 'lg' ? Styles.userProfileBig : Styles.userProfileSmall, Styles.borderAll]}
-         onError={() =>
+         onError={() => {
            setError(true)
-         }
+            onError?.(true)
+         }}
      />
   )
 }
--- a/constants/AssetsError.ts
+++ b/constants/AssetsError.ts
@@ -0,0 +1,5 @@
+import { Image } from "react-native";
+
+export const assetUserImage = Image.resolveAssetSource(
+   require('@/assets/images/user.jpg')
+);
--- a/ios/Desa.xcodeproj/project.pbxproj
+++ b/ios/Desa.xcodeproj/project.pbxproj
@@ -394,7 +394,7 @@
 				);
 				OTHER_SWIFT_FLAGS = "$(inherited) -D EXPO_CONFIGURATION_DEBUG";
 				PRODUCT_BUNDLE_IDENTIFIER = mobiledarmasaba.app;
-				PRODUCT_NAME = "Desa";
+				PRODUCT_NAME = Desa;
 				PROVISIONING_PROFILE_SPECIFIER = "";
 				SWIFT_OBJC_BRIDGING_HEADER = "Desa/Desa-Bridging-Header.h";
 				SWIFT_OPTIMIZATION_LEVEL = "-Onone";
@@ -429,7 +429,7 @@
 				);
 				OTHER_SWIFT_FLAGS = "$(inherited) -D EXPO_CONFIGURATION_RELEASE";
 				PRODUCT_BUNDLE_IDENTIFIER = mobiledarmasaba.app;
-				PRODUCT_NAME = "Desa";
+				PRODUCT_NAME = Desa;
 				PROVISIONING_PROFILE_SPECIFIER = "";
 				SWIFT_OBJC_BRIDGING_HEADER = "Desa/Desa-Bridging-Header.h";
 				SWIFT_VERSION = 5.0;
--- a/package.json
+++ b/package.json
@@ -75,6 +75,7 @@
    "react-native-gesture-handler": "~2.24.0",
    "react-native-gifted-charts": "^1.4.57",
    "react-native-image-picker": "^8.2.1",
+    "react-native-image-viewing": "^0.2.2",
    "react-native-mime-types": "^2.5.0",
    "react-native-modal": "^14.0.0-rc.1",
    "react-native-modal-datetime-picker": "^18.0.0",