Skip to content

Commit df9fcc1

Browse files
authored
Update README.md
1 parent 43348c2 commit df9fcc1

File tree

1 file changed

+56
-0
lines changed

1 file changed

+56
-0
lines changed

Diff for: README.md

+56
Original file line numberDiff line numberDiff line change
@@ -277,6 +277,62 @@ export default class FetchExample extends React.Component<{}, State> {
277277
}
278278
}
279279
```
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+
```
280336

281337
## Contributing
282338

0 commit comments

Comments
 (0)