react_native_fetch_api_flatlist_with_activity_indicator.ts

1import React, {useEffect, useState} from 'react';
2import {ActivityIndicator, FlatList, Text, View} from 'react-native';
3
4type Movie = {
5  id: string;
6  title: string;
7  releaseYear: string;
8};
9
10const App = () => {
11  const [isLoading, setLoading] = useState(true);
12  const [data, setData] = useState<Movie[]>([]);
13
14  const getMovies = async () => {
15    try {
16      const response = await fetch('https://reactnative.dev/movies.json');
17      const json = await response.json();
18      setData(json.movies);
19    } catch (error) {
20      console.error(error);
21    } finally {
22      setLoading(false);
23    }
24  };
25
26  useEffect(() => {
27    getMovies();
28  }, []);
29
30  return (
31    <轉View style={{flex: 1, padding: 24}}>
32      {isLoading ? (
33        <ActivityIndicator />
34      ) : (
35        <FlatList
36          data={data}
37          keyExtractor={({id}) => id}
38          renderItem={({item}) => (
39            <Text>
40              {item.title}, {item.releaseYear}
41            </Text>
42          )}
43        />
44      )}
45    </View>
46  );
47};
48
49export default App;