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

Do you want to practice mobile test automation development but need a React Mobile app to test against? I have one for you: DetoxDemo, an open-source app with a Login screen, built with ReactNative + TypeScript + Mobile automation written in Detox. The automated tests I coded myself, but the app is all GitHub CoPilot. Building it was quite the adventure!

Ten years ago, back when I was a newbie automation developer, I discovered a test site created by Dave Haefner: The-Internet, a website where newbie automation developers could practice their craft. Dave Haefner, the author of the Elemental Selenium newsletter and the Selenium Guidebook, two resources that really helped me out early in my career, created the site to help the software testing community.

To practice what I was learning on-the-job at my first automation development position putting together Selenium WebDriver + Java automation framework, I created, testing against that site, a toy project, Testing The-Internet and started blogging about it. I gave imaginary readers code walkthroughs how one could write a framework to test The-Internet’s Login Page. The act of being forced to explain what I am doing in various programming projects and why to imaginary readers has helped me in many parts of my career, whether it is playing around with REST Assured, setting up an Appium framework, or creating an automation framework with Ruby + Capybara.

Ten years later, to practice what I am learning at SELF ID, Inc. putting together an automation framework for their React Native mobile application using Wix’s Detox + TypeScript, I wanted to put together another toy project. Call it DetoxDemo. The problem was that, although I knew what the automation part would look like, I didn’t know of a React Native mobile application to test against. Wishing there was a React Native app like Dave Haefner’s The-Internet, I had a crazy idea:

Why not try to vibe-code a React Native mobile app, creating one with GitHub CoPilot, that emulates his The-Internet Login page?

Sure, there were some minor hurdles, the first being that I don’t know how to “vibe-code”. I’ve been using GitHub CoPilot for a year at two different workplaces, but nothing to this extent.

The second hurdle is that I am not a software developer. With React Native applications, I have been a manual and an automated tester. I just don’t know React Native development.

Creating an entire app using a toolset I am unfamiliar with in a language I don’t understand? What could go wrong?

What is React Native, anyway?

React Native was created by Facebook in 2015 to help fix what they thought of as an over-reliance of HTML5 for their mobile applications.

According to ReactNative.dev / Core Components and Native Components, “React Native is an open source framework for building Android and iOS applications using React and the app platform’s native capabilities. With React Native, you use JavaScript to access your platform’s APIs as well as to describe the appearance and behavior of your UI using React components: bundles of reusable, nestable code”.

One toolset can create both iOS and Android mobile apps, but for DetoxDemo, I wanted to focus just on creating an iPhone application.

Setting Up The React Native Environment

Before I started anything, the first thing I had to do was set up my environment on my MacBook, according to the directions on the ReactNative.dev site. ReactNative allows one project to create both iOS and Android mobile applications, but since I didn’t want to bite off more than I could chew, I would focus on developing an app for the iPhone 16 Pro:

ReactNative.dev: Set Up Your Environment:

• Development OS: MacOS + Target OS: iOS
• Install Node.js, the free JavaScript runtime environment to handle the backend and get access to npm, the node package manager.
• The Metro bundler will also be installed when using the React Native command line interface (CLI).
• Install Watchman, also created by Facebook, which watches files, recording when they change.
• Install XCode, Apple’s integrated development environment (IDE), which includes much needed debugging tools and iPhone simulators.
• Set up a simulator in XCode, such as the simulator for the iPhone 16 Pro.
• Install XCode’s Command Line Tools to build and compile the app with xcodebuild, and manage the simulators,

As for initializing the React Native application, I was going to see what GitHub CoPilot could come up with.

Composing the First Prompt

After creating an empty folder called “detox-demo”, I entered a prompt in GitHub CoPilot chat describing the app I wanted to create:

"Create a React Native application for the iPhone that will be used to illustrate how to set up a Detox automation framework. The iOS app will be based on https://the-internet.herokuapp.com/login.

"LoginPage:

• "Heading: 'Login Page'.
• "Text: 'This is where you can log into the secure area. Enter tomsmith for the username and SuperSecretPassword! for the password. If the information is wrong you should see error message.'
• "Username textbox.
• "Password textbox.
• "Login Button.
• "Incorrect login will produce a message in a red banner with white bolded text on the top of the screen: 'Your username is invalid!'.
• "Successful login goes to the SecureArea.

