Vou ser honesto com você: três anos atrás, eu teria dito a qualquer agência web perguntando sobre mobile para apenas criar um PWA e pronto. Esse conselho envelheceu mal. O mercado de aplicativos móveis atingiu $935 bilhões em receita em 2025, as expectativas dos clientes mudaram dramaticamente, e React Native amadureceu em algo que genuinamente gosto de trabalhar. Se sua agência já constrói com Next.js e React, você está sentado em uma mina de ouro de habilidades transferíveis. Mas existem armadilhas reais, e eu já caí na maioria delas para que você não precise.

Este artigo é o guia que gostaria de ter quando começamos a levar seriamente clientes de mobile. Aborda a realidade da engenharia, a economia dos negócios e o pipeline de implantação que você precisará. Sem brincadeiras sobre "sinergias" — apenas lições conquistadas com dificuldade ao enviar aplicativos em produção.

Índice

React Native para Agências Web: Adicionando Mobile à Sua Prática Next.js em 2026

Por que 2026 é o Momento Certo para Agências Web Entrarem em Mobile

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

A Nova Arquitetura do React Native está estável. O renderizador Fabric e TurboModules que estavam "chegando em breve" por anos agora são o padrão. As lacunas de desempenho entre React Native e Swift/Kotlin nativo encolheram para praticamente irrelevância em 90% das categorias de aplicativos. A JSI (JavaScript Interface) significa que você não está mais cruzando uma ponte para cada chamada nativa — é síncrona e rápida.

Expo virou uma plataforma completa. O 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 em segundo plano 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 dos clientes mudou. Estou vendo um padrão entre agências da nossa rede: clientes que costumavam pedir "um website" agora pedem "um produto digital". Eles esperam uma presença web E um aplicativo mobile, e esperam que compartilhem um design system. Se você conseguir entregar ambos de um único time, você não está competindo contra lojas web e mobile separadas — você está substituindo ambas.

Os Números do Mercado

De acordo com dados de 2025 da Statista, a receita global de aplicativos móveis deverá chegar a $1,1 trilhão até 2027. Mas mais relevante para agências: o orçamento médio de aplicativo mobile do cliente corporativo em 2025-2026 fica entre $150K-$500K para um MVP. Isso é 2-3x o que a maioria dos projetos web da agência cobra.

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

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

Aqui está uma análise honesta do que transfere e do que não:

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

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

O Que Mais Me Surpreendeu

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

O que transferiu pior do que eu esperava 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ê experimentou React Native em 2019-2020 e desistiu, eu entendo. A experiência de desenvolvedor era áspera. Expo transformou fundamentalmente isso.

Aqui está o que Expo oferece em 2026:

  • Expo Router v4: Roteamento baseado em arquivos que espelha convenções Next.js. Seus devs se sentirão em casa imediatamente.
  • API de Módulos Expo: Escreva módulos nativos em Swift/Kotlin com uma interface TypeScript limpa. Chega de código de ponte chato.
  • EAS Build: Compilações baseadas em nuvem para iOS e Android. Nenhum Mac necessário para compilações iOS.
  • EAS Submit: Submissões automatizadas na App Store e Play Store.
  • EAS Update: Atualizações over-the-air que contornam a revisão de app store para mudanças apenas JS.
  • Expo Dev Client: Compilações de desenvolvimento personalizadas que incluem seus módulos nativos mas mantêm a DX de fast refresh.
# Criando um novo projeto Expo em 2026
npx create-expo-app@latest my-app --template tabs
cd my-app
npx expo start

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

Expo Router: A Ponte do Next.js

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

app/
  (tabs)/
    index.tsx        # Aba Home
    settings.tsx     # Aba Settings
    _layout.tsx      # Layout de abas
  profile/
    [id].tsx         # Rota dinâmica
  _layout.tsx        # Layout raiz

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

React Native para Agências Web: Adicionando Mobile à Sua Prática Next.js em 2026 - arquitetura

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

Aqui é onde as agências obtêm o ROI real. Compartilhar código entre web e mobile não é apenas bom ter — é a justificativa econômica para oferecer ambos os serviços.

O Que Compartilhar

Compartilhe agressivamente:

  • Lógica de negócio e utilitários
  • Clientes de API e hooks de busca de dados
  • Lojas de gerenciamento de estado
  • Definições de tipos e schemas de validação (Zod funciona bem aqui)
  • Lógica de autenticação

