Como conectar React Native com uma API Node.js

1. Criando a API Node.js

Vamos começar criando um servidor básico com Express:

npm init -y
npm install express cors

// server.js
const express = require('express');
const cors = require('cors');
const app = express();
app.use(cors());
app.use(express.json());

const dados = [
  { id: 1, nome: 'Douglas', cidade: 'Andradina' },
  { id: 2, nome: 'Maria', cidade: 'Araçatuba' }
];

app.get('/usuarios', (req, res) => res.json(dados));

app.listen(3000, () => console.log('API rodando em http://localhost:3000'));

Agora, a rota /usuarios retorna um JSON que o aplicativo poderá consumir.

2. Criando o app React Native

No Expo, crie um novo projeto e instale o Axios:

npx create-expo-app meuApp
cd meuApp
npm install axios

Agora, edite o App.js:

import axios from 'axios';
import { useEffect, useState } from 'react';
import { View, Text, FlatList } from 'react-native';

export default function App() {
  const [usuarios, setUsuarios] = useState([]);

  useEffect(() => {
    axios.get('http://192.168.0.10:3000/usuarios') // IP da sua máquina
      .then(res => setUsuarios(res.data))
      .catch(err => console.log(err));
  }, []);

  return (
    <View style={{ padding: 20 }}>
      <Text style={{ fontSize: 20, fontWeight: 'bold' }}>Usuários</Text>
      <FlatList
        data={usuarios}
        keyExtractor={item => item.id.toString()}
        renderItem={({ item }) => (
          <Text>{item.nome} - {item.cidade}</Text>
        )}
      />
    </View>
  );
}

3. Testando a comunicação

Com o servidor Node rodando (node server.js) e o app no Expo, você verá os nomes e cidades sendo exibidos em tempo real. Isso mostra que o app e o backend estão se comunicando corretamente.

4. Boas práticas e segurança

• Use variáveis de ambiente (.env) para guardar URLs e chaves.
• Implemente autenticação JWT para rotas protegidas.
• Trate erros de rede com mensagens amigáveis ao usuário.
• Evite hardcode de IPs em produção — use domínios ou APIs hospedadas.

Conclusão

A integração entre React Native e Node.js é poderosa e simples quando bem estruturada. Com esse padrão, você pode escalar seu app, incluir autenticação, persistência de dados e até notificação em tempo real.