Add slideshow

App.js

@@ -26,6 +26,7 @@ import MediaView from './components/MediaView.js';
 import { useSnapshot } from 'valtio';
 import GlobalState from './contexts/GlobalState.js';
 import NewGroup from './Views/NewGroup.js';
+import Slideshow from './Views/Slideshow.js';
 
 
 const Tab = createBottomTabNavigator();
@@ -308,6 +309,10 @@ export default function App() {
                         <Stack.Screen
                             name="Notifications"
                             component={NotificationsView}
+                        />
+                         <Stack.Screen
+                            name="Slideshow"
+                            component={Slideshow}
                         />
                         <Stack.Screen name="SinglePost" component={SinglePost} />
                         <Stack.Screen name="Login" component={Login} options={{ headerShown: false }} />

Views/SinglePost.js

@@ -2,7 +2,7 @@ import React from 'react';
 import SinglePostComponent from '../components/SinglePostComponent';
 
 let SinglePost = ({ route }) => {
-    console.log(route.params.postid)
+    //console.log(route.params.postid)
     return <SinglePostComponent postId={route.params.postid} />;
 };
 

Views/Slideshow.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import { StyleSheet, TouchableHighlight, Image, TouchableWithoutFeedback, View } from 'react-native';
+
+
+let Slideshow = (props) => {
+    //console.log(route.params.postid)
+    //return <SinglePostComponent postId={route.params.postid} />;
+    console.log(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);
+    return (
+        <View
+            style={{ padding: 10, paddingTop: 20, flex: 1, justifyContent: "center" }}
+            onTouchStart={e => {
+                this.touchY = e.nativeEvent.pageY
+                this.touchX = e.nativeEvent.pageX
+            }}
+            onTouchEnd={e => {
+                if ((this.touchX - e.nativeEvent.pageX > 20) && (images.length - 1 > imageIndex))
+                    setImageIndex(imageIndex + 1)
+                if ((this.touchX - e.nativeEvent.pageX < -20) && (imageIndex > 0))
+                    setImageIndex(imageIndex - 1)
+            }}
+        >
+            <Image source={{ uri: images[imageIndex][1] }} key={images[imageIndex][1]} style={styles.image} />
+        </View>
+    )
+};
+
+const styles = StyleSheet.create({
+    image: {
+        width: "100%",
+        height: "100%",
+        resizeMode: "contain",
+    },
+});
+
+export default Slideshow;

components/Media.js

@@ -8,6 +8,7 @@ import { WebView } from 'react-native-webview';
 import { useSnapshot } from 'valtio';
 import GlobalState from '../contexts/GlobalState.js';
 import Moment from 'moment';
+import { useNavigation } from '@react-navigation/native';
 
 const videoIdF = (content) => {
     let vimeoTag = content.match(/@vimeo:[0-9]+/);
@@ -67,6 +68,7 @@ let Media = (props) => {
     const [videosFiles, setVideosFiles] = useState([]);
     const [poster, setPoster] = useState('');
     const [loaded, setLoaded] = useState(false);
+    const navigation = useNavigation();
     useEffect(() => {
         let subscribed = true;
         let getData = async () => {
@@ -119,9 +121,14 @@ let Media = (props) => {
             style={styles.iframe}
             source={{ uri: "https://www.youtube.com/embed/" + youtubeId + "?fs=0" }}
         /> : <></>;
-    const renderImages = (({ item }) => {
+    const renderImages = (({ item, index }) => {
         return (
-            <TouchableWithoutFeedback style={styles.flatlistImages} onLongPress={()=>{
+            <TouchableWithoutFeedback style={styles.flatlistImages} 
+            onPress={()=>{
+                //alert("hello");
+                navigation.navigate('Slideshow', { images: imagesTag, startIndex: index});
+            }}
+            onLongPress={()=>{
                 Share.share({
                     //message: image[1],
                     url: item[1],
@@ -157,7 +164,11 @@ let Media = (props) => {
                             imagesTag.map((image, i) => {
                                 return (
                                     //<Text key={i}>{post.content}</Text>
-                                    <TouchableWithoutFeedback onLongPress={()=>{
+                                    <TouchableWithoutFeedback 
+                                    onPress={()=>{
+                                        navigation.navigate('Slideshow', { images: imagesTag, startIndex: i });
+                                    }}
+                                    onLongPress={()=>{
                                         Share.share({
                                             //message: image[1],
                                             url: image[1],