New V Needed, improves cache and image handling

components/Media.js

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { View, TouchableHighlight, Image, StyleSheet, FlatList, TouchableWithoutFeedback, Share } from 'react-native';
+import { View, TouchableHighlight, StyleSheet, FlatList, TouchableWithoutFeedback, Share } from 'react-native';
 import { Button, Text, ProgressBar } from 'react-native-paper';
 import API from './../API.js';
 import VideoPlayer from './VideoPlayer.js';
@@ -9,6 +9,9 @@ import { useSnapshot } from 'valtio';
 import GlobalState from '../contexts/GlobalState.js';
 import Moment from 'moment';
 import { useNavigation } from '@react-navigation/native';
+import { Image } from 'expo-image'; // Import Image from expo-image
+import * as FileSystem from 'expo-file-system';
+import * as Sharing from 'expo-sharing';
 
 const videoIdF = (content) => {
     let vimeoTag = content.match(/@vimeo:[0-9]+/);
@@ -41,7 +44,7 @@ const imagesTagF = (content) => {
     images.forEach(i => {
         let tag = i.substring(1);
         let parts = [tag.substring(1, tag.indexOf(":")), tag.substring(tag.indexOf(":") + 1)];
-        if (parts[1].substring(0, 4) != "http") parts[1] = "https://social.emmint.com/" + parts[1];
+        if (parts[1].substring(0, 4) != "http") parts[1] = "https://social.emmint.com/" + parts[1] + '?width=1000&height=1000';
         Tags.push(parts);
     });
     return Tags;
@@ -60,6 +63,7 @@ let Media = (props) => {
     const gState = useSnapshot(GlobalState);
     const viewer = gState.me;
     const imagesTag = imagesTagF(props.content);
+    const imagesTagLimited = imagesTag.slice(0, 10);
     const imageStyle = imagesTag.length == 1 ? styles.image : styles.multipleImage;
     const videosId = videoIdF(props.content);
     const hlsUrl = hlsIdF(props.content);
@@ -88,7 +92,7 @@ let Media = (props) => {
         loaded ? <VideoPlayer videosFiles={videosFiles} poster={poster} videoId={videosId[1]} /> :
             (
                 <TouchableHighlight onPress={() => setLoaded(true)}>
-                    <Image source={poster ? { uri: poster } : {}} key={poster} style={styles.poster} />
+                    <Image source={poster ? { uri: poster } : {}} key={poster} style={styles.poster} cachePolicy="memory-disk" />
                 </TouchableHighlight>
             )
     ) :
@@ -102,7 +106,7 @@ let Media = (props) => {
                 GlobalState.mediaPost = props.post;
             }}>
                 {poster ?
-                    <Image source={poster ? { uri: poster } : {}} key={poster} style={styles.poster} /> :
+                    <Image source={poster ? { uri: poster } : {}} key={poster} style={styles.poster} cachePolicy="memory-disk" /> :
                     <Button
                         icon={"subscriptions"}
                         labelStyle={{ fontSize: 58 }}
@@ -134,7 +138,7 @@ let Media = (props) => {
                         url: item[1],
                     });
                 }}>
-                <Image source={{ uri: item[1] }} style={styles.flatlistImages} />
+                <Image source={{ uri: item[1] }} style={styles.flatlistImages} cachePolicy="memory-disk" />
             </TouchableWithoutFeedback>
         );
     });
@@ -148,6 +152,18 @@ let Media = (props) => {
                     <ProgressBar progress={viewer.data[props.postId].time / viewer.data[props.postId].duration} />
                 </>;
     }
+    const shareImage = async (imageUrl) => {
+        try {
+            // Download the image to the device's file system
+            const fileUri = `${FileSystem.cacheDirectory}shared-image.jpg`;
+            const { uri } = await FileSystem.downloadAsync(imageUrl, fileUri);
+
+            // Share the downloaded image
+            await Sharing.shareAsync(uri);
+        } catch (error) {
+            console.error("Error sharing the image", error);
+        }
+    };
     return (
         <View
             style={{
@@ -159,7 +175,7 @@ let Media = (props) => {
                 (imagesTag.length > 2) ?
                     <FlatList
                         horizontal={true}
-                        data={imagesTag}
+                        data={imagesTagLimited}
                         renderItem={renderImages}
                         keyExtractor={item => item[1]}
                         initialNumToRender={2}
@@ -181,13 +197,14 @@ let Media = (props) => {
                                         onPress={() => {
                                             navigation.navigate('Slideshow', { images: imagesTag, startIndex: i });
                                         }}
-                                        onLongPress={() => {
-                                            Share.share({
+                                        onLongPress={async () => {
+                                            await shareImage(image[1]);
+                                            //Share.share({
                                                 //message: image[1],
-                                                url: image[1],
-                                            });
+                                            //    url: image[1],
+                                            //});
                                         }}>
-                                        <Image source={{ uri: image[1] }} key={image[1]} style={imageStyle} />
+                                        <Image source={{ uri: image[1] }} key={image[1]} style={imageStyle} cachePolicy="memory-disk" />
                                     </TouchableWithoutFeedback>
                                 )
                             })