Seu cliente pede um app iOS. Você abre a documentação do Expo, dá uma olhada no guia de setup, e pensa: Tão difícil assim é? Três semanas depois, você está debugando uma biblioteca de navegação à noite, seu designer está perguntando por que as fontes renderizam diferente no Android, e sua margem de lucro evaporou em quirks específicas de plataforma que você não cobrou. Aprendi React Native do jeito caro — entregando quatro projetos de agência antes de decifrar a matemática de compartilhamento de código que realmente protege seu cronograma. O mercado mobile de $935B chegou em 2025, clientes agora esperam apps nativos junto com seus builds Next.js, e se você já escreve React, você já está 68% do caminho percorrido. Mas há um campo minado entre "funciona no meu simulador" e entregar apps em produção que não custam seus fins de semana. Este é o playbook de expansão que desejaria ter tido em 2023 — os custos reais, a stack Expo + EAS Build que o salva do inferno do Xcode, e a estrutura de preço que transforma mobile de um risco em seu serviço com maior margem.

Este artigo é o guia que desejaria ter tido quando começamos a levar clientes mobile a sério. Ele cobre a realidade de engenharia, a economia de negócios, e o pipeline de deploy que você precisará. Sem hand-waving sobre "sinergias" — apenas lições conquistadas a duro custo de entregar apps em produção.

Índice

React Native para Agências Web: Agregando Mobile ao Seu Next.js em 2026

Por Que 2026 É o Tempo Certo para Agências Web Irem para Mobile

O argumento de timing não é apenas sobre tamanho de mercado. É sobre três mudanças específicas que convergiram:

A New Architecture do React Native é estável. O renderer Fabric e TurboModules que eram "em breve" por anos agora são o padrão. As lacunas de performance entre React Native e Swift/Kotlin nativo encolheram para quase irrelevância para 90% das categorias de app. A JSI (JavaScript Interface) significa que você não está mais cruzando uma bridge para cada chamada nativa — é síncrono e rápido.

Expo se tornou uma plataforma completa. Expo SDK 53 (lançado no início de 2026) suporta praticamente todas as APIs nativas que você precisaria. Os dias de ejetar do Expo para recursos básicos como Bluetooth ou localização de fundo acabaram. EAS Build lida com todo o pipeline de compilação. Você nunca precisa do Xcode na sua máquina para a maioria dos projetos.

A demanda de clientes mudou. Estou vendo um padrão em agências na nossa rede: clientes que costumavam pedir por "um site" agora pedem por "um produto digital". Eles esperam uma presença web E um app mobile, e esperam que compartilhem um design system. Se você conseguir entregar ambos com um time, você não está competindo contra lojas web e mobile separadas — você está substituindo ambas.

Os Números de Mercado

De acordo com dados de 2025 da Statista, a receita global de apps mobile é projetada para atingir $1.1 trilhão até 2027. Mas mais relevante para agências: o orçamento médio de app mobile do cliente enterprise em 2026 fica entre $150K-$500K para um MVP. Isso é 2-3x do que a maioria dos projetos web de agência consegue.

A Sobreposição do Ecossistema React: O Que Realmente Transfere

Vamos matar o mito primeiro: React Native não é "apenas React para telefones". Seus desenvolvedores terão uma curva de aprendizado. Mas é muito mais curta que aprender Swift e Kotlin do zero.

Aqui está um breakdown honesto do que transfere e o que não:

Habilidade/Tecnologia Transfere para React Native? Notas
Padrões de componentes React ✅ Sim, direto Hooks, context, state management — tudo idêntico
TypeScript ✅ Sim, direto Mesma linguagem, mesmas ferramentas
State management (Zustand, Jotai, Redux) ✅ Sim, direto Compatível drop-in
React Query / TanStack Query ✅ Sim, direto Mesma API, mesmas estratégias de cache
CSS / Tailwind ⚠️ Parcialmente Sem cascata CSS. NativeWind preenche essa lacuna
Roteamento Next.js ⚠️ Parcialmente Expo Router é baseado em arquivo também, mas paradigmas de navegação diferem
Manipulação DOM ❌ Não Não há DOM. Período.
Elementos HTML ❌ Não <View>, <Text>, <Pressable> em vez disso
APIs do Navegador ❌ Não Precisa de módulos Expo ou módulos nativos
Animações CSS ❌ Não Use Reanimated 3 (que é na verdade melhor)

O sweet spot é este: seus desenvolvedores React podem ser produtivos em React Native em 2-3 semanas. Eles não serão especialistas, mas conseguem entregar features. Isso é um avanço massivo comparado a contratar desenvolvedores nativos.