Compartilhe com cuidado:

  • Tokens de design (cores, espaçamento, escalas de tipografia)
  • 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

Configuração 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/          # Aplicativo Next.js
  mobile/       # Aplicativo 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 aplicativo Next.js e no seu aplicativo React Native. A busca de dados, caching e gerenciamento de estado são completamente compartilhados. Apenas a camada de UI que renderiza os produtos difere.

A Abordagem Solito / Universal

Para agências que querem levar o compartilhamento de código ainda mais longe, Solito (por Fernando Rojo) permite 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, embora eu recomendaria isso apenas para times que já enviaram pelo menos um projeto React Native. Adiciona complexidade.

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

EAS Build e Deployment: Seu Pipeline CI/CD

Deployment é onde o desenvolvimento mobile tem sido historicamente doloroso. Assinatura de aplicativo, perfis de provisionamento, conformidade com a App Store — é um labirinto. EAS torna isso gerenciável.

Preços do EAS Build (2026)

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

Para a maioria das agências, o plano Production é o ponto ideal. Você queimará créditos da camada gratuita rapidamente quando tiver mais de um projeto ativo.

Um Pipeline CI/CD Real

Aqui está o pipeline que usamos, e funcionou 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 de JavaScript que não tocam código nativo, use EAS Update em vez de um build completo:

# Empurre uma atualização OTA — usuários a recebem no próximo lançamento do aplicativo
eas update --branch production --message "Fix checkout button alignment"

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

Economia de Agências: Preços, Pessoal e Margens

Vamos falar sobre dinheiro. É onde vejo as agências cometendo 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 contínuos de plataforma. Aqui está o que vimos funcionar:

Tipo de Projeto Taxa Típica de Agência Timeline Intervalo Total
Aplicativo simples (conteúdo, auth, CRUD básico) $180-250/hr 8-12 semanas $90K-$180K
Aplicativo médio (pagamentos, tempo real, integrações) $180-250/hr 12-20 semanas $180K-$400K
Aplicativo complexo (offline-first, recursos nativos pesados) $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 recebendo ambos por $350K está recebendo um melhor negócio do que pagando $200K para web e $300K para mobile para lojas separadas. E suas margens são melhores por causa do compartilhamento de código.

Modelo de Pessoal

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 contratado que tem experiência em React Native como guia. Orçamento $15-25K para o contratado.
  2. Fase 2 (2-3 projetos em): Seu time tem experiência suficiente. Contrate um desenvolvedor com background forte em React Native para ser o líder mobile.
  3. Fase 3 (mobile é 30%+ da receita): Construa um pod mobile dedicado de 2-3 desenvolvedores.

O Fluxo de Receita de Manutenção

Aqui está o que ninguém lhe diz sobre mobile: requer manutenção contínua mesmo se o cliente não estiver adicionando features. iOS e Android lançam versões principais do SO anualmente. Dependências precisam ser atualizadas. Políticas da App Store mudam. Essa é receita recorrente.

Cobramos $3.000-$8.000/mês em retentores de manutenção de aplicativo mobile dependendo da complexidade do aplicativo. Em 8-10 clientes, essa é uma receita recorrente significativa que suaviza a volatilidade de renda baseada em projetos.

Quando Dizer Sim (e Não) a Clientes de Mobile

Nem todo projeto mobile é certo para sua agência. Aprendi isso da maneira 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ê já está 40% pronto no dia um.
  • O aplicativo é principalmente orientado por dados — Aplicativos CRUD, dashboards, e-commerce, entrega de conteúdo. React Native se destaca aqui.
  • O cliente tem timelines realistas — 8 semanas no 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 aplicativo requer GPU/gráficos pesados — Jogos, experiências AR, 3D complexo. Use Unity ou nativo.
  • O aplicativo precisa de integração profunda de hardware — Periféricos Bluetooth LE, pipelines de câmera customizados, 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 pixel-perfect" — Se eles querem seu aplicativo iOS se sentir exatamente como um aplicativo SwiftUI e seu aplicativo Android se sentir exatamente como Jetpack Compose, React Native adiciona overhead.
  • Orçamento é menos de $50K — Você 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 aplicativo mobile, E um aplicativo web, escopo com cuidado. Isso 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 sobre:

