Improve Slideshow and adding sharing and reposting images
This commit is contained in:
Adolfo Reyna
1
App.js
1
App.js
@@ -318,6 +318,7 @@ export default function App() {
|
||||
<Stack.Screen
|
||||
name="Slideshow"
|
||||
component={Slideshow}
|
||||
//options={{ headerShown: false }}
|
||||
/>
|
||||
<Stack.Screen
|
||||
name="SongPlayer"
|
||||
|
||||
@@ -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();
|
||||
|
||||
@@ -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 <SinglePostComponent postId={route.params.postid} />;
|
||||
//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 (
|
||||
<View
|
||||
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"/>
|
||||
<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%",
|
||||
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;
|
||||
|
||||
@@ -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>
|
||||
)
|
||||
|
||||
Reference in New Issue
Block a user