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';
@@ -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>
@@ -107,6 +120,11 @@ const styles = StyleSheet.create({
         aspectRatio: 1,
         margin: 2,
     },
+    flatlistImages: {
+        width: 300,
+        aspectRatio: 1,
+        margin: 2,
+    },
     iframe: {
         width: "100%",
         minHeight: 300,