Quick Start

Use this template and follow the instructions to build the app: Expo First App Tutorial

Note: Do not use the .tsx style file; it's too complicated and unnecessary for this project. Your folder structure should look like the screenshot below:

Create the Project

# Create a project named StickerSmash
npx create-expo-app StickerSmash --template blank

# Navigate to the project directory
cd StickerSmash

Prebuild the Project

npx expo prebuild

Run on a Local Device Without a Server

1. Open the ios/StickerSmash.xcworkspace file in Xcode.

2. Click on the Project as shown below:

   

3. Click Product -> Scheme -> Edit Scheme:

   

4. Under Run, select Release instead of Debug:

   

5. Solve problem for calling external url link or domain address: Under , select Info, select App Transport Security Settings, make Allow Arbitrary Loads as Yes, Add Exception Domains as shown below.

   

Install the Expo App

npm install expo

Starting the App

Start the app within the Expo app:

npx expo start

Installation and Uninstallation

Remove the Global Expo CLI if Installed

npm uninstall -g expo-cli

Install the Latest Version of Expo CLI Package

npm install expo-cli --global

Use the Local Expo CLI Bundled with Your Project

Since you already have Node.js 20 installed, you can use npx to run the local Expo CLI:

npx expo start

Clean npm Cache and Reinstall Node Modules

npm cache clean --force
rm -rf node_modules
npm install

Start Your Project with the Local Expo CLI

npx expo start

Pushing Files to Branches

Push zdong to main

git push origin zdong:main

Push zdong to backup

git push origin zdong:backup

Building the App with Server on Mac

For detailed instructions, refer to the Expo Prebuild Documentation.

1. Install the iOS and Android folders:

   npx expo prebuild

2. Build the Native iOS Project:

   npx expo run:ios

3. Build on Device (Note: Do not build simultaneously on Simulator and Device):

   npx expo run:ios --device

   Ensure you are in the main directory /visportapp to avoid missing package.json errors.

   If you encounter a sandbox error during the build, refer to this StackOverflow post and set User Script Sandboxing to No under All options.

Watchman Issue Resolution

1. Uninstall Watchman:

   brew uninstall watchman

2. Replace Watchman Formula:

   brew install watchman

3. Pin the Watchman Version (remember to unpin once the problem is solved):

   brew pin watchman

4. Restart Server and Give Full Disk Access to Watchman in Settings - Privacy (MacOS 14.5):

   watchman shutdown-server

Changing the Simulator Device

1. Start the Expo app:

   npx expo start

2. Press shift + i.

3. Select the device you want to work with.

常见问题

Problem: Error Cannot find module '@react-native/metro-config'

Solution:

npm install @react-native/metro-config --save

Problem: Error No Metro config found in /Users/zihan/Desktop/TradeApp.

Solution: Add a file named metro.config.js in the main folder containing:

const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');
const config = {};
module.exports = mergeConfig(getDefaultConfig(__dirname), config);

Problem: Folder has no main.jsbundle file

Solution:

react-native bundle --platform ios --dev false --entry-file /Users/zihan/Desktop/TradeApp/app/tabs/Home.js --bundle-output ios/main.jsbundle --assets-dest ios