React Native + Expo Go Week 6

Ok I’m just not doing the Coursera course anymore, I’ll see if Youtube has some good tutorials. Basically, I’m restarting.

July 17th, 2025

I started watching Programming With Mosh’s “React Native Tutorial for Beginners” React Native video, which also uses React Native + Expo Go, and I recreated the template for my project following his instructions.

July 18th, 2025

In his video, though, he creates a online selling app (e.g., Ebay), so I’ll have to deviate from the tutorial later. Then, when he typed this line to show the example app that came with the project template…

npm start

…I got an error, while the tutorial successfully pulled up Metro Bundler on the browser.

Luckily, the error was because I wasn’t in the project file (silly me!), for I was just in the file that git was tracking (I’m tracking my project through git, like a good developer).

Also, a bit of backstory: even though I don’t care too much about how it looks on Android devices, I’m also doing this project as a part of Hack Club’s “You Ship We Ship” program called “Gemini” (aptly named, I know), where the challenge is to make a functional app within 1 month that can work on Android devices.

When I opened Android Studio and navigated to the SDK Manager (to access its location), I saw that most of the Android’s versions are also named after desserts, how funny!

For example, Android 16 is nicknamed “Baklava”.

To fully be able to use Android Studio’s capabilities, I also used Expo’s article on how to set up Android Studio for my machine (I’m using Windows 11, by the way).

Then, using Android Studio’s Virtual Device Manager, I managed to open a simulator of a Google Pixel 9a! This emulator also shows changes that I make through either me manually reloading the Android emulator via Ctrl + M or by the emulator just updating automatically (this is a cool feature that React Native has called “fast refresh”).

Today I also learned that I can debug in three ways, two of which I will use in this project.

1. console.log() statements, logging (using): They’re what they sound like. You print a string via JavaScript’s console.log function, and it will come up in a nice way in the terminal like this (if you’re using VS Code, that is):

2. VS Code (using): In VS Code, there is a “debug” tab in which you can run in conjunction with a JSON file that details instructions for the debugger. By “debugging” in this case means that you can see the variable types and values, what line the code will be running through in order, skip lines/commands, and mark lines, “breakpoints”, that the program will “pause” at, to check on how the functions and variables are so far. I would post a picture showing its capabilities, but VS Code wasn’t being cooperative today :(

3. Chrome Web Tools: Ok, so surprisingly this is a thing. Chrome Dev Tools has basically the same mechanisms as VS Code in terms of debugging and other cool things such as watching variables and breakpoints. I guess it’s because React itself can also be used to create web applications? Anyhow, when encountering a bug while testing on a real device or on an emulator, a red error message will pop up in that testing area, so then after minimizing the error messages, you can then use the developer settings (Ctrl + M) and click on “Debug Remote JS”, which will pop up a Chrome window, but it only shows the Chrome Web Tools. There, you can debug your code using the console and sources.

July 20th, 2025

The debugging system still doesn’t work, and I think it may be because the folder that I was trying to develop from has some “remnants” from the last failed attempt I had at making an app. The debugging uses a JSON file which I made sure to place within the project’s folder, but I guess the computer viewed it as wrong also…

So, I tried starting over, again:

npm install -g expo-cli

I also got a lot of depreciation warnings when using this command to redownload Expo’s CLI, and the global installation of expo-cli isn’t recommended by Expo anymore. I later found out the correct, current, and more updated version (as of July 2025) is:

npm install expo

Woah. So this code that it gave me is much more than before (idk if I can keep following the tutorial…) but I luckily found this bit of advice in one of the READMEs:

So I tried just that…it didn’t help much to be honest. App.js, which was a file so common in older tutorials, is gone now! Now, I have to use .tsx files found in the /app folder.

Special Thanks:

Thank you to Mosh for the video tutorial! Even though it’s outdated now, it helped give me the confidence to start this app project up again <3

Especially thank you to Hack Club: the Gemini YSWS program sure helped me motivate myself to get back into app development.

Notice:

I’ll be gone on a church retreat net week, so I’ll be back grinding the week after (one week before my school year starts again 😭), later!