> ## Documentation Index
> Fetch the complete documentation index at: https://docs.replit.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Apps Mobile Nativos

> Aprenda como criar um app mobile nativo com o Agent, testá-lo no seu telefone e enviá-lo para Revisão da App Store para publicação.

export const MobileArchitectureDiagram = () => {
  if (typeof document !== 'undefined' && !document.getElementById('mobile-arch-styles-v3')) {
    const style = document.createElement('style');
    style.id = 'mobile-arch-styles-v3';
    style.textContent = `
      .mobile-arch-v3 {
        --arch-bg: var(--replit-docs-bg, #F6F6F4);
        --arch-surface: var(--replit-docs-bg-elevated, #F1F1EE);
        --arch-border: var(--replit-docs-border, #DEDAD5);
        --arch-text: var(--replit-docs-text, #1D1D1D);
        --arch-muted: var(--replit-docs-text-subtle, #858585);
        --arch-accent: #F26522;
        --arch-accent-soft: #FEF3EE;
      }
      
      .dark .mobile-arch-v3,
      html.dark .mobile-arch-v3,
      [data-theme="dark"] .mobile-arch-v3 {
        --arch-bg: var(--replit-docs-bg, #1E1E1F);
        --arch-surface: var(--replit-docs-bg-elevated, #222223);
        --arch-border: var(--replit-docs-border, #39393D);
        --arch-text: var(--replit-docs-text, #F5F5F5);
        --arch-muted: var(--replit-docs-text-subtle, #8E8F97);
        --arch-accent: #F26522;
        --arch-accent-soft: #1F1A17;
      }

      .arch-panel {
        transition: all 0.25s ease;
      }
      .arch-panel:hover {
        border-color: var(--arch-accent) !important;
      }
    `;
    document.head.appendChild(style);
  }
  const serverItems = [{
    label: 'Database',
    detail: 'PostgreSQL for structured data'
  }, {
    label: 'Object Storage',
    detail: 'Files, images, and media'
  }, {
    label: 'Secrets',
    detail: 'API keys stored securely'
  }, {
    label: 'API routes',
    detail: 'Server-side logic and endpoints'
  }];
  const clientItems = [{
    label: 'Native UI',
    detail: 'Real iOS and Android components'
  }, {
    label: 'Local state',
    detail: 'Fast, offline-capable data'
  }, {
    label: 'Device APIs',
    detail: 'Camera, location, notifications'
  }, {
    label: 'Live reload',
    detail: 'Instant preview via Expo Go'
  }];
  return <div className="mobile-arch-v3" style={{
    padding: '24px',
    borderRadius: '8px',
    border: '1px solid var(--arch-border)',
    background: 'var(--arch-bg)'
  }}>
      {}
      <div style={{
    marginBottom: '20px'
  }}>
        <div style={{
    fontSize: '18px',
    fontWeight: '600',
    color: 'var(--arch-text)'
  }}>
          Architecture
        </div>
        <div style={{
    fontSize: '14px',
    color: 'var(--arch-muted)',
    marginTop: '4px'
  }}>
          Your server runs on Replit. The app runs natively on devices.
        </div>
      </div>

      {}
      <div style={{
    display: 'flex',
    alignItems: 'stretch',
    gap: '16px'
  }}>
        
        {}
        <div className="arch-panel" style={{
    flex: 1,
    padding: '20px',
    borderRadius: '8px',
    border: '1px solid var(--arch-border)',
    background: 'var(--arch-surface)'
  }}>
          <div style={{
    fontSize: '13px',
    color: 'var(--arch-accent)',
    fontWeight: '600',
    marginBottom: '6px'
  }}>
            Replit Cloud
          </div>
          <div style={{
    fontSize: '16px',
    fontWeight: '600',
    color: 'var(--arch-text)',
    marginBottom: '16px'
  }}>
            Server
          </div>
          
          <div style={{
    display: 'flex',
    flexDirection: 'column',
    gap: '12px'
  }}>
            {serverItems.map(item => <div key={item.label}>
                <div style={{
    fontSize: '14px',
    fontWeight: '500',
    color: 'var(--arch-text)'
  }}>
                  {item.label}
                </div>
                <div style={{
    fontSize: '13px',
    color: 'var(--arch-muted)',
    marginTop: '2px'
  }}>
                  {item.detail}
                </div>
              </div>)}
          </div>
        </div>

        {}
        <div className="arch-panel" style={{
    flex: 1,
    padding: '20px',
    borderRadius: '8px',
    border: '1px solid var(--arch-border)',
    background: 'var(--arch-surface)'
  }}>
          <div style={{
    fontSize: '13px',
    color: 'var(--arch-accent)',
    fontWeight: '600',
    marginBottom: '6px'
  }}>
            User device
          </div>
          <div style={{
    fontSize: '16px',
    fontWeight: '600',
    color: 'var(--arch-text)',
    marginBottom: '16px'
  }}>
            Native app
          </div>
          
          <div style={{
    display: 'flex',
    flexDirection: 'column',
    gap: '12px'
  }}>
            {clientItems.map(item => <div key={item.label}>
                <div style={{
    fontSize: '14px',
    fontWeight: '500',
    color: 'var(--arch-text)'
  }}>
                  {item.label}
                </div>
                <div style={{
    fontSize: '13px',
    color: 'var(--arch-muted)',
    marginTop: '2px'
  }}>
                  {item.detail}
                </div>
              </div>)}
          </div>
        </div>
      </div>
    </div>;
};

