GitHub Copilot vs. React Native: Lessons from a Vibe-Coded Login App

First Time Using GitHub CoPilot to Create a ReactNative LoginPage app. What Could Go Wrong?

T J Maher attempted to vibe-code a React Native mobile application for test automation practice using GitHub Copilot. Despite having a clear functional prompt, the AI required multiple iterations and manual interventions to resolve 14 specific technical errors.

Why This Matters

This case study highlights the gap between vibe-coding marketing and the technical reality of complex environment setups. While AI can generate UI components, it frequently fails at project scaffolding, directory structure management, and navigating version-specific compilation bugs. The failure to correctly diagnose root causes, such as wrong directory context, led to hours of unnecessary dependency re-installations and build failures.

Key Insights

• GitHub Copilot repeatedly failed project initialization, attempting three different npx commands before misplacing files in a subdirectory.
• The AI mistakenly scaffolded an Expo-managed project when a standard React Native application was requested, complicating Detox integration.
• Environment instability occurred when Copilot selected React Native 0.83.0, a bleeding-edge version with C++ header redefinition errors.
• Dependency management loops were triggered by Copilot’s inability to diagnose that node_modules were installed in the wrong workspace directory.
• Naming inconsistencies arose when the AI created .detoxrc.js but searched for .detoxrc.json or detox.config.js during execution.

Working Examples

The initialization command GitHub Copilot used that resulted in directory placement errors.

npx @react-native-community/cli@latest init DetoxDemo

The final project structure documented in the README after manual corrections.

src/
├── screens/
│ ├── LoginScreen.tsx
│ └── SecureAreaScreen.tsx
e2e/
├── pages/
│ ├── base-page.ts
│ ├── login-page.ts
│ └── secure-area-page.ts

Practical Applications

• Use case: Automating Detox E2E tests for React Native using custom testIDs. Pitfall: Copilot may generate typos in class names, such as LogingPage, which break TypeScript inheritance and automation scripts.
• Use case: Setting up Metro bundler for local development. Pitfall: AI may attempt to start multiple Metro instances without killing previous processes, leading to EADDRINUSE port conflicts.
• Use case: Cross-platform mobile development targeting iPhone 16 Pro. Pitfall: AI may choose unstable bleeding-edge framework versions like React Native 0.83.0 that fail to compile with standard xcodebuild tools.

References:

• https://github.com/tjmaher/detox-demo/
• https://the-internet.herokuapp.com/login