added camera controls component and updated camera ui

components/screen-media-cache/screen-media-cache.component.jsx

@@ -1,11 +1,11 @@
 import { Button, Text as NBText, Thumbnail, View } from "native-base";
 import React from "react";
-import { SafeAreaView, Text } from "react-native";
-
+import { FlatList, SafeAreaView, Text } from "react-native";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { removeAllPhotos } from "../../redux/photos/photos.actions";
 import { selectPhotos } from "../../redux/photos/photos.selectors";
+
 const mapStateToProps = createStructuredSelector({
   photos: selectPhotos,
 });
@@ -22,22 +22,19 @@ export function ScreenMediaCache({ photos, removeAllPhotos }) {
         <NBText>Delete all</NBText>
       </Button>
       <Text>{photos.length}</Text>
-      <View
-        style={{
-          flex: 1,
-          display: "flex",
-          direction: "row",
-          backgroundColor: "tomato",
-        }}
-      >
-        <Text>The View</Text>
-        {photos.map((i, idx) => (
+
+      <FlatList
+        style={{ flex: 1, backgroundColor: "tomato" }}
+        data={photos}
+        keyExtractor={(item) => item.id}
+        renderItem={(object) => (
           <View>
-            <Text>{i.uri}</Text>
-            <Thumbnail square large key={idx} source={{ uri: i.uri }} />
+            <Text>{object.item.uri}</Text>
+            <Thumbnail square large source={{ uri: object.item.uri }} />
           </View>
-        ))}
-      </View>
+        )}
+        //ItemSeparatorComponent={FlatListItemSeparator}
+      />
     </SafeAreaView>
   );
 }