@@ -3,15 +3,14 @@ import { Text, View, Image, StyleSheet } from 'react-native'
3
3
import AsyncStorage from '@react-native-async-storage/async-storage'
4
4
import Uppy from '@uppy/core'
5
5
import Tus from '@uppy/tus'
6
- import FilePicker from '@uppy/react-native'
7
- import useUppy from '@uppy/react/lib/useUppy'
6
+ import FilePicker from '@uppy/react-native'
8
7
import FileList from './FileList'
9
8
import PauseResumeButton from './PauseResumeButton'
10
9
import ProgressBar from './ProgressBar'
11
10
import SelectFiles from './SelectFilesButton'
12
11
import getTusFileReader from './tusFileReader'
13
12
14
- export default function App ( ) {
13
+ export default function App ( ) {
15
14
const [ state , _setState ] = useState ( {
16
15
progress : 0 ,
17
16
total : 0 ,
@@ -25,17 +24,19 @@ export default function App () {
25
24
totalProgress : 0 ,
26
25
} )
27
26
28
- const setState = useCallback ( ( newState ) => _setState ( ( oldState ) => ( { ...oldState , ...newState } ) ) , [ ] )
27
+ const setState = useCallback (
28
+ ( newState ) => _setState ( ( oldState ) => ( { ...oldState , ...newState } ) ) ,
29
+ [ ] ,
30
+ )
29
31
30
- const uppy = useUppy ( ( ) => {
31
- return new Uppy ( { autoProceed : true , debug : true } )
32
- . use ( Tus , {
33
- endpoint : 'https://tusd.tusdemo.net/files/' ,
34
- urlStorage : AsyncStorage ,
35
- fileReader : getTusFileReader ,
36
- chunkSize : 10 * 1024 * 1024 , // keep the chunk size small to avoid memory exhaustion
37
- } )
38
- } )
32
+ const [ uppy ] = useState ( ( ) => {
33
+ return new Uppy ( { autoProceed : true , debug : true } ) . use ( Tus , {
34
+ endpoint : 'https://tusd.tusdemo.net/files/' ,
35
+ urlStorage : AsyncStorage ,
36
+ fileReader : getTusFileReader ,
37
+ chunkSize : 10 * 1024 * 1024 , // keep the chunk size small to avoid memory exhaustion
38
+ } )
39
+ } , [ ] )
39
40
40
41
useEffect ( ( ) => {
41
42
uppy . on ( 'upload-progress' , ( file , progress ) => {
@@ -51,7 +52,8 @@ export default function App () {
51
52
} )
52
53
uppy . on ( 'complete' , ( result ) => {
53
54
setState ( {
54
- status : result . successful [ 0 ] ? 'Upload complete ✅' : 'Upload errored ❌' ,
55
+ status :
56
+ result . successful [ 0 ] ? 'Upload complete ✅' : 'Upload errored ❌' ,
55
57
uploadURL : result . successful [ 0 ] ? result . successful [ 0 ] . uploadURL : null ,
56
58
uploadComplete : true ,
57
59
uploadStarted : false ,
@@ -101,14 +103,8 @@ export default function App () {
101
103
}
102
104
103
105
return (
104
- < View
105
- style = { styles . root }
106
- >
107
- < Text
108
- style = { styles . title }
109
- >
110
- Uppy in React Native
111
- </ Text >
106
+ < View style = { styles . root } >
107
+ < Text style = { styles . title } > Uppy in React Native</ Text >
112
108
< View style = { { alignItems : 'center' } } >
113
109
< Image
114
110
style = { styles . logo }
@@ -118,7 +114,7 @@ export default function App () {
118
114
</ View >
119
115
< SelectFiles showFilePicker = { showFilePicker } />
120
116
121
- { state . info ? (
117
+ { state . info ?
122
118
< Text
123
119
style = { {
124
120
marginBottom : 10 ,
@@ -128,7 +124,7 @@ export default function App () {
128
124
>
129
125
{ state . info . message }
130
126
</ Text >
131
- ) : null }
127
+ : null }
132
128
133
129
< ProgressBar progress = { state . totalProgress } />
134
130
@@ -151,7 +147,9 @@ export default function App () {
151
147
{ uppy && < FileList uppy = { uppy } /> }
152
148
153
149
{ state . status && < Text > Status: { state . status } </ Text > }
154
- < Text > { state . progress } of { state . total } </ Text >
150
+ < Text >
151
+ { state . progress } of { state . total }
152
+ </ Text >
155
153
</ View >
156
154
)
157
155
}
0 commit comments