export const MobileStackDiagram = () => {
  if (typeof document !== 'undefined' && !document.getElementById('mobile-stack-styles-v3')) {
    const style = document.createElement('style');
    style.id = 'mobile-stack-styles-v3';
    style.textContent = `
      .mobile-stack-v3 {
        --stack-bg: var(--replit-docs-bg, #F6F6F4);
        --stack-surface: var(--replit-docs-bg-elevated, #F1F1EE);
        --stack-border: var(--replit-docs-border, #DEDAD5);
        --stack-text: var(--replit-docs-text, #1D1D1D);
        --stack-muted: var(--replit-docs-text-subtle, #858585);
        --stack-accent: #F26522;
        --stack-accent-soft: #FEF3EE;
      }
      
      .dark .mobile-stack-v3,
      html.dark .mobile-stack-v3,
      [data-theme="dark"] .mobile-stack-v3 {
        --stack-bg: var(--replit-docs-bg, #1E1E1F);
        --stack-surface: var(--replit-docs-bg-elevated, #222223);
        --stack-border: var(--replit-docs-border, #39393D);
        --stack-text: var(--replit-docs-text, #F5F5F5);
        --stack-muted: var(--replit-docs-text-subtle, #8E8F97);
        --stack-accent: #F26522;
        --stack-accent-soft: #1F1A17;
      }

      .stack-layer {
        transition: all 0.25s ease;
        cursor: pointer;
      }
      .stack-layer:hover,
      .stack-layer.active {
        background: var(--stack-accent-soft) !important;
        border-color: var(--stack-accent) !important;
      }
      .stack-layer .layer-detail {
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        transition: max-height 0.3s ease, opacity 0.2s ease, margin 0.3s ease;
        margin-top: 0;
      }
      .stack-layer.active .layer-detail {
        max-height: 80px;
        opacity: 1;
        margin-top: 8px;
      }
      
      .platform-item {
        transition: all 0.2s ease;
      }
      .platform-item:hover {
        border-color: var(--stack-accent) !important;
        background: var(--stack-accent-soft) !important;
      }
    `;
    document.head.appendChild(style);
  }
  const handleLayerClick = e => {
    const layer = e.currentTarget;
    const allLayers = document.querySelectorAll('.stack-layer');
    const wasActive = layer.classList.contains('active');
    allLayers.forEach(l => l.classList.remove('active'));
    if (!wasActive) {
      layer.classList.add('active');
    }
  };
  const runAnimation = () => {
    const btn = document.getElementById('stack-animate-btn');
    if (!btn || btn.dataset.running === 'true') return;
    btn.dataset.running = 'true';
    btn.textContent = 'Running...';
    btn.style.opacity = '0.6';
    const layers = document.querySelectorAll('.stack-layer');
    const platforms = document.getElementById('stack-platforms-container');
    let step = 0;
    const totalSteps = layers.length + 1;
    const animate = () => {
      layers.forEach(l => l.classList.remove('active'));
      if (platforms) platforms.style.borderColor = 'var(--stack-border)';
      if (step < layers.length) {
        layers[step].classList.add('active');
        step++;
        setTimeout(animate, 4000);
      } else if (step === layers.length) {
        if (platforms) platforms.style.borderColor = 'var(--stack-accent)';
        step++;
        setTimeout(animate, 4000);
      } else {
        layers.forEach(l => l.classList.remove('active'));
        if (platforms) platforms.style.borderColor = 'var(--stack-border)';
        btn.dataset.running = 'false';
        btn.textContent = 'See the flow';
        btn.style.opacity = '1';
      }
    };
    animate();
  };
  const layers = [{
    title: 'Replit Agent',
    summary: 'Builds your app from a prompt',
    detail: 'Describe what you want in natural language. Agent writes TypeScript code, configures dependencies, and sets up your project.',
    verb: 'writes'
  }, {
    title: 'Your code',
    summary: 'TypeScript + React components',
    detail: 'Your app is standard React code that you own and can customize. No vendor lock-in.',
    verb: 'using'
  }, {
    title: 'Expo',
    summary: 'Development framework',
    detail: 'Expo simplifies React Native development with managed builds, over-the-air updates, and easy access to device APIs.',
    verb: 'simplifies'
  }, {
    title: 'React Native',
    summary: 'Cross-platform UI',
    detail: 'React Native compiles your JavaScript to real native code, not a web view. True native performance.',
    verb: 'compiles to'
  }];
  const platforms = ['iOS', 'Android', 'Web'];
  return <div className="mobile-stack-v3" style={{
    padding: '24px',
    borderRadius: '8px',
    border: '1px solid var(--stack-border)',
    background: 'var(--stack-bg)'
  }}>
      {}
      <div style={{
    display: 'flex',
    justifyContent: 'space-between',
    alignItems: 'flex-start',
    marginBottom: '20px'
  }}>
        <div>
          <div style={{
    fontSize: '18px',
    fontWeight: '600',
    color: 'var(--stack-text)'
  }}>
            Technology stack
          </div>
          <div style={{
    fontSize: '14px',
    color: 'var(--stack-muted)',
    marginTop: '4px'
  }}>
            Tap any layer to learn more
          </div>
        </div>
        <button id="stack-animate-btn" onClick={runAnimation} data-running="false" style={{
    padding: '8px 14px',
    fontSize: '13px',
    color: 'var(--stack-accent)',
    background: 'transparent',
    border: '1px solid var(--stack-accent)',
    borderRadius: '4px',
    cursor: 'pointer'
  }}>
          See the flow
        </button>
      </div>

      {}
      <div style={{
    display: 'flex',
    flexDirection: 'column',
    gap: '8px'
  }}>
        {layers.map(layer => <div key={layer.title}>
            <div className="stack-layer" onClick={handleLayerClick} style={{
    padding: '16px',
    borderRadius: '8px',
    border: '1px solid var(--stack-border)',
    background: 'var(--stack-surface)'
  }}>
              <div style={{
    display: 'flex',
    justifyContent: 'space-between',
    alignItems: 'center'
  }}>
                <div>
                  <div style={{
    fontSize: '16px',
    fontWeight: '500',
    color: 'var(--stack-text)'
  }}>
                    {layer.title}
                  </div>
                  <div style={{
    fontSize: '14px',
    color: 'var(--stack-muted)',
    marginTop: '4px'
  }}>
                    {layer.summary}
                  </div>
                </div>
                <div style={{
    fontSize: '14px',
    color: 'var(--stack-accent)',
    fontWeight: '500'
  }}>
                  {layer.verb}
                </div>
              </div>
              <div className="layer-detail" style={{
    fontSize: '14px',
    color: 'var(--stack-muted)',
    lineHeight: '1.5'
  }}>
                {layer.detail}
              </div>
            </div>
          </div>)}
      </div>

      {}
      <div id="stack-platforms-container" style={{
    display: 'flex',
    gap: '12px',
    padding: '12px',
    marginTop: '8px',
    borderRadius: '8px',
    border: '1px solid var(--stack-border)',
    background: 'var(--stack-surface)',
    transition: 'border-color 0.25s ease'
  }}>
        {platforms.map(platform => <div key={platform} className="platform-item" style={{
    flex: 1,
    padding: '12px',
    borderRadius: '6px',
    border: '1px solid var(--stack-border)',
    background: 'var(--stack-bg)',
    textAlign: 'center',
    fontSize: '15px',
    fontWeight: '500',
    color: 'var(--stack-text)'
  }}>
            {platform}
          </div>)}
      </div>
    </div>;
};

