Como Criar um App de Delivery Com React Native: Tutorial Completo Para 2026

Um app de delivery e um dos projetos mais complexos e mais ensinadores para um desenvolvedor mobile. Envolve mapas e geolocalização em tempo real, sistema de pedidos, pagamento, notificacoes push e painel administrativo. Este tutorial mostra como construir um MVP funcional com React Native e backend em Node.js.

Arquitetura do sistema

Um app de delivery tem 3 interfaces distintas:

App do cliente: busca restaurantes/lojas, faz pedidos, acompanha em tempo real, paga e avalia.
App do entregador: recebe pedidos disponíveis, aceita, navega e confirma entrega.
Painel admin/loja: recebe pedidos, confirma preparo, acompanha status das entregas.

O backend serve os tres clientes via API REST e WebSockets para atualizacoes em tempo real.

Stack tecnologico

Frontend:
React Native com Expo (iOS + Android)
React Native Maps para mapa interativo
Socket.io-client para atualizacoes em tempo real
Zustand ou Redux para estado global

Backend:
Node.js com Fastify (mais rapido que Express para alta concorrencia)
PostgreSQL com PostGIS (extensao para dados geoespaciais)
Redis para cache e filas de mensagens
Socket.io para WebSockets

Infraestrutura:
AWS ou Railway para hosting do backend
Cloudflare para CDN
Docker para conteinizacao

Rastreamento em tempo real do entregador

O componente mais tecnicamente interessante de um app de delivery e o mapa em tempo real mostrando a posicao do entregador. Implementacao:

No app do entregador (React Native):
import * as Location from “expo-location”;
import { socket } from “../services/socket”;

export const iniciarRastreamento = async (pedidoId) => {
const { status } = await Location.requestForegroundPermissionsAsync();
if (status !== “granted”) return;

const subscription = await Location.watchPositionAsync(
{
accuracy: Location.Accuracy.High,
timeInterval: 5000, // atualiza a cada 5 segundos
distanceInterval: 10, // ou quando move 10 metros
},
(location) => {
socket.emit(“entregador_localizacao”, {
pedidoId,
lat: location.coords.latitude,
lng: location.coords.longitude,
timestamp: location.timestamp,
});
}
);

return subscription;
};

Backend (Node.js com Socket.io):
io.on(“connection”, (socket) => {
socket.on(“entregador_localizacao”, async (data) => {
const { pedidoId, lat, lng } = data;

// Salva no Redis (sobreescreve, nao precisamos do historico completo)
await redis.setex(`loc:pedido:${pedidoId}`, 300, JSON.stringify({ lat, lng }));

// Emite para o cliente que esta acompanhando esse pedido
const pedido = await db.query(“SELECT cliente_socket_id FROM pedidos WHERE id=$1”, [pedidoId]);
if (pedido.rows[0]?.cliente_socket_id) {
io.to(pedido.rows[0].cliente_socket_id).emit(“localizacao_entregador”, { lat, lng });
}
});
});

No app do cliente:
import MapView, { Marker, Polyline } from “react-native-maps”;

const TelaAcompanhamento = ({ pedidoId }) => {
const [posEntregador, setPosEntregador] = useState(null);

useEffect(() => {
socket.emit(“acompanhar_pedido”, { pedidoId });
socket.on(“localizacao_entregador”, ({ lat, lng }) => {
setPosEntregador({ latitude: lat, longitude: lng });
});
return () => socket.off(“localizacao_entregador”);
}, [pedidoId]);

return (

{posEntregador && (

)}

);
};

Notificacoes push com Expo Notifications

Para notificar o cliente quando o pedido e aceito, em preparo, saiu para entrega e entregue:

import * as Notifications from “expo-notifications”;

const registrarParaNotificacoes = async () => {
const { status } = await Notifications.requestPermissionsAsync();
if (status !== “granted”) return null;

const token = (await Notifications.getExpoPushTokenAsync()).data;
return token; // Salvar no backend associado ao usuario
};

No backend, envie para o token do usuario:
const { Expo } = require(“expo-server-sdk”);
const expo = new Expo();

const notificarCliente = async (expoPushToken, titulo, corpo) => {
if (!Expo.isExpoPushToken(expoPushToken)) return;

await expo.sendPushNotificationsAsync([{
to: expoPushToken,
sound: “default”,
title: titulo,
body: corpo,
data: { screen: “Acompanhamento” },
}]);
};

Integracao com Google Maps para calcular rotas

Para exibir a rota do entregador ate o destino no mapa do cliente, use a Directions API do Google:

const buscarRota = async (origem, destino) => {
const response = await fetch(
`https://maps.googleapis.com/maps/api/directions/json?origin=${origem.lat},${origem.lng}&destination=${destino.lat},${destino.lng}&key=${process.env.GOOGLE_MAPS_KEY}&language=pt-BR&mode=driving`
);
const data = await response.json();

if (data.status !== “OK”) return null;

const pontos = data.routes[0].overview_polyline.points;
return decodePolyline(pontos); // biblioteca polyline decodifica para array de coordenadas
};