Como construir uma app React Native com o VULK

Atualizado a 18 de julho de 2026 — refrescado com dados verificados da plataforma e o estado honesto atual da pré-visualização para React Native.

Como se constrói uma app React Native com o VULK?

A resposta completa: descreves a app num prompt e o VULK gera um projeto React Native + Expo completo — navegação baseada em ficheiros com Expo Router, estilos com NativeWind (Tailwind para React Native), TypeScript em todo o lado, e app.json configurado com identificadores de bundle e permissões. Depois descarregas o projeto, corres npx expo start e testas no teu próprio telemóvel com o Expo Go em minutos; os builds de produção seguem via EAS Build (eas build) para a App Store e o Google Play.

Uma coisa dita já, porque a honestidade vence o marketing: o VULK não renderiza atualmente apps React Native na pré-visualização ao vivo do editor. O React Native é empacotado pelo Metro e não pode correr na pré-visualização baseada em browser que serve os stacks web do VULK — uma pré-visualização RN no editor está em desenvolvimento, não disponível. O que obténs hoje é código gerado completo e real mais o workflow Expo standard para o correr num dispositivo. A procura é real mas menor do que a do Flutter: 213 prompts de utilizadores de sempre pediram React Native/Expo contra 381 do Flutter (dados da plataforma VULK, julho de 2026, N = 11.355 projetos) — também por isso o Flutter recebeu primeiro o seu serviço de build integrado.

O que gera exatamente o VULK?

Isto não é uma web app embrulhada num WebView. O VULK gera componentes nativos reais — View, Text, ScrollView, FlatList, TouchableOpacity — que compilam para widgets nativos da plataforma em iOS e Android.

A árvore de ficheiros gerada é assim:

app/
  _layout.tsx          # Root layout with navigation container
  index.tsx            # Home screen
  (tabs)/
    _layout.tsx        # Tab navigator layout
    home.tsx           # Home tab
    profile.tsx        # Profile tab
    settings.tsx       # Settings tab
  [id].tsx             # Dynamic route
components/
  Button.tsx
  Card.tsx
  Header.tsx
assets/
  fonts/
  images/
tailwind.config.js
app.json
package.json

Como escrever prompts que produzem boas apps mobile?

O prompt é onde a qualidade da tua app gerada se decide. Aqui estão prompts reais que produzem resultados sólidos.

Prompt básico (funciona, mas genérico):

Constrói uma app de fitness tracking em React Native

Prompt melhor (funcionalidades específicas):

Constrói uma app React Native de fitness tracking com navegação por tabs do Expo Router. Inclui um ecrã de registo de treinos onde os utilizadores adicionam exercícios com séries, repetições e peso. Adiciona um ecrã de progresso com gráficos do volume semanal. Usa NativeWind com tema escuro. Inclui um componente de temporizador para os descansos entre séries.

Prompt avançado (qualidade de produção):

Constrói um fitness tracker React Native + Expo com estes ecrãs: (1) Dashboard com o plano de treino de hoje e estatísticas semanais, (2) Biblioteca de exercícios com pesquisa e filtros por grupo muscular, (3) Ecrã de treino ativo com temporizador em curso, registo de séries e temporizador de descanso, (4) Tab de progresso com gráficos de linhas do peso levantado por grupo muscular em 30 dias, (5) Perfil com definições de unidades (kg/lbs) e defaults do temporizador. Usa tabs do Expo Router para a navegação principal e navegação stack dentro de cada tab. Estiliza com NativeWind em tema escuro (fundo zinc-900, acentos emerald-500). Guarda dados localmente com AsyncStorage. Usa expo-haptics para feedback dos botões.

A diferença entre estes prompts é a especificidade. Os modelos de IA do VULK rendem melhor quando descreves ecrãs, estruturas de dados e padrões de interação explicitamente — o prompt mediano no VULK tem só 364 caracteres, mas as melhores gerações mobile vêm de prompts como o avançado acima (dados da plataforma VULK, julho de 2026).

Como funciona o NativeWind no código gerado?

O NativeWind permite ao VULK usar classes Tailwind CSS em React Native. O código gerado usa a prop className em vez de StyleSheet.create:

// What VULK generates with NativeWind
export default function WorkoutCard({ exercise, sets }: WorkoutCardProps) {
  return (
    <View className="bg-zinc-800 rounded-2xl p-4 mb-3">
      <Text className="text-white text-lg font-semibold">
        {exercise.name}
      </Text>
      <Text className="text-zinc-400 text-sm mt-1">
        {sets} sets completed
      </Text>
    </View>
  );
}

