Flatlist for multiple images

components/Media.js

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { Text, View, TouchableHighlight, Image, StyleSheet } from 'react-native';
+import { Text, View, TouchableHighlight, Image, StyleSheet, FlatList } from 'react-native';
 import API from './../API.js';
 import VideoPlayer from './VideoPlayer.js';
 import VimeoPlayer from './VimeoPlayer.js';
@@ -49,42 +49,55 @@ let Media = (props) => {
         let getData = async () => {
             if (!videosId[1]) return 0;
             let videoObj = await API.getVideo(videosId[1]);
-            if(videoObj && videoObj.files && subscribed){
+            if (videoObj && videoObj.files && subscribed) {
                 setVideosFiles(videoObj.files);
                 setPoster(videoObj.pictures.sizes[4].link);
             }
         };
         getData();
-        return ()=>{
+        return () => {
             subscribed = false;
         };
     }, [props.content])
     const video = videosFiles.length ? (
-            loaded ? <VideoPlayer videosFiles={videosFiles} poster={poster} videoId={videosId[1]} /> :
+        loaded ? <VideoPlayer videosFiles={videosFiles} poster={poster} videoId={videosId[1]} /> :
             (
                 <TouchableHighlight onPress={() => setLoaded(true)}>
-                    <Image source={poster ? {uri: poster} : {}} key={poster} style={styles.poster} />
+                    <Image source={poster ? { uri: poster } : {}} key={poster} style={styles.poster} />
                 </TouchableHighlight>
             )
-        ) :
+    ) :
         (videosId.length ? <VimeoPlayer videoId={videosId[1]} /> : <></>);
     const iframe = iframeSrc.length ?
         <WebView
             style={styles.iframe}
             source={{ uri: iframeSrc[1] }}
         /> : <></>;
+    const renderImages = (({ item }) => {
+        return (<Image source={{ uri: item[1] }} style={styles.flatlistImages} />);
+    });
     return (
         <View>
-            <View style={{ flexDirection: "row" }}>
-                {
-                    imagesTag.map((image, i) => {
-                        return (
-                            //<Text key={i}>{post.content}</Text>
-                            <Image source={{ uri: image[1] }} key={image[1]} style={imageStyle} />
-                        )
-                    })
-                }
-            </View>
+            {
+                (imagesTag.length > 2) ?
+                    <FlatList
+                        horizontal={true}
+                        data={imagesTag}
+                        renderItem={renderImages}
+                        keyExtractor={item => item[1]}
+                        initialNumToRender={2}
+                    /> :
+                    <View style={{ flexDirection: "row" }}>
+                        {
+                            imagesTag.map((image, i) => {
+                                return (
+                                    //<Text key={i}>{post.content}</Text>
+                                    <Image source={{ uri: image[1] }} key={image[1]} style={imageStyle} />
+                                )
+                            })
+                        }
+                    </View>
+            }
             {video}
             {iframe}
         </View>
@@ -100,14 +113,19 @@ const styles = StyleSheet.create({
     },
     poster: {
         width: "100%",
-        aspectRatio: 9/6,
+        aspectRatio: 9 / 6,
     },
     multipleImage: {
         width: "49%",
         aspectRatio: 1,
         margin: 2,
     },
-    iframe:{
+    flatlistImages: {
+        width: 300,
+        aspectRatio: 1,
+        margin: 2,
+    },
+    iframe: {
         width: "100%",
         minHeight: 300,
     }