From 87d8b9cbfd788e70006f9977bd94f41a99c86a29 Mon Sep 17 00:00:00 2001 From: Adolfo Reyna Date: Fri, 4 Oct 2024 22:52:40 -0400 Subject: [PATCH] Improve Slideshow and adding sharing and reposting images --- App.js | 1 + Views/NewPost.js | 3 +- Views/Slideshow.js | 203 ++++++++++++++++++++++++++++++++++++-------- components/Media.js | 2 +- 4 files changed, 172 insertions(+), 37 deletions(-) diff --git a/App.js b/App.js index f1bf358..f81e7c1 100644 --- a/App.js +++ b/App.js @@ -318,6 +318,7 @@ export default function App() { { 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(); diff --git a/Views/Slideshow.js b/Views/Slideshow.js index 7b063d4..cb2861f 100644 --- a/Views/Slideshow.js +++ b/Views/Slideshow.js @@ -1,51 +1,184 @@ -import React from 'react'; -import { StyleSheet, View } from 'react-native'; -import { Text, List, RadioButton } from "react-native-paper"; +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) => { - //console.log(route.params.postid) - //return ; - //console.log('RenderSlideSHow', props) const images = props.route.params.images; - [imageIndex, setImageIndex] = React.useState(props.route.params.startIndex); - // images.length - // console.log(imageIndex); - // console.log(images[imageIndex][1], images.length); - let touchY = 0; - let touchX = 0; + 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 ( - { - //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) - }} - > - {imageIndex+1}/{images.length} - + + {imageIndex + 1}/{images.length} + + {/* Left arrow */} + {(imageIndex > 0) && ( + {'|'} + )} + + {/* Right arrow */} + {imageIndex < images.length - 1 && ( + {'|'} + )} + + + + + {/* Share and Repost Buttons */} + + + + - ) + ); }; 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%", - resizeMode: "contain", + width: '100%', + height: '100%', + contentFit: "contain", }, countText: { position: 'absolute', - left: '50%', - bottom: 10 - } + 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; diff --git a/components/Media.js b/components/Media.js index f86d59d..4cd7744 100644 --- a/components/Media.js +++ b/components/Media.js @@ -200,7 +200,7 @@ let Media = (props) => { //message: image[1], // url: image[1], //}); - }}> + }} key={image[1]}> )