O Que Me Surpreendeu Mais

A coisa que transferiu melhor que o esperado foi o modelo mental. Composição de componentes do React, fluxo unidirecional de dados, e UI declarativa — essas são as partes difíceis de aprender. As diferenças de superfície de API (<div> vs <View>) são triviais em comparação.

O que transferiu pior que o esperado foi layout. Sim, React Native usa Flexbox. Mas é Flexbox com flexDirection: 'column' como padrão, sem display: grid, sem media queries (você usa useWindowDimensions), e sem estilos em cascata. Cada desenvolvedor do nosso time tropeçou nisso na primeira semana.

Expo em 2026: A Plataforma Que Mudou Tudo

Se você tentou React Native em 2019-2020 e desistiu, eu entendo. A experiência de desenvolvedor era difícil. Expo transformou isso fundamentalmente.

Aqui está o que Expo oferece em 2026:

  • Expo Router v4: Roteamento baseado em arquivo que espelha convenções Next.js. Seus devs se sentirão em casa imediatamente.
  • Expo Modules API: Escreva módulos nativos em Swift/Kotlin com uma interface TypeScript limpa. Sem mais código de bridge instável.
  • EAS Build: Builds em nuvem para iOS e Android. Sem Mac necessário para builds iOS.
  • EAS Submit: Submissões automatizadas para App Store e Play Store.
  • EAS Update: Atualizações over-the-air que bypass revisão de app store para mudanças apenas JS.
  • Expo Dev Client: Custom development builds que incluem seus módulos nativos mas mantêm DX com fast refresh.
# Criando um novo projeto Expo em 2026
npx create-expo-app@latest my-app --template tabs
cd my-app
npx expo start

Isso é tudo. Você está rodando no iOS Simulator e Android Emulator (ou dispositivos físicos via Expo Go) em menos de dois minutos.

Expo Router: A Bridge do Next.js

Expo Router merece atenção especial porque é a razão individual mais importante pela qual desenvolvedores Next.js se adaptam rapidamente. Veja a estrutura:

app/
  (tabs)/
    index.tsx        # Home tab
    settings.tsx     # Settings tab
    _layout.tsx      # Tab layout
  profile/
    [id].tsx         # Dynamic route
  _layout.tsx        # Root layout

Se você está construindo com Next.js App Router, essa estrutura é quase idêntica. Rotas dinâmicas, layouts, navegação aninhada — os conceitos mapeiam direto. A diferença principal é que navegação mobile usa stacks e tabs em vez de páginas e caminhos de URL, mas Expo Router abstrai isso lindamente.

React Native para Agências Web: Agregando Mobile ao Seu Next.js em 2026 - arquitetura

Compartilhamento de Código Entre Next.js e React Native

Este é onde agências conseguem o ROI real. Compartilhar código entre web e mobile não é apenas nice to have — é a justificativa econômica para oferecer ambos os serviços.

O Que Compartilhar

Compartilhe agressivamente:

  • Lógica de negócio e utilities
  • Clientes de API e hooks de data fetching
  • Stores de state management
  • Definições de tipo e schemas de validação (Zod funciona bem aqui)
  • Lógica de autenticação

Compartilhe com cuidado:

  • Design tokens (cores, espaçamento, escalas tipográficas)
  • Lógica de componentes (mas não renderização de componentes)

Não compartilhe:

  • Componentes de UI diretamente (os primitivos de renderização são diferentes)
  • Lógica de navegação
  • Animações específicas de plataforma

Setup de Monorepo

A abordagem padrão em 2026 é um monorepo Turborepo ou Nx. Aqui está uma estrutura típica:

packages/
  shared/
    src/
      hooks/
        useAuth.ts
        useProducts.ts
      utils/
        formatCurrency.ts
        validateEmail.ts
      types/
        user.ts
        product.ts
      api/
        client.ts
apps/
  web/          # App Next.js
  mobile/       # App Expo

// packages/shared/src/hooks/useProducts.ts
import { useQuery } from '@tanstack/react-query';
import { apiClient } from '../api/client';
import type { Product } from '../types/product';

export function useProducts(categoryId: string) {
  return useQuery<Product[]>({
    queryKey: ['products', categoryId],
    queryFn: () => apiClient.get(`/products?category=${categoryId}`),
    staleTime: 5 * 60 * 1000,
  });
}

