Como validar CPF em React Native usando fetch e axios

npm install axios

const API_KEY = 'SUA_CHAVE_DE_API';

async function consultarCpfComFetch(cpf) {
    const cpfLimpo = cpf.replace(/\D/g, '');

    if (cpfLimpo.length !== 11) {
    throw new Error('CPF deve ter 11 dígitos.');
    }

    const controller = new AbortController();
    const timeoutId = setTimeout(() => controller.abort(), 10000);

    try {
    const response = await fetch(
    `https://api.cpfhub.io/cpf/${cpfLimpo}`,
    {
    method: 'GET',
    headers: {
    'x-api-key': API_KEY,
    'Accept': 'application/json',
    },
    signal: controller.signal,
    }
    );

    clearTimeout(timeoutId);

    if (!response.ok) {
    throw new Error(`Erro HTTP: ${response.status}`);
    }

    const dados = await response.json();

    if (dados.success && dados.data) {
    return dados.data;
    } else {
    throw new Error('CPF não encontrado na base de dados.');
    }
    } catch (error) {
    clearTimeout(timeoutId);
    if (error.name === 'AbortError') {
    throw new Error('A requisição excedeu o tempo limite.');
    }
    throw error;
    }
}

import axios from 'axios';

const API_KEY = 'SUA_CHAVE_DE_API';

const cpfHubApi = axios.create({
    baseURL: 'https://api.cpfhub.io',
    timeout: 10000,
    headers: {
    'x-api-key': API_KEY,
    'Accept': 'application/json',
    },
});

async function consultarCpfComAxios(cpf) {
    const cpfLimpo = cpf.replace(/\D/g, '');

    if (cpfLimpo.length !== 11) {
    throw new Error('CPF deve ter 11 dígitos.');
    }

    try {
    const response = await cpfHubApi.get(`/cpf/${cpfLimpo}`);

    if (response.data.success && response.data.data) {
    return response.data.data;
    } else {
    throw new Error('CPF não encontrado na base de dados.');
    }
    } catch (error) {
    if (error.response) {
    throw new Error(`Erro HTTP: ${error.response.status}`);
    } else if (error.code === 'ECONNABORTED') {
    throw new Error('A requisição excedeu o tempo limite.');
    }
    throw error;
    }
}

{
    "success": true,
    "data": {
    "cpf": "12345678900",
    "name": "João da Silva",
    "nameUpper": "JOÃO DA SILVA",
    "gender": "M",
    "birthDate": "15/06/1990",
    "day": 15,
    "month": 6,
    "year": 1990
    }
}

import React, { useState } from 'react';
import {
    View,
    Text,
    TextInput,
    TouchableOpacity,
    StyleSheet,
    ActivityIndicator,
} from 'react-native';

const API_KEY = 'SUA_CHAVE_DE_API';

export default function ConsultaCpfScreen() {
    const [cpf, setCpf] = useState('');
    const [resultado, setResultado] = useState(null);
    const [erro, setErro] = useState('');
    const [carregando, setCarregando] = useState(false);

    async function handleConsulta() {
    setErro('');
    setResultado(null);
    setCarregando(true);

    const cpfLimpo = cpf.replace(/\D/g, '');

    if (cpfLimpo.length !== 11) {
    setErro('Informe um CPF com 11 dígitos.');
    setCarregando(false);
    return;
    }

    const controller = new AbortController();
    const timeoutId = setTimeout(() => controller.abort(), 10000);

    try {
    const response = await fetch(
    `https://api.cpfhub.io/cpf/${cpfLimpo}`,
    {
    method: 'GET',
    headers: {
    'x-api-key': API_KEY,
    'Accept': 'application/json',
    },
    signal: controller.signal,
    }
    );

    clearTimeout(timeoutId);

    const dados = await response.json();

    if (dados.success && dados.data) {
    setResultado(dados.data);
    } else {
    setErro('CPF não encontrado.');
    }
    } catch (error) {
    clearTimeout(timeoutId);
    if (error.name === 'AbortError') {
    setErro('Tempo limite excedido.');
    } else {
    setErro('Erro ao consultar CPF.');
    }
    } finally {
    setCarregando(false);
    }
    }

    return (
    <View style={styles.container}>
    <Text style={styles.titulo}>Consulta de CPF</Text>
    <TextInput
    style={styles.input}
    value={cpf}
    onChangeText={setCpf}
    placeholder="Digite o CPF"
    keyboardType="numeric"
    maxLength={11}
    />
    <TouchableOpacity
    style={styles.botao}
    onPress={handleConsulta}
    disabled={carregando}
    >
    {carregando ? (
    <ActivityIndicator color="#fff" />
    ) : (
    <Text style={styles.botaoTexto}>Consultar</Text>
    )}
    </TouchableOpacity>

    {resultado && (
    <View style={styles.resultado}>
    <Text>Nome: {resultado.name}</Text>
    <Text>CPF: {resultado.cpf}</Text>
    <Text>Nascimento: {resultado.birthDate}</Text>
    <Text>Gênero: {resultado.gender}</Text>
    </View>
    )}

    {erro ? <Text style={styles.erro}>{erro}</Text> : null}
    </View>
    );
}

const styles = StyleSheet.create({
    container: { flex: 1, padding: 20, justifyContent: 'center' },
    titulo: { fontSize: 24, fontWeight: 'bold', marginBottom: 20 },
    input: { borderWidth: 1, borderColor: '#ccc', padding: 12, borderRadius: 8 },
    botao: { backgroundColor: '#007AFF', padding: 14, borderRadius: 8, marginTop: 12, alignItems: 'center' },
    botaoTexto: { color: '#fff', fontSize: 16, fontWeight: '600' },
    resultado: { marginTop: 20, padding: 16, backgroundColor: '#f0f0f0', borderRadius: 8 },
    erro: { color: 'red', marginTop: 12 },
});