Skip to content

Commit f23bd25

Browse files
avmorozavmoroz
committed
Implemented initial demo app
1 parent e854048 commit f23bd25

File tree

4 files changed

+613
-419
lines changed

4 files changed

+613
-419
lines changed

‎RNFetchBlobWin/App.js

Lines changed: 221 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -6,68 +6,264 @@
66
* @flow strict-local
77
*/
88

9-
import React from 'react';
9+
import React, { useState } from 'react';
1010
import {
1111
SafeAreaView,
1212
StyleSheet,
1313
ScrollView,
1414
View,
1515
Text,
1616
StatusBar,
17+
TextInput,
18+
Button,
19+
Alert,
20+
Picker,
1721
} from 'react-native';
1822

1923
import {
20-
Header,
21-
LearnMoreLinks,
2224
Colors,
2325
DebugInstructions,
2426
ReloadInstructions,
2527
} from 'react-native/Libraries/NewAppScreen';
2628

2729
import RNFetchBlob from 'rn-fetch-blob';
30+
31+
2832

2933
const App: () => React$Node = () => {
34+
35+
// Variables ******************************************************************
36+
const [existsParam, setExistsParam] = useState('');
37+
const [lsParam, setLSParam] = useState('');
38+
39+
const [cpSourceParam, setCPSourceParam] = useState('');
40+
const [cpDestParam, setCPDestParam] = useState('');
41+
42+
const [unlinkParam, setUnlinkParam] = useState('');
43+
44+
// Methods ********************************************************************
45+
// exists()
46+
const existsCall = () => {
47+
RNFetchBlob.fs.exists(RNFetchBlob.fs.dirs.DocumentDir + '/' + existsParam)
48+
.then((result) => {
49+
Alert.alert('Exists: ' + result)
50+
})
51+
.catch((err) => {
52+
Alert.alert(err.message);
53+
})
54+
}
55+
56+
const isDirCall = () => {
57+
RNFetchBlob.fs.exists(RNFetchBlob.fs.dirs.DocumentDir + '/' + existsParam)
58+
.then((result) => {
59+
Alert.alert('isDir: ' + result);
60+
})
61+
.catch((err) => {
62+
Alert.alert(err.message);
63+
})
64+
}
65+
66+
// df()
67+
const dfCall = () => {
68+
RNFetchBlob.fs.df()
69+
.then((result) => {
70+
Alert.alert('Free space: ' + result.free + ' bytes\nTotal space: ' + result.total + ' bytes');
71+
})
72+
.catch((err) => {
73+
Alert.alert(err.message);
74+
})
75+
}
76+
77+
// ls()
78+
const lsCall = () => {
79+
RNFetchBlob.fs.ls(RNFetchBlob.fs.dirs.DocumentDir + '/' + lsParam)
80+
.then((files) => {
81+
Alert.alert('Method finished: check debug console for results');
82+
console.log(files);
83+
})
84+
}
85+
86+
// cp()
87+
const cpCall = () => {
88+
RNFetchBlob.fs.cp(RNFetchBlob.fs.dirs.DocumentDir + '/' + cpSourceParam,
89+
RNFetchBlob.fs.dirs.DocumentDir + '/' + cpDestParam)
90+
.then(
91+
Alert.alert('File successfully copied')
92+
)
93+
.catch((err) => {
94+
Alert.alert(err.message);
95+
});
96+
}
97+
98+
// mv()
99+
const mvCall = () => {
100+
RNFetchBlob.fs.mv(RNFetchBlob.fs.dirs.DocumentDir + '/' + cpSourceParam,
101+
RNFetchBlob.fs.dirs.DocumentDir + '/' + cpDestParam)
102+
.then(
103+
Alert.alert('File successfully moved')
104+
)
105+
.catch((err) => {
106+
Alert.alert(err.message);
107+
});
108+
}
109+
110+
// unlink()
111+
const unlinkCall = () => {
112+
RNFetchBlob.fs.unlink(RNFetchBlob.fs.dirs.DocumentDir + '/' + existsParam)
113+
.then(
114+
Alert.alert('file/directory successfully unlinked')
115+
)
116+
.catch((err) => {
117+
Alert.alert(err.message);
118+
})
119+
}
120+
121+
// App ************************************************************************
30122
return (
31123
<>
32124
<StatusBar barStyle="dark-content" />
33125
<SafeAreaView>
34126
<ScrollView
35127
contentInsetAdjustmentBehavior="automatic"
36128
style={styles.scrollView}>
37-
<Header />
38129
{global.HermesInternal == null ? null : (
39130
<View style={styles.engine}>
40131
<Text style={styles.footer}>Engine: Hermes</Text>
41132
</View>
42133
)}
134+
<Text style={styles.sectionTitle}>
135+
{"React Native Fetch Blob Windows Demo App"}
136+
</Text>
43137
<View style={styles.body}>
44138
<View style={styles.sectionContainer}>
45-
<Text style={styles.sectionTitle}>Step One</Text>
46-
<Text style={styles.sectionDescription}>
47-
Edit <Text style={styles.highlight}>App.js</Text> to change this
48-
screen and then come back to see your edits.
49-
</Text>
139+
<View style={styles.sectionDescription}>
140+
<Text>
141+
{"DocumentDir: " + RNFetchBlob.fs.dirs.DocumentDir + '\n'}
142+
{"CacheDir: " + RNFetchBlob.fs.dirs.CacheDir + '\n'}
143+
{"PictureDir: " + RNFetchBlob.fs.dirs.PictureDir + '\n'}
144+
{"MusicDir: " + RNFetchBlob.fs.dirs.MusicDir + '\n'}
145+
{"DownloadDir: " + RNFetchBlob.fs.dirs.DownloadDir + '\n'}
146+
{"DCIMDir: " + RNFetchBlob.fs.dirs.DCIMDir + '\n'}
147+
{"SDCardDir: " + RNFetchBlob.fs.dirs.SDCardDir + '\n'}
148+
{"SDCardApplicationDir: " + RNFetchBlob.fs.dirs.SDCardApplicationDir + '\n'}
149+
{"MainBundleDir: " + RNFetchBlob.fs.dirs.MainBundleDir + '\n'}
150+
{"LibraryDir: " + RNFetchBlob.fs.dirs.LibraryDir + '\n'}
151+
</Text>
152+
</View>
50153
</View>
154+
</View>
155+
156+
<View style={styles.body}>
51157
<View style={styles.sectionContainer}>
52-
<Text style={styles.sectionTitle}>See Your Changes</Text>
53-
<Text style={styles.sectionDescription}>
54-
<ReloadInstructions />
55-
</Text>
158+
<Text style={styles.sectionTitle}>
159+
{"exists - exists(), isDir()"}
160+
</Text>
161+
<TextInput style = {styles.input}
162+
placeholder = "Path"
163+
onChangeText={existsParam => setExistsParam(existsParam)}
164+
placeholderTextColor = "#9a73ef"
165+
autoCapitalize = "none"
166+
/>
167+
<Button
168+
title="Check if exists"
169+
color="#9a73ef"
170+
onPress={existsCall}
171+
/>
172+
<Button
173+
title="Check if is dir"
174+
color="#9a73ef"
175+
onPress={isDirCall}
176+
/>
56177
</View>
178+
</View>
179+
180+
<View style={styles.body}>
57181
<View style={styles.sectionContainer}>
58-
<Text style={styles.sectionTitle}>Debug</Text>
59-
<Text style={styles.sectionDescription}>
60-
<DebugInstructions />
61-
</Text>
182+
<Text style={styles.sectionTitle}>
183+
{"df - df()"}
184+
</Text>
185+
<Button
186+
title="Get free/total disk space"
187+
color="#9a73ef"
188+
onPress={dfCall}
189+
/>
62190
</View>
191+
</View>
192+
193+
<View style={styles.body}>
194+
<View style={styles.sectionContainer}>
195+
<Text style={styles.sectionTitle}>
196+
{"ls - ls()"}
197+
</Text>
198+
<View style={styles.sectionDescription}>
199+
<TextInput style = {styles.input}
200+
placeholder = "Directory Path"
201+
onChangeText={lsParam => setLSParam(lsParam)}
202+
placeholderTextColor = "#9a73ef"
203+
autoCapitalize = "none"
204+
/>
205+
</View>
206+
<Button
207+
title="Get specified directory info"
208+
color="#9a73ef"
209+
onPress={lsCall}
210+
/>
211+
</View>
212+
</View>
213+
214+
<View style={styles.body}>
63215
<View style={styles.sectionContainer}>
64-
<Text style={styles.sectionTitle}>Learn More</Text>
65-
<Text style={styles.sectionDescription}>
66-
Read the docs to discover what to do next:
67-
</Text>
216+
<Text style={styles.sectionTitle}>
217+
{"cp and mv - cp() and mv()"}
218+
</Text>
219+
<View style={styles.sectionDescription}>
220+
<TextInput style = {styles.input}
221+
placeholder = "Source File Path"
222+
onChangeText={cpSourceParam => setCPSourceParam(cpSourceParam)}
223+
placeholderTextColor = "#9a73ef"
224+
autoCapitalize = "none"
225+
/>
226+
<TextInput style = {styles.input}
227+
placeholder = "Destintation File Path"
228+
onChangeText={cpDestParam => setCPDestParam(cpDestParam)}
229+
placeholderTextColor = "#9a73ef"
230+
autoCapitalize = "none"
231+
/>
232+
</View>
233+
<Button
234+
title="Copy File to Destination"
235+
color="#9a73ef"
236+
onPress={cpCall}
237+
/>
238+
<Button
239+
title="Move File to Destination"
240+
color="#9a73ef"
241+
onPress={mvCall}
242+
/>
68243
</View>
69-
<LearnMoreLinks />
70244
</View>
245+
246+
<View style={styles.body}>
247+
<View style={styles.sectionContainer}>
248+
<Text style={styles.sectionTitle}>
249+
{"unlink - unlink()"}
250+
</Text>
251+
<View style={styles.sectionDescription}>
252+
<TextInput style = {styles.input}
253+
placeholder = "File Path"
254+
onChangeText={unlinkParam => setUnlinkParam(unlinkParam)}
255+
placeholderTextColor = "#9a73ef"
256+
autoCapitalize = "none"
257+
/>
258+
</View>
259+
<Button
260+
title="Copy File to Destination"
261+
color="#9a73ef"
262+
onPress={unlinkCall}
263+
/>
264+
</View>
265+
</View>
266+
71267
</ScrollView>
72268
</SafeAreaView>
73269
</>
@@ -76,14 +272,14 @@ const App: () => React$Node = () => {
76272

77273
const styles = StyleSheet.create({
78274
scrollView: {
79-
backgroundColor: Colors.lighter,
275+
backgroundColor: Colors.black,
80276
},
81277
engine: {
82278
position: 'absolute',
83279
right: 0,
84280
},
85281
body: {
86-
backgroundColor: Colors.white,
282+
backgroundColor: Colors.dark,
87283
},
88284
sectionContainer: {
89285
marginTop: 32,
@@ -92,7 +288,7 @@ const styles = StyleSheet.create({
92288
sectionTitle: {
93289
fontSize: 24,
94290
fontWeight: '600',
95-
color: Colors.black,
291+
color: Colors.white,
96292
},
97293
sectionDescription: {
98294
marginTop: 8,

0 commit comments

Comments
 (0)