Improve media code and add tumbnails to slideshow

Views/Slideshow.js

@@ -1,7 +1,7 @@
 import React, { useRef } from 'react';
-import { StyleSheet, View, Text, Animated, PanResponder, Dimensions, TouchableOpacity } from 'react-native';
+import { StyleSheet, View, Text, Animated, PanResponder, Dimensions, FlatList, TouchableOpacity } from 'react-native';
 import { Image } from 'expo-image'; // Import Image from expo-image
-import { Button, Card, Chip } from 'react-native-paper';
+import { Button } from 'react-native-paper';
 import * as Sharing from 'expo-sharing';
 import * as FileSystem from 'expo-file-system';
 
@@ -9,6 +9,7 @@ const { width: SCREEN_WIDTH } = Dimensions.get('window');
 
 let Slideshow = (props) => {
     const images = props.route.params.images;
+    const imagesTumb = images.map((imageUrl) => imageUrl[1] + '?width=100&height=100`');
     const [imageIndex, setImageIndex] = React.useState(props.route.params.startIndex);
 
     // Animated value for horizontal translation
@@ -47,8 +48,7 @@ let Slideshow = (props) => {
                             if (prevIndex > 0)
                                 return prevIndex - 1
                             return prevIndex
-                        }
-                        );
+                        });
                         translateX.setValue(0);
                     });
                 } else {
@@ -68,30 +68,16 @@ let Slideshow = (props) => {
             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,
@@ -108,15 +94,38 @@ let Slideshow = (props) => {
             </Animated.View>
             {/* Share and Repost Buttons */}
             <View style={styles.buttonsContainer}>
-                <Button icon="ios-share" labelStyle={{ fontSize: 25 }} style={{ flow: 1 }}
+                <Button icon="ios-share" labelStyle={{ fontSize: 25 }} style={{ margin:10 }}
                     onPress={shareImage}
                     color="#555"
                 ></Button>
-                <Button icon="send" labelStyle={{ fontSize: 25 }} style={{ flow: 1 }}
+                <Button icon="send" labelStyle={{ fontSize: 25 }} style={{ }}
                     onPress={repostImage}
                     color="#555"
                 ></Button>
             </View>
+            {/* Thumbnails */}
+            <FlatList
+                data={imagesTumb}
+                horizontal
+                keyExtractor={(item, index) => index.toString()}
+                renderItem={({ item, index }) => (
+                    <TouchableOpacity onPress={() => {
+                        setImageIndex(index);
+                    }}>
+                        <Image
+                            source={{ uri: item }}
+                            style={[
+                                styles.thumbnail,
+                                imageIndex === index && styles.currentThumbnail
+                            ]}
+                            cachePolicy="memory-disk"
+                        />
+                    </TouchableOpacity>
+                )}
+                initialNumToRender={6}
+                style={styles.thumbnailList}
+                showsHorizontalScrollIndicator={false}
+            />
         </View>
     );
 };
@@ -148,37 +157,31 @@ const styles = StyleSheet.create({
         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',
+        flexDirection: 'column',
         justifyContent: 'space-around',
         position: 'absolute',
-        bottom: 20,
+        right: -20,
+        bottom: 90,
+        paddingHorizontal: 10,
+    },
+    thumbnailList: {
+        position: 'absolute',
+        bottom: 15,
         width: '100%',
-        paddingHorizontal: 20,
+        paddingHorizontal: 10,
     },
-    button: {
-        paddingVertical: 10,
-        paddingHorizontal: 20,
-        backgroundColor: 'rgba(255, 255, 255, 0.7)',
-        borderRadius: 5,
+    thumbnail: {
+        width: 60,
+        height: 60,
+        marginHorizontal: 5,
+        borderRadius: 10,
+        borderWidth: 2,
+        borderColor: 'white',
     },
-    buttonText: {
-        color: '#fff',
-        fontSize: 16,
+    currentThumbnail: {
+        borderColor: 'rgba(50,255,50,0.8)',
     },
 });
 
-export default Slideshow;
+export default Slideshow;