Este hook funciona identicamente no seu app Next.js e no seu app React Native. O data fetching, caching, e state management são completamente compartilhados. Apenas a camada de UI que renderiza os produtos difere.

A Abordagem Solito / Universal

Para agências que querem empurrar o compartilhamento de código ainda mais longe, Solito (por Fernando Rojo) habilita navegação universal e alguns componentes compartilhados entre Next.js e Expo. Em 2026, a biblioteca react-native-web do React Native também é madura o suficiente para compartilhamento de design system, mas eu recomendaria isso apenas para times que já entregaram pelo menos um projeto React Native. Isso adiciona complexidade.

Nossa razão típica de compartilhamento de código: 40-60% do total da base de código é compartilhado entre web e mobile. Isso não é marketing — isso é medido em seis projetos de clientes.

EAS Build e Deploy: Seu Pipeline CI/CD

Deploy é onde desenvolvimento mobile historicamente tem sido doloroso. Assinatura de app, provisioning profiles, conformidade com Play Store — é um labirinto. EAS o torna gerenciável.

Preço do EAS Build (2026)

Plano Preço Créditos de Build/Mês Velocidade de Build
Free $0 30 iOS + 30 Android ~40 min por build
Production $99/mês 200 total ~15 min por build
Enterprise $999/mês Ilimitado ~8 min por build (prioridade)

Para a maioria das agências, o plano Production é o sweet spot. Você queimará os créditos do tier free rápido uma vez que tiver mais de um projeto ativo.

Um Pipeline CI/CD Real

Aqui está o pipeline que usamos, e tem funcionado bem em múltiplos projetos de clientes:

# .github/workflows/mobile-deploy.yml
name: Mobile Deploy
on:
  push:
    branches: [main]
    paths:
      - 'apps/mobile/**'
      - 'packages/shared/**'

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
      - run: npm ci
      - run: npx eas-cli build --platform all --non-interactive --profile production
        env:
          EXPO_TOKEN: ${{ secrets.EXPO_TOKEN }}

  submit:
    needs: build
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - run: npx eas-cli submit --platform all --non-interactive
        env:
          EXPO_TOKEN: ${{ secrets.EXPO_TOKEN }}

Para atualizações apenas JavaScript que não tocam código nativo, use EAS Update em vez de um build completo:

# Push uma atualização OTA — usuários a conseguem no próximo launch do app
eas update --branch production --message "Fix checkout button alignment"

Isso é enorme para agências. Correções de bugs que levariam 1-3 dias esperando revisão da App Store agora chegam aos usuários em minutos.

Economia de Agência: Preço, Staffing e Margens

Vamos falar de dinheiro. É aqui que vejo agências cometer os maiores erros.

Precificando Projetos Mobile

Não precifique projetos mobile como projetos web. Eles são mais caros de construir, mais caros de manter, e vêm com custos de plataforma contínuos. Aqui está o que vimos funcionar:

Tipo de Projeto Taxa Típica de Agência Cronograma Intervalo Total
App simples (conteúdo, auth, CRUD básico) $180-250/hr 8-12 semanas $90K-$180K
App médio (pagamentos, real-time, integrações) $180-250/hr 12-20 semanas $180K-$400K
App complexo (offline-first, features nativas pesadas) $200-300/hr 20-32 semanas $350K-$750K
Bundle Web + Mobile (codebase compartilhado) $180-250/hr 16-28 semanas $250K-$550K

O bundle web + mobile é sua arma competitiva. Um cliente conseguindo ambos por $350K está conseguindo um melhor deal que pagar $200K para web e $300K para mobile em lojas separadas. E suas margens são melhores por causa do compartilhamento de código.

Modelo de Staffing

Você não precisa contratar desenvolvedores mobile dedicados imediatamente. Aqui está a progressão que funciona:

  1. Fase 1 (primeiro projeto mobile): Seu dev React sênior lidera, com um contractor que tem experiência React Native como guia. Orçamento $15-25K para o contractor.
  2. Fase 2 (2-3 projetos em): Seu time tem experiência suficiente. Contrate um desenvolvedor com background React Native forte para ser o líder mobile.
  3. Fase 3 (mobile é 30%+ da receita): Construa um pod mobile dedicado de 2-3 desenvolvedores.

O Stream de Receita de Manutenção

Aqui está o que ninguém te diz sobre mobile: requer manutenção contínua mesmo que o cliente não esteja adicionando features. iOS e Android lançam versões de SO maiores anualmente. Dependências precisam de atualização. Políticas da App Store mudam. Isso é receita recorrente.

