re-use uppy icons straight from the Dashboard

examples/react-native-expo/App.js

@@ -14,7 +14,6 @@ import FileList from './FileList'
 import PauseResumeButton from './PauseResumeButton'
 import ProgressBar from './ProgressBar'
 import SelectFiles from './SelectFilesButton'
-// import uppyLogo from './assets/uppy-logo.png'
 
 function hashCode (str) {
   // from https://stackoverflow.com/a/8831937/151666
@@ -80,12 +79,12 @@ export default class App extends React.Component {
       })
     })
     this.uppy.on('upload-success', (file, response) => {
-      console.log(file.name, response)
+      // console.log(file.name, response)
     })
     this.uppy.on('complete', (result) => {
       this.setState({
         status: 'Upload complete ✅',
-        uploadURL: result.successful[0].uploadURL,
+        uploadURL: result.successful[0] ? result.successful[0].uploadURL : null,
         uploadComplete: true,
         uploadStarted: false
       })

examples/react-native-expo/FileList.js

@@ -1,20 +1,47 @@
 import React from 'react' // eslint-disable-line no-unused-vars
 import { StyleSheet, View, FlatList, Text, Image } from 'react-native'
 
-function truncateString (str) {
-  const maxChars = 20
-  if (str.length > maxChars) {
-    return str.substring(0, 25) + '...'
-  }
-}
+import getFileTypeIcon from '@uppy/dashboard/lib/utils/getFileTypeIcon.js'
+import truncateString from '@uppy/dashboard/lib/utils/truncateString.js'
+import renderStringFromJSX from 'preact-render-to-string'
+import SvgUri from 'react-native-svg-uri'
+
+// function truncateString (str) {
+//   const maxChars = 20
+//   if (str.length > maxChars) {
+//     return str.substring(0, 25) + '...'
+//   }
+
+//   return str
+// }
+
+// function FileIcon () {
+//   return <View style={styles.itemIconContainer}>
+//     <Image
+//       style={styles.itemIcon}
+//       source={require('./assets/file-icon.png')}
+//     />
+//   </View>
+// }
 
-function FileIcon () {
-  return <View style={styles.itemIconContainer}>
-    <Image
-      style={styles.itemIcon}
-      source={require('./assets/file-icon.png')}
-    />
-  </View>
+function UppyDashboardFileIcon (props) {
+  const icon = renderStringFromJSX(getFileTypeIcon(props.type).icon)
+  const color = getFileTypeIcon(props.type).color
+  return (
+    <View style={{
+      ...styles.itemIconContainer,
+      backgroundColor: color
+    }}>
+      <SvgUri
+        width={50}
+        height={50}
+        style={styles.itemIconSVG}
+        fill="#ffffff"
+        fillAll
+        svgXmlData={icon}
+      />
+    </View>
+  )
 }
 
 export default function FileList (props) {
@@ -34,9 +61,9 @@ export default function FileList (props) {
                 ? <Image
                   style={styles.itemImage}
                   source={{ uri: item.data.uri }} />
-                : <FileIcon />
+                : <UppyDashboardFileIcon type={item.type} />
               }
-              <Text style={styles.itemName}>{truncateString(item.name)}</Text>
+              <Text style={styles.itemName}>{truncateString(item.name, 20)}</Text>
               <Text style={styles.itemType}>{item.type}</Text>
             </View>
           )
@@ -78,6 +105,10 @@ const styles = StyleSheet.create({
     width: 42,
     height: 56
   },
+  itemIconSVG: {
+    width: 50,
+    height: 50
+  },
   itemName: {
     fontSize: 13,
     color: '#2c3e50',