home-screen.tsx

//IMPORTS

interface ILogos {
  light: string;
  dark: string;
}

export interface HomeResponse {
  id: string;
  name: string;
  slug: string;
  abbr: string;
  logos: ILogos;
}

const endpoint = '/leagues';

const Home: React.FC = () => {
  const {response, error, isLoading} = useRemoteData<HomeResponse[]>({
    url: endpoint,
  });
 
  const renderItem: ListRenderItem<HomeResponse> = ({item}) => (
    <Text>{item.name}</Text>
  );

  if (isLoading) {
    return <ActivityIndicator />;
  }

  if (error) {
    return <Text>An error was happened</Text>;
  }

  return (
    <View style={styles.root}>
      <FlatList
        keyExtractor={item => item.id}
        data={response}
        renderItem={renderItem}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  root: {
    flex: 1,
  },
});

export default Home;