“Secure Area:

• "Heading: 'Secure Area'.
• "Body text: 'Welcome to the Secure Area. When you are done click logout below.'
• "Successful login shows a green banner on top of screen with white bold text: 'You logged into a secure area!'.

Chaos Ensues

After I submitted the GitHub CoPilot prompt, everything seemed okay, since it came back with a prompt:

I'll help you create a React Native application for iOS. Let me break this down into steps
  1. First, I'll explore the workspace structure
  2. Create a React Native project
  3. Set up the Login and Secure Area screens

Let's start! [...] Since there is no specific template, I'll create the React Native project from scratch. Let me start by creating the basic project structure.

In the chat logs, I caught a glimpse that it started initializing a new React Native project:

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

Then things started going haywire.

1. It took three attempts to initialize a React Native project, first using what it kept claiming to be outdated methods.
2. Instead of using the root directory, it created a sub-directory, placed the project code there, realized it had done that, then moved most of the project files back to root, forgetting to update much of the configurations.
3. Since I mentioned the phrase “Detox” in my prompt, it then started work trying to initialize a Detox framework before building out the React Native application, and I wasn’t able to figure out how to correct its mistake.

While attempting to create a Detox test framework, something must have interrupted the process when it used an outdated initialization command. It seemed surprised when it stumbled upon the Detox files it had already tried setting up, and had to study its own project it had attempted to put together.

Only after many failed attempts, checks, rechecks, redos, did it finally realize that it never created the React Native application I had asked it to create.

 

Copilot has been working on this problem for a while. It can continue to iterate, or you can send a new message to refine your prompt.

Second Time Is The Charm?

Seeing that there were problems, I then re-entered the prompt, trying again.

Again, it had the same problems, investigating the project code it had written, re-creating the project in a new subdirectory, realizing it already had completed the work, then erasing the sub-directory.

After that, it started printing a lot of text to the screen faster that I could read. According to the JSON file of the session, it was actually talking to itself:

 

The user has opened the workspace folder /Users/tj/src/detox-demo

Create a new project in this workspace folder.

To create a new project for the user, follow the steps below to create files, set up necessary extensions, and configure the project environment in Visual Studio Code.

Overview - 
- Call the tool get_project_setup_info to get a VS Code workspace-supported project template based on the user's request. 
- Run a command-line tool to scaffold the project files from a template.
- Create and update a copilot-instructions.md file in the project root under the .github directory.
- Customize the project files based on the user's requirements, if specified.

Ah, no… I am not doing that. I would not know how to do any of that even if I tried. So, I just let GitHub CoPilot keep running.

Again it tried creating a React Native application.

Again it claimed it was using an outdated way to set up an application, reading the warnings that were being thrown as it was attempting to create the project.

It decided it wanted to use a React Native project template that could not be found.

On its second attempt, it downloaded, copied and processed a template, installing dependencies, updating my system to React Native 0.83.0.

When it realized that I needed to install Cocoapods, it asked for permission.

After that, it got caught in a loop where there was an error with npm that it had problems sorting out.

 

Third Time Is The Charm?

Finally, it somehow fixed all of its errors, and progress was made. It got to the point I was looking for:

 

Great! Now let me create the React Native screens. First, let me look at the current App.tsx: ,

Now I'll replace the detox-demo with our login application. Let me also install react-navigation for navigation between screens:

Now let me create the screens directory and LoginScreen component

GitHub CoPilot then created:

• detox-demo/src/screens/LoginScreen.tsx
• detox-demo/src/screens/SecureAreaScreen.tsx

It added what it thought was appropriate testIDs to various screens, locators that test automation could use to find various React Native elements.

Once it created a skeleton of the page, it started adding some meat on the bones.

 

Now let me create the SecureAreaScreen

Now let me update the App.tsx to use our new screens

I need to update the LoginScreen to handle the logout message. Let me fix that:

Let me add the logout message banner to the LoginScreen:
Now let me create a simple test to verify everything is working:
Let me fix the imports:
Now let me create the .github directory and copilot instructions

