Improve Slideshow and adding sharing and reposting images

App.js

@@ -318,6 +318,7 @@ export default function App() {
                         <Stack.Screen
                             name="Slideshow"
                             component={Slideshow}
+                            //options={{ headerShown: false }}
                         />
                         <Stack.Screen
                             name="SongPlayer"

Views/NewPost.js

@@ -11,7 +11,8 @@ import Media from '../components/Media';
 
 let NewPostView = (props) => {
     let [postContent, setPostContent] = useState('');
-    let [extraContent, setExtraContent] = useState([]);
+    let initialContent = props.route.params.intialContent;
+    let [extraContent, setExtraContent] = useState([initialContent]);
     let [toProfile, setToProfile] = useState([]);
     const [photo, setPhoto] = React.useState(null);
     const navigation = useNavigation();

Views/Slideshow.js

@@ -1,51 +1,184 @@
-import React from 'react';
+import React, { useRef } from 'react';
-import { StyleSheet, View } from 'react-native';
+import { StyleSheet, View, Text, Animated, PanResponder, Dimensions, TouchableOpacity } from 'react-native';
-import { Text, List, RadioButton } from "react-native-paper";
 import { Image } from 'expo-image'; // Import Image from expo-image
+import { Button, Card, Chip } from 'react-native-paper';
+import * as Sharing from 'expo-sharing';
+import * as FileSystem from 'expo-file-system';
+
+const { width: SCREEN_WIDTH } = Dimensions.get('window');
 
 let Slideshow = (props) => {
-    //console.log(route.params.postid)
-    //return <SinglePostComponent postId={route.params.postid} />;
-    //console.log('RenderSlideSHow', props)
     const images = props.route.params.images;
-    [imageIndex, setImageIndex] = React.useState(props.route.params.startIndex);
+    const [imageIndex, setImageIndex] = React.useState(props.route.params.startIndex);
-    // images.length
+
-    // console.log(imageIndex);
+    // Animated value for horizontal translation
-    // console.log(images[imageIndex][1], images.length);
+    const translateX = useRef(new Animated.Value(0)).current;
-    let touchY = 0;
+
-    let touchX = 0;
+    const panResponder = useRef(
+        PanResponder.create({
+            onMoveShouldSetPanResponder: (_, gestureState) => Math.abs(gestureState.dx) > 10,
+            onPanResponderMove: Animated.event(
+                [null, { dx: translateX }],
+                { useNativeDriver: false }
+            ),
+            onPanResponderRelease: (_, gestureState) => {
+                if (gestureState.dx < -SCREEN_WIDTH / 4) {
+                    // Swipe left: Move to the next image
+                    Animated.timing(translateX, {
+                        toValue: -SCREEN_WIDTH,
+                        duration: 300,
+                        useNativeDriver: false,
+                    }).start(() => {
+                        setImageIndex((prevIndex) => {
+                            if (prevIndex < (images.length - 1))
+                                return prevIndex + 1;
+                            return prevIndex;
+                        });
+                        translateX.setValue(0);
+                    });
+                } else if (gestureState.dx > SCREEN_WIDTH / 4) {
+                    // Swipe right: Move to the previous image
+                    Animated.timing(translateX, {
+                        toValue: SCREEN_WIDTH,
+                        duration: 300,
+                        useNativeDriver: false,
+                    }).start(() => {
+                        setImageIndex((prevIndex) => {
+                            if (prevIndex > 0)
+                                return prevIndex - 1
+                            return prevIndex
+                        }
+                        );
+                        translateX.setValue(0);
+                    });
+                } else {
+                    // If not enough swipe distance, reset position
+                    Animated.spring(translateX, {
+                        toValue: 0,
+                        useNativeDriver: false,
+                    }).start();
+                }
+            },
+        })
+    ).current;
+
+    const shareImage = async () => {
+        try {
+            const fileUri = FileSystem.documentDirectory + 'shared_image.jpg';
+            const { uri } = await FileSystem.downloadAsync(images[imageIndex][1], fileUri);
+            await Sharing.shareAsync(uri);
+        } catch (error) {
+            //Alert.alert('Error', 'Failed to share image. Please try again later.');
+            console.error(error)
+        }
+    };
+    const repostImage = () => {
+        // Repost logic goes here (for now, just showing an alert)
+        //Alert.alert('Repost', 'Repost functionality is not yet implemented.');
+        props.navigation.navigate('NewPost', { intialContent: '@image:' + images[imageIndex][1] });
+    };
+
     return (
-        <View
+        <View style={styles.container}>
-            style={{ padding: 10, paddingTop: 20, flex: 1, justifyContent: "center" }}
-            onTouchStart={e => {
-                //console.log(e.nativeEvent)
-                touchY = e.nativeEvent.pageY
-                touchX = e.nativeEvent.pageX
-            }}
-            onTouchEnd={e => {
-                if ((touchX - e.nativeEvent.pageX > 20) && (images.length - 1 > imageIndex))
-                    setImageIndex(imageIndex + 1)
-                if ((touchX - e.nativeEvent.pageX < -20) && (imageIndex > 0))
-                    setImageIndex(imageIndex - 1)
-            }}
-        >
             <Text style={styles.countText}>{imageIndex + 1}/{images.length}</Text>
-            <Image source={{ uri: images[imageIndex][1] }} key={images[imageIndex][1]} style={styles.image} cachePolicy="memory-disk"/>
+
+            {/* Left arrow */}
+            {(imageIndex > 0) && (
+                <Text style={[styles.arrow, styles.leftArrow]}>{'|'}</Text>
+            )}
+
+            {/* Right arrow */}
+            {imageIndex < images.length - 1 && (
+                <Text style={[styles.arrow, styles.rightArrow]}>{'|'}</Text>
+            )}
+
+            <Animated.View
+                style={[
+                    styles.imageContainer,
+                    { transform: [{ translateX }] },
+                ]}
+                {...panResponder.panHandlers}
+            >
+                <Image
+                    source={{ uri: images[imageIndex][1] }}
+                    key={images[imageIndex][1]}
+                    style={styles.image}
+                    cachePolicy="memory-disk"
+                />
+            </Animated.View>
+            {/* Share and Repost Buttons */}
+            <View style={styles.buttonsContainer}>
+                <Button icon="ios-share" labelStyle={{ fontSize: 25 }} style={{ flow: 1 }}
+                    onPress={shareImage}
+                    color="#555"
+                ></Button>
+                <Button icon="send" labelStyle={{ fontSize: 25 }} style={{ flow: 1 }}
+                    onPress={repostImage}
+                    color="#555"
+                ></Button>
             </View>
-    )
+        </View>
+    );
 };
 
 const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        justifyContent: "center",
+        padding: 0,
+        paddingTop: 0,
+    },
+    imageContainer: {
+        width: SCREEN_WIDTH,
+        height: '100%',
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
     image: {
-        width: "100%",
+        width: '100%',
-        height: "100%",
+        height: '100%',
-        resizeMode: "contain",
+        contentFit: "contain",
     },
     countText: {
         position: 'absolute',
-        left: '50%',
+        left: '45%',
-        bottom: 10
+        top: 10,
-    }
+        color: '#000',
+        zIndex: 1000,
+        backgroundColor: 'rgba(255, 255, 255, 0.5)',
+        padding: 10,
+    },
+    arrow: {
+        position: 'absolute',
+        top: '45%',
+        fontSize: 40,
+        color: 'rgba(255, 255, 255, 0.7)',
+        zIndex: 1,
+    },
+    leftArrow: {
+        left: 10,
+    },
+    rightArrow: {
+        right: 10,
+    },
+    buttonsContainer: {
+        flexDirection: 'row',
+        justifyContent: 'space-around',
+        position: 'absolute',
+        bottom: 20,
+        width: '100%',
+        paddingHorizontal: 20,
+    },
+    button: {
+        paddingVertical: 10,
+        paddingHorizontal: 20,
+        backgroundColor: 'rgba(255, 255, 255, 0.7)',
+        borderRadius: 5,
+    },
+    buttonText: {
+        color: '#fff',
+        fontSize: 16,
+    },
 });
 
 export default Slideshow;

components/Media.js

@@ -200,7 +200,7 @@ let Media = (props) => {
                                                 //message: image[1],
                                             //    url: image[1],
                                             //});
-                                        }}>
+                                        }} key={image[1]}>
                                         <Image source={{ uri: image[1] }} key={image[1]} style={imageStyle} cachePolicy="memory-disk" />
                                     </TouchableWithoutFeedback>
                                 )