FlatList com dados da API

Nesta aula, vamos combinar a busca de dados na API com um assunto visto em outras aulas: FlatList.

Componete Item

Para utilizar o FlatList, precisamos criar um componente que represente como deve ser apresentado um item da lista. Então, fora do escopo do componente App, implemente o componente abaixo:

const Item = (props) => {
  return (
    <View style={styles.item}>
      <Text style={styles.titulo}>{props.item.titulo}</Text>
    </View>
  )
}

FlatList

Após a implementação desse componente, já poderemos alterar o código para utilizar o FlatList.

Acompanhando o passo a passo da aula, realize as modificações de modo que seu código fique como abaixo:

import { StatusBar } from 'expo-status-bar';
import React, { useEffect, useState } from 'react';
import { ActivityIndicator, FlatList, SafeAreaView, StyleSheet, Text, View } from 'react-native';

const Item = (props) => {
  return (
    <View style={styles.item}>
      <Text style={styles.titulo}>{props.item.titulo}</Text>
    </View>
  )
}

export default function App() {

  const getPostsNaAPI = async () => {
    try {
      setLoading(true)
      const response = await fetch('https://dev-backend-imd.herokuapp.com/api/posts');
      const posts = await response.json()
      setPosts(posts.posts)
    } catch (error) {
      setPosts([])
      alert('Falha ao acessar servidor. Tente novamente mais tarde!')
    } finally {
      setLoading(false)
    }
  }

  useEffect(() => {
    getPostsNaAPI()
  }, [])

  const [posts, setPosts] = useState([])
  const [isLoading, setLoading] = useState(true)

  return (
    <SafeAreaView style={styles.container}>
      {isLoading
        ? <ActivityIndicator />
        : <FlatList data={posts} renderItem={Item} keyExtractor={item => item.id} />
      }
      <StatusBar style="auto" />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#ffD',
    alignItems: 'center',
    justifyContent: 'center',
  },
  item: {
    backgroundColor: '#0AE',
    padding: 20,
    margin: 8
  },
  titulo: {
    color: 'white'
  }
});