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,13 +49,13 @@ 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])
@@ -63,7 +63,7 @@ let Media = (props) => {
         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>
             )
     ) :
@@ -73,8 +73,20 @@ let Media = (props) => {
             style={styles.iframe}
             source={{ uri: iframeSrc[1] }}
         /> : <></>;
+    const renderImages = (({ item }) => {
+        return (<Image source={{ uri: item[1] }} style={styles.flatlistImages} />);
+    });
     return (
         <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) => {
@@ -85,6 +97,7 @@ let Media = (props) => {
                             })
                         }
                     </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,
     }