React Native + Expo Go Week 2 & 3

Week 6-7 of documenting my app development learning journey (May 25 - June 7)

This Weeks’ Goal:

Finish the React Native Course by the end of this period.

Last week’s Accomplishments:

Completed preliminary research for deciding on what software to use: React Native + Expo Go!

This week is mainly going to be about the course, and my learning in React Native and me reviewing JavaScript concepts.

May 25th, 2025

Today, I experimented with a “sandbox” website for React Native’s app development, and after signing up for an account, I started to explore to get a feel for what React Native’s structure is really like.

Here’s where the sand box is: https://snack.expo.dev/

And after doing some research, I managed to figure out some of the features I could use—they were similar to how HTML and CSS work with their tag-based structure, so i figured out things like how to change the font size of text fairly easily.

I also learned more about Expo, which is an open-source platform that is used for making cross platform native apps using React Native. Using it’s Over-The-Air updates, I can update an app using React Native + Expo quickly, where I don’t have to push updates for approval in order for the app to update for it users—it happens automatically! So that’s cool :)

However, Expo comes with a lot of APIs that I may not use, not to mention that it has a limited amount of support for custom APIs, so I will have to check if all the ones that I will be planning to use in the future will or will not be supported by Expo: in that case, I will have to do some more research or use React Native CLI instead.

May 26th, 2025

Today I learned that React Native applications can be broken up into reusable piece of code called “components”, and there are three types of components: Core, Community, and “Your native” components.

Core components essentially are “native” components that come with the React Native package itself, and are therefore ready-to-use. Examples: View: Layout container, Text: Display text, Image: Display images, TextInput: User text input, ScrollView: Scrollable container, Button: Basic button.

Community components are what they sound like: they are developed by the React Native community, for the React Native community. Because of this, the original package for this is lean and containing a lot of components, so you can pick and choose which components you want to specifically use. These components also come by default, and are ready-to-use also. Examples: Bouncy Checkbox: A stylish, animated checkbox component, Bottom Sheet: A performant and flexible bottom sheet implementation (e.g., gorhom/bottom-sheet), Calendar: Customizable calendar and agenda components (e.g., wix/react-native-calendars).

Your Native Components are like “custom” components, where you can code your own components to best suit your needs.

June 3, 2025

Whew! I was busy with a lot of SAT studying lately, so I couldn’t spend as much time as I wanted to on working on learning React Native.

Today, I learned how to make my first component: an important thing to remember when making components is that their names always have to be capitalized (aka PascalCase). After I learned that, the course led me though a simple process of creating a custom component:

import * as React from 'react'; import { View, Text } from 'react-native'; export default function LittleLemonHeader() { return ( Little Lemon Restaurant ); }

The result?

The code is showing App.js, not LittleLemonHeader.js, which is where my code for the custom component is.

As shown, all components have to be imported into the App.js file (it kinda acts like a main or index file!).

June 4th, 2025

I finally discovered how to deploy an app onto my phone to test it, thanks to myresearch.

  1. Download the Expo Go on my iPhone: This was pretty self-explanatory, I just forgot to do so until now.

  2. From VSCode, Start the Expo Development Server: This command will display a QR code that I can scan my phone to use:

npx expo start
  1. Connect My Computer and my Phone on the same Wi-Fi

  2. Scan QR Code and Test the App

I have to say, this process seems really simple!

Never mind, no, it’s not.

I had to uninstall the expo version that I had, because it was supposedly too old (depreciated), and tried to install it again.

After I tried to install expo again, I got a warning message about some errors:

I later learned that these “vulnerabilities” (regarding depreciated elements and other things) could be ignored, but just to play it safe, I used the command:

npm audit fix --force

…to resolve any issues that may come up later. Even though I also learned that doing so may damage the current project and its dependencies, I still use the command to tidy things up because the app I was working with was really simple, and therefore, replaceable.

June 5th, 2025

Opening the terminal once more, I stare at the error messages. Today, my main goal was just to figure out a way to display my sample React Native app on my iPhone via the Expo Go app.

…I would share my error screenshots, but they would just completely bury all the other content on here, that’s how bad the process was. Not to mention, I still didn’t manage to figure it out :(

That’s how it was, until I noticed this line in the command terminal:

ConfigError: Cannot determine which native SDK version your project uses because the module expo is not installed. Please install it with ‘yarn add expo’ and try again.

When I asked ChatGPT about this, it told me that I didn’t need yarn, but when I did what the terminal (powershell) told me to do…it still didn’t work.

However, I got another idea: make a new “dummy” app and start it to see if my computer was being the problem.

So, no! My computer is completely fine. In other words, something about the app code itself is making Expo Go all wonky.

Resources:

Special Thanks: