EMI-ExpoAPP/Views/Slideshow.js

import React, { useRef } from 'react';
import { StyleSheet, View, Text, Animated, PanResponder, Dimensions, TouchableOpacity } from 'react-native';
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) => {
    const images = props.route.params.images;
    const [imageIndex, setImageIndex] = React.useState(props.route.params.startIndex);

    // Animated value for horizontal translation
    const translateX = useRef(new Animated.Value(0)).current;

    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 style={styles.container}>
            <Text style={styles.countText}>{imageIndex + 1}/{images.length}</Text>

            {/* 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%',
        height: '100%',
        contentFit: "contain",
    },
    countText: {
        position: 'absolute',
        left: '45%',
        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;