Cobramos $3,000-$8,000/mês para retenedores de manutenção de app mobile dependendo da complexidade do app. Em 8-10 clientes, isso é receita recorrente significativa que suaviza volatilidade de renda baseada em projeto.

Quando Dizer Sim (e Não) para Clientes Mobile

Nem todo projeto mobile é certo para sua agência. Aprendi isso do jeito difícil.

Diga Sim Quando:

  • O cliente já tem um produto web que você construiu — você conhece o domínio, a API, a lógica de negócio. Você está 40% terminado antes do dia um.
  • O app é primariamente data-driven — CRUD apps, dashboards, e-commerce, entrega de conteúdo. React Native excela aqui.
  • O cliente tem cronogramas realistas — 8 semanas mínimo para qualquer coisa significativa.
  • Orçamento é $80K+ — Abaixo disso, você não consegue entregar qualidade e manter margens.

Diga Não Quando:

  • O app requer integração pesada de GPU/graphics — Games, experiências de AR, 3D complexo. Use Unity ou nativo.
  • O app precisa de integração profunda de hardware — Periféricos Bluetooth LE, pipelines de câmera custom, processamento de pagamento NFC. Possível em React Native, mas o desenvolvimento de módulo nativo vai explodir seu orçamento.
  • O cliente quer "design nativo de plataforma pixel-perfect" — Se eles querem que o app iOS pareça exatamente como um app SwiftUI e o app Android pareça exatamente como Jetpack Compose, React Native adiciona overhead.
  • Orçamento é menos de $50K — Você vai perder dinheiro. Refira-os a um freelancer ou plataforma no-code.
  • O cliente não tem uma API — Se você precisa construir o backend, o app mobile, E um app web, defina escopo cuidadosamente. Esses são três projetos, não um.

Custos de Engenharia: Os Números Que Ninguém Fala

Além de salários de desenvolvedores, mobile adiciona custos que agências web não pensam:

Custo Montante Anual Notas
Apple Developer Account $99/ano por cliente Necessário para App Store
Google Play Developer Account $25 one-time por cliente Necessário para Play Store
EAS Build (Production) $1,188/ano Compartilhado entre projetos
Screenshots de App Store & assets $500-2,000 por app Frequentemente esquecido em escoping
Device testing lab $2,000-5,000/ano Dispositivos físicos ou BrowserStack
Push notification service $0-500/mês Firebase é livre para começar, escala para cima
Code signing certificates Incluído na conta Apple Dev Mas gerenciar eles é tempo
App Store Optimization $500-2,000/launch Se você está fazendo isso para clientes

O custo oculto é testing em dispositivos reais. Simuladores mentem. Mantemos um device lab com 6 iPhones (vários modelos) e 4 dispositivos Android (Samsung, Pixel, um telefone barato para teste de performance). Orçamento para isso.

Custos de Tempo

Revisão da App Store leva 24-48 horas tipicamente, mas pode levar uma semana durante estações de feriados. Revisão da Play Store é geralmente mais rápida (horas para um dia). Contabilize isso nos seus cronogramas de projeto — você não pode apenas "deploy na sexta" como você faz com apps web.

Submissões de app de primeira vez levam mais tempo. Apple especialmente escrutina contas de desenvolvedor novas. Tivemos submissões iniciais levarem 5-7 dias com ciclos de rejeição-resubmissão.

Um Caminho Prático de Migração para Agências Web

Se você está convencido de adicionar mobile à sua prática, aqui está o caminho que eu recomendaria:

Mês 1-2: Projeto Interno Construa um app interno simples usando Expo. Um time tracker, um dashboard de projeto, o que for. Deixe seu time familiar com as ferramentas sem pressão de cliente. Use isso para montar sua estrutura de monorepo, pipeline CI/CD, e processo de device testing.

Mês 3-4: Upsell de Cliente Existente Aborde seu melhor cliente existente sobre um app mobile companion. Você já conhece seu domínio, sua API, seu time. Ofereça a um desconto ligeiro em troca de ser um case de referência.

Mês 5-8: Primeiro Cliente Mobile Externo Assuma um projeto mobile com escopo realista. Mantenha em 12 semanas max. Use seu projeto interno e primeiro projeto de cliente como prova de capabilidade.

Mês 9+: Productize Crie um template de projeto mobile padrão, planilha de estimação, e processo de onboarding. É quando mobile se torna uma linha de serviço real, não um experimento.

Throughout este processo, invista em suas headless CMS capabilities — apps mobile data-driven que puxam do mesmo CMS que a web são um dos bundles de maior valor que você pode oferecer clientes.

