React Native Expo

Managed vs Bare Workflow

Managed workflow you don’t touch the android and ios folders.

  • Changes to the native code are handled by expo.
  • expo prebuild and it will generate you your fresh android and iOS folders.
  • when installing libraries they need some extra steps to be done inside the android and iOS folders. These can be done with expo config plugins.

Use Bare workflow if there’s something you can’t or don’t want to do with config plugins.

Creating a new project

You can NOT use pnpm with React Native Expo because Expo has "implicit" dependencies which goes in contrast with symlink of pnpm.

# create app
npx create-expo-app@latest

# upgrade expo
npx expo install expo@latest

# upgrade packages
npx expo install --check
npx expo install --fix

## find and update
npx npm-check-updates -u && npm i

Development Commands

# clear metro cache and restart
npm start -- --reset-cache

# Restart Expo Go after clearing cache
# delete node_modules folder, then npm install
npx expo start --clear # restart the development server and clear the JavaScript transformation caches

# make sure to toggle to Expo GO
# Press s │ switch to Expo Go # NOT THIS
# › Using Expo Go # YES
# › Press s │ switch to development build # YES

# running apps
npm run android
npm run ios
npm run web

# launch simulator
i # ios
a # android

# switch ios simulator device to different device
shift + i

# Developer Menu
cmd + d # ios
cmd + m # android

# Toggle Light/Dark Mode
# ios
cmd + shift + a

Caveats

Environments

Always test on ACTUAL DEVICES when it involves mobile.

Expo GO QR = actual device environment

Simulator = take device environment. Will use cache in computer-like setting. Relying on simulators WILL CAUSE BUGS after build (not during dev).

Refresh for changes manually iOS

Use cmd + alt + esc, then force quit simulator.

  • Expo will NOT auto-hot-reload your application after you make a change to it.
  • You need to retrigger the simulator to see the changes.

Refresh App in android

Uninstall your app from the home screen if you have one (not the Expo Go).

  • Shutdown the app and Expo Go in Android.
  • Shutdown Expo. Restart with cache refresh.

Shutdown Expo Orbit.

Restart the Expo Go in CLI.

Attempt to reload using r.

  • If you get error: No apps connected. Sending "reload" to all React Native apps failed. Make sure your app is running in the simulator or on a phone connected via USB..

In Expo Go, under Enter URL manually, paste the local Expo Go address:

exp://192.168.1.232:8081

This should launch the application after a forced rebuild.

Create dev escape hatches along the way

When you have conditional render, always build a dev-mode toggle to allow testing in simulator.

  • e.g. OAuth deeplink will NOT work properly in simulator.