Isto é código React Native real que compila para objetos StyleSheet nativos em tempo de build. Não há penalização de performance em runtime. Se precisares de estilos que o NativeWind não cobre, podes sempre recorrer a props style — o VULK gera-as quando é preciso estilo específico de plataforma.

Como funciona a navegação com o Expo Router?

O VULK gera routing baseado em ficheiros com o Expo Router. Isto espelha o modelo mental do Next.js: ficheiros na diretoria app/ tornam-se rotas.

Padrões chave que o VULK usa:

• Navegação por tabs: Um ficheiro (tabs)/_layout.tsx com o componente Tabs de expo-router/tabs
• Navegação stack: Ficheiros _layout.tsx aninhados com o componente Stack para navegação push/pop dentro de um tab
• Rotas dinâmicas: Ficheiros chamados [id].tsx ou [slug].tsx que aceitam parâmetros de rota
• Rotas modais: Ficheiros num grupo (modal)/ que aparecem como overlays modais

O layout raiz inclui tipicamente providers para fontes, temas e estado global:

export default function RootLayout() {
  return (
    <ThemeProvider>
      <Stack screenOptions={{ headerShown: false }}>
        <Stack.Screen name="(tabs)" />
        <Stack.Screen name="(modal)" options={{ presentation: 'modal' }} />
      </Stack>
    </ThemeProvider>
  );
}

Como testas a app no teu telemóvel?

Como ainda não há pré-visualização RN no editor, os testes acontecem no teu próprio dispositivo — e o workflow Expo torna isso rápido:

1. Descarrega o código do editor do VULK (a exportação ZIP do código está incluída a partir do plano Builder)
2. Extrai e instala as dependências: cd your-app && npm install
3. Arranca o servidor de desenvolvimento: npx expo start
4. Faz scan do código QR com o Expo Go no teu telemóvel (app Câmara no iOS ou app Expo Go no Android)

A app carrega no teu dispositivo em segundos, e as alterações locais refletem-se instantaneamente via hot reload.

Para funcionalidades que exigem módulos nativos fora do Expo Go (como Bluetooth ou NFC), cria um development build com npx expo run:ios ou npx expo run:android. O app.json gerado pelo VULK inclui as configurações de plugins para módulos nativos comuns.

Como iteras depois da primeira geração?

O fluxo de conversa do VULK está desenhado para desenvolvimento mobile iterativo. Depois da geração inicial, refinas com mensagens de follow-up:

• "Adiciona pull-to-refresh no ecrã da lista de treinos"
• "Substitui a lista plana por uma lista seccionada agrupada por grupo muscular"
• "Adiciona um bottom sheet para o seletor de exercícios em vez de navegar para outro ecrã"
• "Faz o temporizador de descanso mostrar um indicador de progresso circular"

Cada iteração preserva o teu código existente e aplica alterações dirigidas. O VULK acompanha a árvore de ficheiros completa e modifica apenas os ficheiros que precisam de atualização. A conversa de build mediana na plataforma tem 4 mensagens — um tiro mais uns ajustes (dados da plataforma VULK, julho de 2026).

Como envias para a App Store e o Google Play?

Os builds de produção passam pelo EAS Build, o serviço de builds gerido da Expo:

• Android: eas build --platform android produz um APK (instalação direta) ou AAB (submissão ao Google Play). Sem Android Studio local.
• iOS: eas build --platform ios produz um IPA para TestFlight e submissão à App Store. Precisas de uma conta Apple Developer ($99/ano).

O app.json gerado pelo VULK traz os identificadores de bundle, campos de versão e declarações de permissões que o EAS espera — o projeto fica build-ready sem cirurgia de configuração. (Se quiseres um serviço de build APK integrado hoje, ele existe para a via Flutter do VULK — mais uma razão pela qual muitos builders mobile escolhem Flutter no VULK.)

A que deves estar atento?

Profundidade de navegação: Se a tua app tem mais de três níveis de navegação aninhada, descreve a hierarquia explicitamente no prompt. Senão a IA pode achatar rotas que deviam estar empilhadas.

Gestão de imagens: O VULK gera uso de expo-image para carregamento otimizado. Se a app é pesada em imagens (galeria, feed social), menciona-o para a IA incluir caching e placeholders adequados.

Suporte offline: Se a app precisa de funcionar offline, di-lo no prompt. O VULK gera persistência com AsyncStorage e deteção do estado da rede, mas só quando pedido.