Recomendação de Tech Stack

Para agências começando em 2026, aqui está o stack que eu apostaria:

  • Expo SDK 53+ com Expo Router v4
  • NativeWind v4 para styling (Tailwind CSS para React Native)
  • TanStack Query para server state
  • Zustand para client state
  • React Native Reanimated 3 para animações
  • Turborepo para gerenciamento de monorepo
  • EAS Build + EAS Update para CI/CD

Se sua prática web usa Astro em vez de Next.js, a estratégia de código compartilhado ainda funciona — você está apenas compartilhando a camada de dados e pacotes de lógica de negócio em vez de componentes React.

FAQ

Quanto tempo leva para um desenvolvedor React/Next.js se tornar produtivo em React Native?

Baseado na nossa experiência rampeando cinco desenvolvedores web, espere 2-3 semanas para produtividade básica (pode construir screens e implementar features) e 2-3 meses para o que eu chamaria de independência confiante (pode arquitetar features, debugar issues nativas, lidar com edge cases específicos de plataforma). A curva de aprendizado inicial é principalmente sobre padrões de navegação, convenções de UX mobile-específicas, e as diferenças de styling.

Posso usar os mesmos componentes em Next.js e React Native?

Não diretamente — os primitivos de renderização são diferentes (<div> vs <View>, <span> vs <Text>). Entretanto, você pode compartilhar lógica de componentes através de custom hooks, compartilhar design tokens, e usar bibliotecas como Solito ou react-native-web para preencher a lacuna. Na prática, compartilhamos 40-60% do código total entre plataformas, primariamente lógica de negócio e código de camada de dados.

Quanto custa manter um app React Native anualmente?

Para um app de complexidade típica média, espere $36K-$96K/ano em custos de manutenção. Isso cobre updates de compatibilidade de SO (iOS e Android lançam versões maiores anualmente), updates de dependência, correções de bugs, adições de features menores, e conformidade com políticas da App Store. Esse é um custo real que clientes precisam orçar.

React Native é rápido o suficiente para apps em produção em 2026?

Sim, definitivamente. Com a New Architecture (Fabric + TurboModules + JSI) agora sendo o padrão, apps React Native alcançam 60fps consistentemente para UI padrão. Apps como Discord, Shopify Shop, e Coinbase usam React Native em escala. A lacuna de performance com nativo é negligenciável para 90%+ das categorias de app. Onde ainda fica para trás é animação pesada ou workloads GPU-intensivos.

Devo usar Expo ou React Native bare?

Expo. Isso nem é perto em 2026. Expo suporta praticamente todas as APIs nativas, a Expo Modules API permite que você escreva código nativo custom quando necessário, e EAS Build elimina os headaches de native toolchain. O conselho antigo de "ejetar do Expo se você precisar de X" é desatualizado. Aproximadamente 85-90% dos apps React Native em produção agora usam Expo, incluindo apps maiores.

Qual é o time viável mínimo para um projeto mobile?

Dois desenvolvedores e um designer que entenda convenções mobile. Um desenvolvedor deve ter experiência React Native (mesmo que via seu projeto interno training). Você pode escalar a partir daí, mas ir solo em um projeto mobile de cliente é arriscado — há muito conhecimento específico de plataforma necessário. Para seu primeiro projeto, considere um contractor React Native part-time como uma rede de segurança.

Como lido com submissões e revisões da app store?

EAS Submit automatiza o processo de upload binário. Mas você ainda vai precisar gerenciar App Store Connect e Google Play Console manualmente para metadata, screenshots, declarações de privacidade, e respostas de review. O processo de review da Apple leva 24-48 horas tipicamente. Orçamento 1-2 semanas para submissões de primeira vez por causa de possíveis rejeições. Razões comuns de rejeição: missing privacy policy, funcionalidade de login inadequada, e metadata incompleta.

Vale a pena oferecer desenvolvimento mobile se temos apenas 5-10 desenvolvedores?

Absolutamente — esse é na verdade o tamanho ideal para começar. Você não precisa de um time mobile dedicado no dia um. Comece treinando 2-3 dos seus desenvolvedores React mais fortes, assuma um projeto mobile de cada vez, e cresça a partir daí. O compartilhamento de código entre web e mobile significa que seu time não está dividido — eles estão trabalhando em plataformas com fundações compartilhadas. Verifique nossa pricing page ou nos contate diretamente se você quer discutir como outras agências de tamanho similar fizeram essa transição.