re-do FileList, use FlatList

examples/react-native-expo/App.js

@@ -2,8 +2,8 @@
 import React from 'react'
 import {
   Text,
-  View
-  // AsyncStorage
+  View,
+  AsyncStorage
   // Linking
 } from 'react-native'
 import Uppy from '@uppy/core'
@@ -66,7 +66,7 @@ export default class App extends React.Component {
     this.uppy = Uppy({ autoProceed: true, debug: true })
     this.uppy.use(Tus, {
       endpoint: 'https://master.tus.io/files/',
-      // urlStorage: AsyncStorage,
+      urlStorage: AsyncStorage,
       fingerprint: customFingerprint
     })
     this.uppy.on('upload-progress', (file, progress) => {
@@ -124,7 +124,8 @@ export default class App extends React.Component {
       <View style={{
         paddingTop: 100,
         paddingLeft: 50,
-        paddingRight: 50
+        paddingRight: 50,
+        flex: 1
       }}>
         <Text style={{
           fontSize: 25,

examples/react-native-expo/FileList.js

@@ -1,20 +1,46 @@
 import React from 'react' // eslint-disable-line no-unused-vars
-import { StyleSheet, View, Text, Image } from 'react-native'
+import { StyleSheet, View, FlatList, Text, Image } from 'react-native'
 
 export default function FileList (props) {
   const uppyFiles = props.uppy.state.files
+  const uppyFilesArray = Object.keys(uppyFiles).map((id) => uppyFiles[id])
 
   return (
+    // <ScrollView style={styles.container}>
+    //   {Object.keys(uppyFiles).map((id, index) => {
+    //     return <View style={styles.item} key={index}>
+    //       {uppyFiles[id].type === 'image'
+    //         ? <Image
+    //           style={{ width: 100, height: 100, borderRadius: 5, marginBottom: 5 }}
+    //           source={{ uri: uppyFiles[id].data.uri }} />
+    //         : null
+    //       }
+    //       <Text style={styles.itemName}>{uppyFiles[id].name}</Text>
+    //       <Text style={styles.itemType}>{uppyFiles[id].type}</Text>
+    //     </View>
+    //   })}
+    // </ScrollView>
+
     <View style={styles.container}>
-      {Object.keys(uppyFiles).map((id, index) => {
-        return <View style={styles.item} key={index}>
-          <Image
-            style={{ width: 100, height: 100, borderRadius: 5, marginBottom: 5 }}
-            source={{ uri: uppyFiles[id].data.uri }} />
-          <Text style={styles.itemName}>{uppyFiles[id].name}</Text>
-          <Text style={styles.itemType}>{uppyFiles[id].type}</Text>
-        </View>
-      })}
+      <FlatList
+        data={uppyFilesArray}
+        keyExtractor={(item, index) => item.id}
+        numColumns={2}
+        renderItem={({item}) => {
+          return (
+            <View style={styles.item}>
+              {item.type === 'image'
+                ? <Image
+                  style={styles.itemImage}
+                  source={{ uri: item.data.uri }} />
+                : null
+              }
+              <Text style={styles.itemName}>{item.name}</Text>
+              <Text style={styles.itemType}>{item.type}</Text>
+            </View>
+          )
+        }}
+      />
     </View>
   )
 }
@@ -22,12 +48,20 @@ export default function FileList (props) {
 const styles = StyleSheet.create({
   container: {
     marginTop: 20,
-    marginBottom: 20
+    marginBottom: 20,
+    flex: 1,
+    justifyContent: 'center'
   },
   item: {
-    width: 150,
-    height: 150,
+    width: 100,
     marginTop: 5,
+    marginBottom: 5,
+    marginRight: 15
+  },
+  itemImage: {
+    width: 100,
+    height: 100,
+    borderRadius: 5,
     marginBottom: 5
   },
   itemName: {