Untitled
unknown
plain_text
a month ago
4.5 kB
1
Indexable
Never
import { ActivityIndicator, Dimensions, Image, Platform, StyleSheet, Text, View, } from 'react-native'; import { getItemFromAsyncStorage } from '../../stores/asyncStorage'; import { useEffect, useState } from 'react'; import theme from '../../utils/theme'; import { fetchThemeColorsForOrganization, globalTheme, Theme, } from '../../theme-provider'; import { cacheImageWithExpiration, clearExpiredImages, getCachedImage, } from '../../utils/image-cache-manager'; import RNFetchBlob from 'rn-fetch-blob'; import { IAttachment, ICommunity, IMessage } from '../../types/Communities'; import { getAttachmentInfo } from '../../stores/slices/communities'; import ImageViewer from 'react-native-image-zoom-viewer'; import { TouchableOpacity } from 'react-native-gesture-handler'; import { useGlobalImageViewer } from '../GlobalImageViewer'; import SkeletonBox from '../SkeletonBox'; import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons'; interface AttachmentInterface { location: string; showPlaceholder?: boolean; } const AttachmentImage: React.FC<AttachmentInterface> = ({ location, showPlaceholder, }) => { const [attachmentImage, setAttachmentImage] = useState<string | null>(null); const [imageHeight, setImageHeight] = useState<any>(); const [placeholderClicked, setPlaceholderClicked] = useState<boolean>(false); const { setImages, setVisible } = useGlobalImageViewer(); useEffect(() => { fetchAttachmentImage(); setTimeout(() => { try { let thumbnail = JSON.parse(location).thumbnail; setAttachmentImage(thumbnail); } catch (err: any) {} }, 2000); }, []); const fetchAttachmentImage = async () => { const accessToken = await getItemFromAsyncStorage('afasAccessToken'); let thumbnail = JSON.parse(location).thumbnail; try { const response = await RNFetchBlob.config({ fileCache: true, }).fetch('GET', thumbnail, { Authorization: `Bearer ${accessToken}`, }); const imagePath = response.path(); // Get the local path of the downloaded image const base64Str = await RNFetchBlob.fs.readFile(imagePath, 'base64'); // Read the image file and convert it to base64 setAttachmentImage(`data:image/png;base64,${base64Str}`); const windowWidth = Dimensions.get('window').width; Image.getSize(thumbnail, (width, height) => { if (width == 0 || height == 0) return; setImageHeight(Math.round((height * 200) / width)); }); } catch (error) { console.error('Error fetching image:', error); } }; const openImageInGalleryView = () => { let image = JSON.parse(location).image; setImages([image]); setVisible(true); }; const shouldShowImage = () => { if (Platform.OS == 'ios') return true; const showImage = !showPlaceholder; if (showPlaceholder && placeholderClicked) return true; return showImage; }; const styles = StyleSheet.create({ container: { width: '100%', marginVertical: theme.spacing[2], }, image: { //resizeMode: 'contain', // Ensure the entire image is visible while maintaining aspect ratio }, placeholder: { backgroundColor: '#c9c8c5', width: '100%', height: 200, position: 'relative', justifyContent: 'center', alignItems: 'center', marginBottom: theme.spacing[2], }, iconText: { alignItems: 'center', }, }); return ( <View> {/* {showPlaceholder && !placeholderClicked && !shouldShowImage() && ( <TouchableOpacity onPress={() => setPlaceholderClicked(true)}> <View style={styles.placeholder}> <View style={styles.iconText}> <MaterialCommunityIcons name="image" size={50} color="grey" /> <Text>Klik om de afbeelding weer te geven</Text> </View> </View> </TouchableOpacity> )} */} {shouldShowImage() && attachmentImage && ( <View> {attachmentImage && imageHeight && ( <TouchableOpacity onPress={() => openImageInGalleryView()}> <View style={styles.container}> <Image source={{ uri: attachmentImage }} style={{ width: 200, height: imageHeight, }} /> </View> </TouchableOpacity> )} </View> )} </View> ); }; export { AttachmentImage };
Leave a Comment