Consumir APIs React Native: Conectando seu App ao Mundo

import React, { useState, useEffect } from 'react'; import { View, Text, FlatList, StyleSheet, ActivityIndicator } from 'react-native';export default function AppApi() { const [usuarios, setUsuarios] = useState([]); const [carregando, setCarregando] = useState(true);// Função para buscar os dados const obterDados = async () => { try { const resposta = await fetch('https://jsonplaceholder.typicode.com/users'); const dados = await resposta.json(); setUsuarios(dados); // Guarda os dados no estado } catch (erro) { console.error("Erro ao buscar dados: ", erro); } finally { setCarregando(false); // Para de mostrar o ícone de carregamento } };// Executa a função assim que o componente é montado useEffect(() => { obterDados(); }, []);if (carregando) { return ( <View style={estilos.centralizado}> <ActivityIndicator size="large" color="#6200ee" /> <Text>Buscando dados na nuvem...</Text> </View> ); }return ( <View style={estilos.container}> <Text style={estilos.titulo}>Usuários da API</Text> <FlatList data={usuarios} keyExtractor={(item) => item.id.toString()} renderItem={({ item }) => ( <View style={estilos.cartao}> <Text style={estilos.nome}>{item.name}</Text> <Text style={estilos.email}>{item.email}</Text> </View> )} /> </View> ); }const estilos = StyleSheet.create({ container: { flex: 1, backgroundColor: '#f0f0f0', paddingTop: 50 }, centralizado: { flex: 1, justifyContent: 'center', alignItems: 'center' }, titulo: { fontSize: 22, fontWeight: 'bold', textAlign: 'center', marginBottom: 20 }, cartao: { backgroundColor: '#fff', padding: 15, marginHorizontal: 20, marginBottom: 10, borderRadius: 8, elevation: 3 }, nome: { fontSize: 18, fontWeight: 'bold' }, email: { color: '#666' } });