Nós vamos começar criando um novo projeto, para que a gente possa fazer a estrutura do 0. Vamos escolher o template Blak (Bare) e colocaremos o nome dele de “consumo-api”

npx create-expo-app --template

Com ele criado, a primeira coisa que faremos é instalar o axios.

yarn add axios

Vamos criar tudo dentro ao “App.js” para que a gente não precise criar toda a estrutura. Vamos começar excluindo tudo do “App.js” e deixando o arquivo limpo, para começarmos a inserir coisas. (Podemos deixar o styles, para não precisar criar de novo)

import React from "react";
import { StyleSheet, Text, View } from "react-native";

export default function App() {
  return;
}

const styles = StyleSheet.create({});

Nós vamos começar importando a FlatList, pois você lembra na aula dela que usamos quando precisamos renderizar uma lista nesse estilo, então é o uso perfeito do FlatList. Vamos por enquanto fazer apenas o import.

import React from "react";
import { StyleSheet, Text, View } from "react-native";
import { FlatList } from "react-native";

export default function App() {
  return;
}

const styles = StyleSheet.create({});

Agora, iremos fazer o fetch dos posts json. Começaremos criar um useState, fazendo o fetch com o axios e setando no useState os posts.

import React, { useState } from "react";
import axios from "axios";
import { StyleSheet, Text, View } from "react-native";
import { FlatList } from "react-native";

export default function App() {
  const [posts, setPosts] = useState({});

  const fetchPostsJson = async () => {
    const res = await axios.get("<https://jsonplaceholder.typicode.com/posts>");
    setPosts(res.data);
  };

  return;
}

const styles = StyleSheet.create({});

Com isso feito, vamos dar um useEffect para poder chamar a função que criamos.

import React, { useEffect, useState } from "react";
import axios from "axios";
import { StyleSheet, Text, View } from "react-native";
import { FlatList } from "react-native";

export default function App() {
  const [posts, setPosts] = useState({});

  const fetchPostsJson = async () => {
    const res = await axios.get("<https://jsonplaceholder.typicode.com/posts>");
    setPosts(res.data);
  };

  useEffect(() => {
    fetchPostsJson();
  }, []);

  return;
}

const styles = StyleSheet.create({});

Agora, nós vamos colocar o FlatList para poder exibir esses dados. Vamos colocar primeiro nossa constate de renderização de itens

import React, { useEffect, useState } from "react";
import axios from "axios";
import { StyleSheet, Text, View } from "react-native";
import { FlatList } from "react-native";

export default function App() {
  const [posts, setPosts] = useState({});

  const fetchPostsJson = async () => {
    const res = await axios.get("<https://jsonplaceholder.typicode.com/posts>");
    setPosts(res.data);
  };

  useEffect(() => {
    fetchPostsJson();
  }, []);

	const renderPost = ({ item }) => (
    <View>
      <Text>ID: {item.id}</Text>
      <Text>Título: {item.title}</Text>
      <Text>Conteúdo: {item.body}</Text>
    </View>
  );

  return;
}

const styles = StyleSheet.create({});

E agora, nós iremos colocar o FlatList para exibir nossos itens. Como estamos usando o FlatList, ele vai carregar uma certa quantidade e depois vai parar.

import axios from "axios";
import React, { useEffect, useState } from "react";
import { StyleSheet, Text, View } from "react-native";
import { FlatList } from "react-native";

export default function App() {
  const [posts, setPosts] = useState({});

  const fetchPostsJson = async () => {
    const res = await axios.get("<https://jsonplaceholder.typicode.com/posts>");
    setPosts(res.data);
  };

  useEffect(() => {
    fetchPostsJson();
  }, []);

  const renderPost = ({ item }) => (
    <View>
      <Text>ID: {item.id}</Text>
      <Text>Título: {item.title}</Text>
      <Text>Conteúdo: {item.body}</Text>
    </View>
  );

  return (
    <FlatList
      data={posts}
      renderItem={renderPost}
      keyExtractor={(item) => item.id}
    />
  );
}

const styles = StyleSheet.create({});

Podemos ver que ele já exibiu uma bela quantidade, e para a gente conseguir ver quantos itens são carregados, vamos dar um console.log. (A api de posts vem com 100 itens, porém o FlatList carrega apenas 65 inicialmente.)

import axios from "axios";
import React, { useEffect, useState } from "react";
import { StyleSheet, Text, View } from "react-native";
import { FlatList } from "react-native";

export default function App() {
  const [posts, setPosts] = useState({});

  const fetchPostsJson = async () => {
    const res = await axios.get("<https://jsonplaceholder.typicode.com/posts>");
    setPosts(res.data);
  };

  useEffect(() => {
    fetchPostsJson();
  }, []);

  const renderPost = ({ item }) => (
    <View>
			{console.log(item.id)}
      <Text>ID: {item.id}</Text>
      <Text>Título: {item.title}</Text>
      <Text>Conteúdo: {item.body}</Text>
    </View>
  );

  return (
    <FlatList
      data={posts}
      renderItem={renderPost}
      keyExtractor={(item) => item.id}
    />
  );
}

const styles = StyleSheet.create({});

Nós conseguimos agora ver no console que ao iniciar o app, temos por volta de 60 ids, ou seja, 60 chamadas de posts. Quando nós vamos dando o scroll, vão sendo carregados mais posts no console, o que significa que para não pesar, ele vai chamando ao longo do scroll.

Agora, para finalizar, podemos estilizar esse nosso “renderPost”, para termos uma melhor visualização dos itens da lista.

import axios from "axios";
import React, { useEffect, useState } from "react";
import { StyleSheet, Text, View } from "react-native";
import { FlatList } from "react-native";

export default function App() {
  const [posts, setPosts] = useState({});

  const fetchPostsJson = async () => {
    const res = await axios.get("<https://jsonplaceholder.typicode.com/posts>");
    setPosts(res.data);
  };

  useEffect(() => {
    fetchPostsJson();
  }, []);

  const renderPost = ({ item }) => (
    <View style={styles.postContainer}>
      {console.log(item.id)}
      <Text>ID: {item.id}</Text>
      <Text style={styles.textTitle}>Título: {item.title}</Text>
      <Text style={styles.textContent}>Conteúdo: {item.body}</Text>
    </View>
  );

  return (
    <View style={{ marginTop: 50 }}>
      <FlatList
        data={posts}
        renderItem={renderPost}
        keyExtractor={(item) => item.id}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  postContainer: {
    borderWidth: 1,
    borderColor: "#BBBB",
    borderRadius: 5,
    margin: 10,
    padding: 16,
  },
  textTitle: {
    marginVertical: 8,
    fontWeight: "bold",
    fontSize: 18,
  },
  textContent: {
    fontWeight: "300",
    fontSize: 14,
  },
});

Ao fazermos isso, podemos ver a estilização do post, e podemos ver que como eles agora são mais pesados de se carregar, por ter um estilo agregado, no console os id’s diminuíram, mostrando que agora carregamos menos posts (por volta de 30) logo de início, e ao dar o scroll, nós também temos o carregamento aos poucos.

Finalizamos então o nosso exercício de consumo de API, com um consumo grande, de 100 posts que vão sendo carregados aos poucos de acordo com o nosso scroll. E o melhor é que acaba sendo invisível para o usuário, pois ele inicialmente vê 3/4 posts, porém temos mais 30 carregados, então ao longo do carregamento de mais, ele não vai ver.