File tree 1 file changed +56
-0
lines changed
1 file changed +56
-0
lines changed Original file line number Diff line number Diff line change @@ -277,6 +277,62 @@ export default class FetchExample extends React.Component<{}, State> {
277
277
}
278
278
}
279
279
```
280
+ #### Networking in Functional Components
281
+ ``` ts
282
+ import React , { useState , useEffect } from " react" ;
283
+ import { FlatList , ActivityIndicator , Text , View } from " react-native" ;
284
+
285
+ type DataItem = { title: string ; releaseYear: string ; id: string };
286
+
287
+ type State = {
288
+ isLoading: boolean ;
289
+ dataSource? : DataItem [];
290
+ };
291
+
292
+ const FetchExample = ({ }: State ) => {
293
+ const [isLoading, setIsLoading] = useState (true )
294
+ const [dataSource, setDataSource] = useState ()
295
+
296
+
297
+ useEffect (() => {
298
+ fetch (" https://facebook.github.io/react-native/movies.json" )
299
+ .then (response => response .json ())
300
+ .then ((responseJson : { movies: any }) => {
301
+ setIsLoading (false )
302
+ setDataSource (responseJson .movies )
303
+ })
304
+ .catch (error => {
305
+ console .error (error );
306
+ });
307
+
308
+ }, [])
309
+
310
+
311
+ if (isLoading )
312
+ return (
313
+ < View style = {{ flex : 1 , padding : 20 }}>
314
+ < ActivityIndicator / >
315
+ < / View >
316
+ );
317
+
318
+
319
+ return (
320
+ < View style = {{ backgroundColor : ' red' }}>
321
+ < FlatList
322
+ data = {dataSource }
323
+ renderItem = {({ item }) => (
324
+ <Text>
325
+ {item .title }, {item .releaseYear }
326
+ </Text>
327
+ )}
328
+ keyExtractor = {({ id }, index) => id }
329
+ / >
330
+ < / View >
331
+ );
332
+
333
+ }
334
+ export default FetchExample
335
+ ```
280
336
281
337
## Contributing
282
338
You can’t perform that action at this time.
0 commit comments