It created the app incrementally, adding piece by piece. After each piece was added, errors were thrown, then it had to fix those errors.

• It kept losing track of the React-Navigation module. It kept forgetting where the module “detox” was.
• It would define a new method, forget to use it, then delete it.
• And it would edit the same few files again, and again, writing and rewriting so many times it was hard for me to keep track of what it was doing.

Every few steps, it would run a linter, to see if anything went wrong, then fix it. All the while it acted as if it had amnesia from one step to the other, examining the directory, surprised that there was code already there.

 

Perfect! Now let me make sure we can run the iOS app. First, let me install pods:

I see there's a conflict with using the wrong iOS directory. Let me update the Detox configuration to use the correct paths: 

Let me check the actual project structure

Now let me run a quick test to see if our app builds and runs:

- I see that this is a complex project with existing scripts. Let me look at the correct package.json again to understand what scripts we actually have:

Good! We do have the ios script. The issue seems to be that it's running in a different project context. Let me run it with the correct working directory: ",

              "toolCalls": [

There seems to be an issue with the package.json file. Let me check if it was corrupted or has any issues: ",

              "toolCalls": [

GitHub CoPilot kept continuing this way for quite some time until finally, it was finally finished. Finally.

Success! We Have An App!

After what felt like hours, and after many failed attempts, GitHub CoPilot was finally finished.

GitHub CoPilot set up in the DetoxDemo project in the package.json file some commands to build the Detox version of the app. I instructed GitHub CoPilot to use YARN instead of NPM as a Builder, like we use at SELF ID.

• To Build the Detox version of the app: yarn detox:build:ios

I gave the command to build the app, launching an emulator, with the DetoxDemo icon ready to be clicked.

Adding the Automation

I added automated tests for the React Mobile site in a folder I called “e2e” to store the end-to-end tests, written in Detox + TypeScript.

To test the Login Flow, I fashioned the tests much like my first Selenium WebDriver + Java automation project, Testing The-Internet, written ten years before:

• Login Page: Verify the expected Heading and Instruction text appear.
• Login Page: Verify that invalid credentials displays the error message in a red banner at the top of the screen.
• Secure Area: Successful login displays a success message in a green banner at the top of the screen.
• Documenting the Project Structure

I then directed GitHub CoPilot to create a README file showing the structure the code:

• App source code in a “src” folder, with another folder marked “screens”.
• Automated tests, written in Detox, in an “e2e” folder, with page objects in a folder “pages”.

GitHub CoPilot then documented things like so in the DetoxDemo README file:

 

src/
├── screens/
│   ├── LoginScreen.tsx       # Main login interface
│   └── SecureAreaScreen.tsx  # Secure area after login

e2e/
├── pages/
│   ├── base-page.ts          # Base page object with common methods
│   ├── login-page.ts         # Login screen page object  
│   └── secure-area-page.ts   # Secure area page object
├── constants.ts              # Time constants (2s, 3s, 5s, etc.)
├── credentials.ts            # Test credentials
├── init.ts                   # Detox initialization
├── jest.config.js           # Jest configuration for Detox
└── login.test.ts            # Main test suite

.detoxrc.js                  # Detox configuration

Running the Automated Tests

GitHub CoPilot set up in the DetoxDemo project in the package.json file likewise some commands to test the Detox version of the app.

• Open up a new Mac Terminal and started Metro: yarn start
• Open up a second Mac Terminal to run the automated tests: yarn detox:test:ios

When I gave the command to test the app, it launched an emulator, opened up the DetoxDemo app, and executed the tests. Once finished, Detox then printed the output:

 

Login Flow: 
  ✓ Verify Heading and Instruction Text (1550 ms)
  ✓ Invalid credentials displays error message (3958 ms)
  ✓ Successful login to Secure Area displays success message (5159 ms)
  ✓ Logout from Secure Area returns to Login Page (5779 ms)

  Test Suites: 1 passed, 1 total
  Tests:       4 passed, 4 total
  Snapshots:   0 total
  Time:        27.516 s, estimated 39 s

Huzzah! The React Native app has been constructed and all the tests have passed!

One task remained… an autopsy about what went wrong during this project.

I fed the GitHub CoPilot chat log, stored as a JSON file after my GitHub CoPilot session, back into GitHub CoPilot, asking how things went so wrong. GitHub CoPilot then summarized everything that had gone wrong…

Summary of GitHub Copilot's Mistakes

1. Wrong Project Creation Location

• Attempted to create the React Native project in the current directory using . as the target
• The CLI created a subdirectory in /Users/tj/src/DetoxDemo/ instead of using the intended workspace directory
• Had to manually copy files from the wrong location to the correct workspace

2. Incorrect React Native Initialization Commands

• First tried: npx react-native init DetoxDemo --template react-native-template-typescript . (failed)
• Then tried: npx @react-native-community/cli@latest init DetoxDemo --template react-native-template-typescript (failed)
• Finally used: npx @react-native-community/cli@latest init DetoxDemo . which created files in the wrong location

3. Created Expo Project Instead of Pure React Native

• The generated package.json showed it was an Expo-managed project
• The request was for a standard React Native application, not Expo
• This mismatch would cause issues with Detox configuration

4. Detox Installation Issues

• Attempted npm install --save-dev detox @config-plugins/detox which had dependency conflicts
• Had to fall back to npm install --save-dev detox --legacy-peer-deps
• The @config-plugins/detox package was likely not needed

5. Detox Initialization Problems

• Tried npx detox init -r jest but it failed because Detox files already existed in a parent directory
• Instead of resolving the conflict, manually created configuration files

6. Typo in Page Object Request

• Class LogingPage extends BasePage (typo: "Loging" instead of "Login")
• Copilot should have caught this obvious typo and corrected it

7. Type System Issues

• Mentioned needing to "fix the type issues in the base page"
• Suggests TypeScript types weren't properly defined initially

8. Over-Complicated Approach

• Used create_new_workspace tool unnecessarily
• Should have started with simpler file creation approach
• Multiple failed attempts before getting the basic structure right

9. "Cannot find module './package.json'" Error

• When attempting to run npm run ios, the React Native CLI failed
• This was because the node_modules were installed in the wrong location. The React Native binary expected to find files in a different structure.

10. Wrong Diagnosis and Solution

• After the module error, Copilot diagnosed it as a "dependency issue"
• This was the wrong diagnosis - the issue wasn't corrupted dependencies but rather being in the wrong directory entirely.

11. Port Conflict Error (EADDRINUSE)

• This happened because Copilot tried to start the Metro bundler multiple times without killing previous instances.

12. React Native 0.83.0 Build Failures

• The iOS build failed with C++ header redefinition errors
• Copilot used React Native 0.83.0, which appears to be a bleeding-edge version with compilation bugs. Should have used a stable version like 0.81.x or 0.82.x.

13. Detox Configuration File Errors

• Later in the session, attempts to read Detox config failed
• Copilot created .detoxrc.js but then looked for .detoxrc.json and detox.config.js - inconsistent file naming.

14. Unnecessary Reinstallations

Rather than identifying the root cause (wrong directory), Copilot repeatedly tried:

• Reinstalling node_modules
• Editing configuration files
• Re-running failed commands
• Modifying Detox config

All while ignoring the core issue of working in the wrong workspace.

Wrapping Up

As frustrating as it was acting as a passenger during GitHub CoPilot’s wild and madcap ride developing the DetoxDemo project, it all turned out well in the end.

My first ReactNative application, DetoxDemo, has been created. I successfully added automated tests to the ReactNative mobile app. And now I have something to blog about.

Starting in January 2026, I will be walking readers through the automation code I wrote on my blog, Adventures in Automation. Hope to see you there!

And feel free to use the DetoxDemo React Native app at https://github.com/tjmaher/detox-demo if you need a React Native app to test against when practicing automation development. If you like it, feel free to give me a shout out on LinkedIn at https://www.linkedin.com/in/tjmaher1/

Because I stumbled on Dave Haefner's test site The-Internet, and all the rest of Dave's contributions to the software testing community, I became a better automation developer. I would like to return the favor. Thank you, Dave! 

Happy Testing!

-T.J. Maher
Software Engineer in Test

BlueSky | YouTube | LinkedIn | Articles