<Frame>
  <img src="https://mintcdn.com/replit/TlSUj3SmUsRG399T/images/native-mobile-apps/mobile-screen.png?fit=max&auto=format&n=TlSUj3SmUsRG399T&q=85&s=d512e8c7bf0a86ecacd92fbef1f52749" alt="App mobile rodando no preview do Editor de Projeto do Replit com o painel Preview no dispositivo e código QR" width="1440" height="900" data-path="images/native-mobile-apps/mobile-screen.png" />
</Frame>

Crie apps para iOS e Android com o Agent, visualize-os no seu telefone e prepare builds por meio de um fluxo guiado.

<Note>
  Para criar ou visualizar um app iOS nativo, use o Editor de Projeto em [replit.com](https://replit.com). O trabalho com apps mobile nativos também está disponível no app Android do Replit onde suportado.
</Note>

## Começando

Você pode chegar a um app mobile funcional em alguns passos:

<Steps>
  <Step title="Crie um app mobile">
    Na tela inicial do Replit, descreva sua ideia de app e selecione **App mobile** como o tipo de app.

    <Frame>
      <img src="https://mintcdn.com/replit/TlSUj3SmUsRG399T/images/native-mobile-apps/prompt.png?fit=max&auto=format&n=TlSUj3SmUsRG399T&q=85&s=21bba53b72382bf6fb0dc37a168de9e8" alt="Tela inicial do Replit com o prompt e App mobile selecionado como tipo de app" width="1440" height="900" data-path="images/native-mobile-apps/prompt.png" />
    </Frame>
  </Step>

  <Step title="Teste seu app">
    Você tem duas formas de visualizar um app mobile enquanto o cria:

    * **No Editor de Projeto**: No seletor de dispositivo do painel Preview, escolha **Simulador iOS** ou **Emulador Android**. Um simulador real transmite para o Editor de Projeto para que você possa interagir sem sair do Replit. Não é necessário Xcode ou Android Studio.
    * **Em um telefone real com o Expo Go**: Instale o [Expo Go](https://expo.dev/go) no seu iPhone ou dispositivo Android. No Editor de Projeto, selecione **Abrir no Expo Go** no painel Preview e escaneie o código QR.

    <Frame>
      <img src="https://mintcdn.com/replit/TlSUj3SmUsRG399T/images/native-mobile-apps/workspace.png?fit=max&auto=format&n=TlSUj3SmUsRG399T&q=85&s=6508e73ef3c21dcee8221e884164a23c" alt="Editor de Projeto do Replit mostrando o preview do app e a opção Preview no dispositivo mobile" width="1440" height="900" data-path="images/native-mobile-apps/workspace.png" />
    </Frame>
  </Step>

  <Step title="Itere com o Agent">
    Peça ao Agent para adicionar funcionalidades, conectar fontes de dados ou integrar serviços. Continue testando no simulador ou no seu telefone enquanto itera.
  </Step>
</Steps>

<Tip>
  O **Simulador iOS** e o **Emulador Android** do Editor de Projeto mostram a versão nativa do seu app, incluindo estilo específico de plataforma e a maioria dos componentes nativos. Para funcionalidades que dependem de hardware real — haptics, câmera, notificações push ou localização — teste em um telefone real com o Expo Go.
</Tip>

## Preview em um simulador ou emulador

O Replit permite executar e testar seus apps mobile no seu telefone usando o Expo. Alternativamente, o Replit transmite um **Simulador iOS** ou **Emulador Android** real diretamente no painel Preview. As mudanças que você faz com o Agent são recarregadas automaticamente no simulador, assim como em um dispositivo real.

<Note>
  Os previews do Simulador iOS e Emulador Android estão disponíveis para usuários dos planos Core, Pro e Enterprise. Somente para apps mobile — a opção fica oculta para projetos apenas web.
</Note>

### Como abrir um simulador

<Steps>
  <Step title="Abra seu projeto mobile">
    Abra um projeto que tenha um artefato mobile.
  </Step>

  <Step title="Escolha seu dispositivo">
    No seletor de dispositivo do painel Preview no topo, escolha **Simulador iOS** ou **Emulador Android**. O simulador inicia no lugar do preview web.
  </Step>

  <Step title="Interaja como em um dispositivo real">
    Toque, deslize, digite e navegue usando seu mouse e teclado. Selecione **Reiniciar** na barra de ferramentas para recarregar o app sem reiniciar o simulador.
  </Step>
</Steps>

<Tip>
  O simulador roda na nuvem e transmite para o seu navegador, então não há nada para baixar e nada para configurar. Os arquivos do seu projeto ficam no Replit.
</Tip>

<Frame>
  <video autoPlay muted loop playsInline src="https://cdn.replit.com/sanity/ios-emulator.mp4" />
</Frame>

### Suporte de navegadores

* **Chrome**, **Safari** e navegadores baseados em Chromium são totalmente suportados.
* **Firefox** não é suportado. As opções iOS e Android aparecem desabilitadas com uma nota "Firefox não suportado" quando você abre o Replit no Firefox. Isso é uma limitação da tecnologia de streaming que alimenta o simulador.

### Quando usar o Expo Go em vez disso

Use o Expo Go em um telefone real quando precisar testar funcionalidades que dependem de hardware real ou quando quiser compartilhar um preview com alguém que não está no seu computador:

* Câmera, microfone, haptics ou outros sensores nativos
* Notificações push
* Localização GPS real
* Compartilhar um preview de desenvolvimento com um colega de equipe, testador ou investidor

Para abrir seu app no Expo Go, abra o projeto em [replit.com](https://replit.com), selecione **Abrir no Expo Go** no painel Preview do Editor de Projeto e escaneie o código QR com o app [Expo Go](https://expo.dev/go) no seu telefone.

### Simulador em tela cheia

Em um card de artefato mobile, selecione **Mais ações** → **Abrir no Simulador iOS** ou **Abrir no Emulador Android** para abrir o simulador em sua própria aba para uma viewport maior.

## Por que criar um app mobile?

Crie um app mobile quando quiser:

* **Uma experiência nativa**: Desempenho rápido, interações suaves e UI nativa da plataforma.
* **Capacidades do dispositivo**: Câmera, notificações push, localização e muito mais.
* **Distribuição na App Store**: Uma listagem compartilhável que as pessoas podem descobrir e instalar após o processo de Revisão da App da Apple.

## Principais funcionalidades

* **Criação com IA em primeiro lugar**: Descreva seu app e o Agent cria um app mobile funcional.
* **Preview no Editor de Projeto**: Teste em um Simulador iOS ou Emulador Android sem sair do Replit, ou visualize no seu telefone com o Expo Go.
* **Full-stack por padrão**: Adicione rotas de servidor, um Banco de Dados, Armazenamento de App, Conectores e integrações de IA conforme seu app cresce.
* **Envio guiado**: Prepare builds para o TestFlight e envio à App Store sem gerenciar toolchains iOS locais.

## Fluxo de desenvolvimento

Há três estágios para acessar seu app, cada um com diferentes públicos e capacidades:

| Estágio             | Quem pode acessar      | Como acessar                                                | Ideal para                                        |
| ------------------- | ---------------------- | ----------------------------------------------------------- | ------------------------------------------------- |
| **Desenvolvimento** | Você                   | Simulador no Editor de Projeto, ou código QR para o Expo Go | Criar e iterar                                    |
| **Deploy**          | Testadores com Expo Go | URL pública com código QR                                   | Previews de desenvolvimento, prototipagem e demos |
| **App Store**       | Qualquer pessoa        | Download na App Store após Revisão da App                   | Lançamento em produção                            |

**Desenvolvimento**: Quando você inicia seu app, pode visualizá-lo no **Simulador iOS** ou **Emulador Android** do Editor de Projeto, ou escanear um código QR do painel Preview para abri-lo no Expo Go no seu telefone.

**Deploy**: Quando você clica em **Publicar**, o Replit cria uma URL pública com um código QR para o Expo Go. Isso é ideal para previews de desenvolvimento e prototipagem — mostre para investidores, colete feedback ou teste com amigos antes de se comprometer com o processo da App Store.

**App Store**: Quando você envia para a App Store, a Apple revisa seu app. Após a aprovação, as pessoas podem baixar e instalar na App Store. Isso requer uma conta de Apple Developer.

## Visão geral de publicação

Quando você prepara um lançamento para iOS, o fluxo geralmente é:

* Publicar pelo Editor de Projeto
* Enviar um build para o TestFlight
* Promover um build do TestFlight para a App Store no App Store Connect

<Note>
  Para enviar builds ao TestFlight e à App Store, a Apple exige uma associação ao Apple Developer Program.
</Note>

Para um passo a passo completo, veja o tutorial [Criar e lançar um app mobile](/tutorials/build-and-launch-a-mobile-app).

## Onde criar apps mobile nativos

Seu ambiente Replit roda na nuvem, não na sua máquina local. Para criar um app mobile nativo, use o Editor de Projeto em [replit.com](https://replit.com). O fluxo de trabalho de app mobile — scaffolding do Agent, previews com Expo Go, testes em simulador e emulador, builds do TestFlight e envio à App Store — roda no Editor de Projeto.

O trabalho com apps mobile nativos também está disponível no [app Android do Replit](/references/platforms/mobile-app) onde suportado. Se você estiver usando o app iOS do Replit, abra o projeto em [replit.com](https://replit.com) para criar, visualizar, construir ou enviar apps mobile nativos.

## Como a tecnologia funciona

Seu app mobile é construído com uma pilha de tecnologias que trabalham juntas. Esta seção explica o que alimenta seu app e como as peças se encaixam.

### A pilha de tecnologias

<MobileStackDiagram />

* **React Native** é um framework open-source que permite escrever uma única base de código e compilá-la para iOS, Android e web. Ele renderiza componentes de UI nativos da plataforma, não uma webview.
* **Expo** simplifica o desenvolvimento com React Native ao cuidar de builds, gerenciar módulos nativos e fornecer ferramentas como o Expo Go para previews.
* **Expo Go** é um app gratuito que você instala no seu telefone. Ele executa o preview de desenvolvimento para que você possa testar em um dispositivo real sem criar um binário nativo completo.

Quando você executa seu app, o Metro bundler compila seu código e o envia para seu dispositivo. O primeiro build demora mais porque não há cache. Os builds subsequentes são mais rápidos.

### Arquitetura: servidor e cliente

Quando você prepara um app mobile para preview ou distribuição, está trabalhando com duas coisas:

1. **Um servidor** que roda no Replit na nuvem. Este cuida do seu banco de dados, rotas de API, integrações de IA e lógica de backend.
2. **Um app cliente** que roda no telefone de uma pessoa. Este é o app nativo visualizado no Expo Go durante o desenvolvimento ou distribuído pelas lojas de apps após revisão.

<MobileArchitectureDiagram />

Essa separação oferece flexibilidade. Você pode executar lógica complexa no servidor (onde você tem acesso ao Banco de Dados do Replit, Armazenamento de Objetos e Conectores) e manter o cliente leve. Ao criar, pense no que deve acontecer no telefone versus o que deve acontecer na nuvem.

## Considerações

* **Requisitos de publicação**: A Apple define os requisitos para o TestFlight e a App Store, e a Apple revisa os apps iOS antes da distribuição.
* **Publicação no Android**: Você pode criar apps multiplataforma para iOS e Android. A publicação no Google Play ainda não é suportada por meio de uma experiência guiada, mas pode ser realizada manualmente.
* **Mudanças nativas**: Mudanças como ícones de app ou permissões geralmente requerem um novo build da loja.

## Solução de problemas

Se você encontrar problemas ao desenvolver seu app mobile, veja [Solução de problemas de apps mobile](/references/troubleshooting/mobile-app) para problemas comuns e soluções.

## Próximos passos

* Saiba como o Agent funciona: [Agent](/references/agent/overview)
* Explore integrações: [Integrações](/references/integrations/overview)
* Use o Replit no mobile: [App Mobile do Replit](/references/platforms/mobile-app)
* Leia mais sobre o Expo: [Expo](https://expo.dev/)
* Gerencie o TestFlight e envios: [App Store Connect](https://appstoreconnect.apple.com/)

## Perguntas frequentes

<AccordionGroup>
  <Accordion title="O que é o Expo?">
    O Expo é o que o Agent usa para criar seu app mobile no Replit. É uma plataforma e toolchain open-source para criar, executar e implantar apps nativos multiplataforma com React Native. Saiba mais em [https://expo.dev](https://expo.dev).
  </Accordion>

  <Accordion title="O que é o React Native?">
    React Native é um framework open-source da Meta para criar apps iOS e Android nativos usando React e JavaScript ou TypeScript. Ele renderiza componentes de UI nativos da plataforma (não uma webview), então seu app parece e funciona de forma nativa.
  </Accordion>

  <Accordion title="O que é o Expo Go?">
    O Expo Go é um app gratuito que você instala no seu telefone pela App Store ou Google Play. Ele permite visualizar seu app mobile durante o desenvolvimento sem criar um binário nativo completo. Quando você escaneia o código QR no Editor de Projeto, o Expo Go baixa e executa o código do seu app.
  </Accordion>

  <Accordion title="Qual é a diferença entre o Expo Go e um dev build?">
    **Expo Go** é um app pré-criado que executa seu código. É rápido de configurar, mas só suporta módulos incluídos no SDK do Expo.

    **Dev builds** são binários nativos personalizados que podem incluir qualquer módulo nativo. Requerem mais configuração (EAS Build ou Xcode/Android Studio local), mas oferecem mais flexibilidade.

    O Replit usa o Expo Go para previews de desenvolvimento. Se você precisar de módulos nativos não suportados no Expo Go, pode ser necessário explorar dev builds pela [documentação do Expo](https://docs.expo.dev/develop/development-builds/introduction/).
  </Accordion>

  <Accordion title="Como isso é diferente de um web app responsivo para mobile?">
    Um web app responsivo para mobile é um site que adapta seu layout no navegador. Um app React Native é uma aplicação nativa instalada no dispositivo que usa APIs da plataforma (câmera, haptics, notificações push), oferece melhor acesso ao hardware e capacidades offline, e é distribuído pelas lojas de apps. Web responsivo pode ser ótimo para alcance e zero instalação; nativo é melhor quando você precisa de funcionalidades do dispositivo, desempenho ou distribuição na App Store.
  </Accordion>

  <Accordion title="Preciso de um Mac ou Xcode?">
    Não. O Replit e o Expo gerenciam o processo de build para você na nuvem.
  </Accordion>

  <Accordion title="Posso visualizar sem uma conta de Apple Developer?">
    Sim. Você pode visualizar no Simulador iOS do Editor de Projeto ou com o Expo Go no seu telefone. Você só precisa de uma conta de Apple Developer quando estiver pronto para enviar ao TestFlight ou à App Store.
  </Accordion>

  <Accordion title="O Android é suportado?">
    Sim. Você pode criar apps multiplataforma para iOS e Android a partir da mesma base de código. Visualize em um Emulador Android no Editor de Projeto ou em um dispositivo Android com o Expo Go. A publicação no Google Play pode ser feita manualmente.
  </Accordion>

  <Accordion title="E quanto a servidores e bancos de dados?">
    Use o PostgreSQL integrado do Replit, Armazenamento de Objetos, Conectores e integrações de IA — sem infraestrutura separada necessária. Seu servidor roda no Replit e seu app mobile se conecta a ele.
  </Accordion>

  <Accordion title="Devo testar no simulador do Editor de Projeto ou em um telefone real?">
    Use ambos em momentos diferentes. O **Simulador iOS** e o **Emulador Android** no Editor de Projeto mostram a versão nativa do seu app e cobrem a maioria dos testes do dia a dia — layout, navegação, componentes nativos e estilo de plataforma. Mude para um telefone real com o **Expo Go** quando precisar testar funcionalidades que dependem de hardware real, como câmera, haptics, notificações push ou localização GPS.
  </Accordion>
</AccordionGroup>