FileList.js 1.0 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243
  1. import React from 'react' // eslint-disable-line no-unused-vars
  2. import { StyleSheet, View, Text, Image } from 'react-native'
  3. export default function FileList (props) {
  4. const uppyFiles = props.uppy.state.files
  5. return (
  6. <View style={styles.container}>
  7. {Object.keys(uppyFiles).map((id, index) => {
  8. return <View style={styles.item} key={index}>
  9. <Image
  10. style={{ width: 100, height: 100, borderRadius: 5, marginBottom: 5 }}
  11. source={{ uri: uppyFiles[id].data.uri }} />
  12. <Text style={styles.itemName}>{uppyFiles[id].name}</Text>
  13. <Text style={styles.itemType}>{uppyFiles[id].type}</Text>
  14. </View>
  15. })}
  16. </View>
  17. )
  18. }
  19. const styles = StyleSheet.create({
  20. container: {
  21. marginTop: 20,
  22. marginBottom: 20
  23. },
  24. item: {
  25. width: 150,
  26. height: 150,
  27. marginTop: 5,
  28. marginBottom: 5
  29. },
  30. itemName: {
  31. fontSize: 14,
  32. color: '#2c3e50',
  33. fontWeight: '600'
  34. },
  35. itemType: {
  36. fontWeight: '600',
  37. fontSize: 12,
  38. color: '#95a5a6'
  39. }
  40. })