Custo Quantidade Anual Notas
Conta de Desenvolvedor Apple $99/ano por cliente Necessário para App Store
Conta de Desenvolvedor Google Play $25 uma vez por cliente Necessário para Play Store
EAS Build (Production) $1.188/ano Compartilhado entre projetos
Screenshots e assets da App Store $500-2.000 por aplicativo Frequentemente esquecido no escopo
Lab de testes de dispositivos $2.000-5.000/ano Dispositivos físicos ou BrowserStack
Serviço de notificação push $0-500/mês Firebase é gratuito para começar, escala
Certificados de assinatura de código Incluído na conta Apple Dev Mas gerenciá-los leva tempo
Otimização da App Store $500-2.000/lançamento Se você está fazendo isso para clientes

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

Custos de Tempo

Revisão da App Store leva 24-48 horas tipicamente, mas pode levar uma semana durante períodos de férias. Revisão da Play Store é geralmente mais rápida (horas para um dia). Contabilize isso em seus timelines de projeto — você não pode apenas "fazer deploy na sexta-feira" como você faz com aplicativos web.

Primeiras submissões de aplicativo levam mais tempo. Apple especialmente escrutina novas contas de desenvolvedor. Tivemos primeiras submissões 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 aplicativo simples interno usando Expo. Um rastreador de tempo, um dashboard de projeto, o que quer que seja. Familiarize seu time com as ferramentas sem pressão de cliente. Use isso para configurar sua estrutura monorepo, pipeline CI/CD e processo de testes de dispositivos.

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

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

Mês 9+: Tornar Produto Crie um template de projeto mobile padrão, planilha de estimativa e processo de onboarding. É quando mobile vira uma linha de serviço real, não um experimento.

Ao longo deste processo, invista em suas capacidades de Headless CMS — aplicativos mobile orientados por conteúdo que puxam do mesmo CMS que a web é um dos bundles de maior valor que você pode oferecer aos clientes.

Recomendação de Stack de Tecnologia

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

  • Expo SDK 53+ com Expo Router v4
  • NativeWind v4 para estilo (Tailwind CSS para React Native)
  • TanStack Query para estado de servidor
  • Zustand para estado de cliente
  • 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 compartilhamento de código 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?

Com base em nossa experiência ramping up cinco desenvolvedores web, espere 2-3 semanas para produtividade básica (consegue construir telas e implementar features) e 2-3 meses para o que eu chamaria de independência confiante (consegue arquitetar features, debugar problemas nativos, lidar com edge cases específicos de plataforma). A curva de aprendizado inicial é principalmente sobre padrões de navegação, convenções de UX específicas de mobile e as diferenças de estilo.

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>). No entanto, você pode compartilhar lógica de componentes através de custom hooks, compartilhar tokens de design 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, principalmente código de lógica de negócio e camada de dados.

Quanto custa manter um aplicativo React Native anualmente?

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

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

Sim, definitivamente. Com a Nova Arquitetura (Fabric + TurboModules + JSI) agora o padrão, aplicativos React Native alcançam 60fps consistentemente para UI padrão. Aplicativos como Discord, Shopify Shop e Coinbase usam React Native em escala. A lacuna de desempenho com nativo é negligenciável para 90%+ de categorias de aplicativo. Onde ainda fica atrás é em animação pesada ou workloads intensivos de GPU.

Devo usar Expo ou React Native puro?

Expo. Isso nem é uma escolha próxima em 2026. Expo suporta praticamente toda API nativa, a API de Módulos Expo deixa você escrever código nativo customizado quando necessário, e EAS Build elimina as dores de cabeça da toolchain nativa. O conselho antigo de "ejetar do Expo se você precisar de X" é desatualizado. Aproximadamente 85-90% dos aplicativos React Native em produção agora usam Expo, incluindo aplicativos principais.

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 em React Native (até se via seu projeto de treinamento interno). 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 contratado React Native em tempo parcial como rede de segurança.

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

EAS Submit automatiza o processo de upload binário. Mas você ainda precisará gerenciar App Store Connect e Google Play Console manualmente para metadados, screenshots, declarações de privacidade e respostas de revisão. O processo de revisão da Apple leva 24-48 horas tipicamente. Orçamento 1-2 semanas para primeiras submissões devido a potenciais rejeições. Razões comuns de rejeição: política de privacidade ausente, funcionalidade de login inadequada e metadados incompletos.

Vale a pena oferecer desenvolvimento mobile se só temos 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 de 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 seu time não está dividido — eles estão trabalhando em plataformas com fundações compartilhadas. Confira nossa página de preços ou entre em contato direto se quiser discutir como outras agências de tamanho similar fizeram essa transição.