Fixed issues for demo.

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

@@ -1,13 +1,14 @@
 import * as FileSystem from "expo-file-system";
-import { Button, Text as NBText, Thumbnail, View } from "native-base";
-import React, { useEffect, useState } from "react";
 import {
-  FlatList,
-  SafeAreaView,
-  StyleSheet,
-  Text,
-  TouchableOpacity,
-} from "react-native";
+  Button,
+  Container,
+  Content,
+  Text as NBText,
+  Thumbnail,
+  View,
+} from "native-base";
+import React, { useEffect, useState } from "react";
+import { FlatList, StyleSheet, Text, TouchableOpacity } from "react-native";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import {
@@ -43,50 +44,47 @@ export function ScreenMediaCache({ photos, removeAllPhotos, uploadAllphotos }) {
   }, [photos]);
 
   return (
-    <SafeAreaView style={styles.container}>
-      <FlatList
-        data={photos}
-        style={{ flex: 5 }}
-        contentContainerStyle={styles.listContentContainer}
-        keyExtractor={(item) => item.id}
-        numColumns={5}
-        renderItem={(object) =>
-          object.item.video ? (
-            <Text>Video</Text>
-          ) : (
-            <TouchableOpacity
-              onPress={() => {
-                setImgIndex(object.index);
-                setPreviewVisible(true);
-              }}
-            >
-              <Thumbnail square large source={{ uri: object.item.uri }} />
-            </TouchableOpacity>
-          )
-        }
-      />
-      <FlatList
-        data={imagesInDir}
-        style={{ flex: 1, backgroundColor: "tomato" }}
-        keyExtractor={(item) => item.id}
-        renderItem={(object) => <Text>{object.item}</Text>}
-      />
-      <Text>{`${photos.length} Photos`}</Text>
-      <View style={styles.actions}>
-        <Button onPress={() => removeAllPhotos()}>
-          <NBText>Delete all</NBText>
-        </Button>
-        <Button onPress={() => uploadAllphotos()}>
-          <NBText>Upload all</NBText>
-        </Button>
-      </View>
-      <MediaCacheOverlay
-        imgIndex={imgIndex}
-        setImgIndex={setImgIndex}
-        previewVisible={previewVisible}
-        setPreviewVisible={setPreviewVisible}
-      />
-    </SafeAreaView>
+    <Container>
+      <Content>
+        <View style={styles.actions}>
+          <Button onPress={() => removeAllPhotos()}>
+            <NBText>Delete all</NBText>
+          </Button>
+          <Button onPress={() => uploadAllphotos()}>
+            <NBText>Upload all</NBText>
+          </Button>
+        </View>
+        <Text>{`${photos.length} Photos`}</Text>
+        <FlatList
+          data={photos}
+          style={{ flex: 5 }}
+          contentContainerStyle={styles.listContentContainer}
+          keyExtractor={(item) => item.id}
+          numColumns={5}
+          renderItem={(object) =>
+            object.item.video ? (
+              <Text>Video</Text>
+            ) : (
+              <TouchableOpacity
+                onPress={() => {
+                  setImgIndex(object.index);
+                  setPreviewVisible(true);
+                }}
+              >
+                <Thumbnail square large source={{ uri: object.item.uri }} />
+              </TouchableOpacity>
+            )
+          }
+        />
+
+        <MediaCacheOverlay
+          imgIndex={imgIndex}
+          setImgIndex={setImgIndex}
+          previewVisible={previewVisible}
+          setPreviewVisible={setPreviewVisible}
+        />
+      </Content>
+    </Container>
   );
 }
 
@@ -105,8 +103,15 @@ const styles = StyleSheet.create({
   thumbnail: {
     width: 10,
     height: 10,
-    backgroundColor: "tomato",
+    // backgroundColor: "tomato",
   },
 });
 
 export default connect(mapStateToProps, mapDispatchToProps)(ScreenMediaCache);
+
+// <FlatList
+//   data={imagesInDir}
+//   style={{}}
+//   keyExtractor={(item) => item.id}
+//   renderItem={(object) => <Text>{object.item}</Text>}
+// />;