React Native Expo - atabegruslan/Notes GitHub Wiki

Tutorials

Simple start

1/ Install node

2/ Create new project

Either npx create-expo-app or npx create-react-native-app

Local Expo CLI has became preferred over the Global one: https://blog.expo.dev/the-new-expo-cli-f4250d8e3421
So npx create-expo-app xxx became preferred over expo init xxx

Eg: You can start a project like this:

npx create-expo-app@latest projectName --template blank

References

3/ Run

npx create-expo-app by default creates these scripts in package.json

"scripts": {
  "start": "expo start",
  "android": "expo start --android",
  "ios": "expo start --ios",
  "web": "expo start --web"
},

You can run using the Expo Go app from your phone, or with development build. The Expo Go option is simpler. So,
download Expo Go to your phone,
run npm run start or yarn start (A.K.A.: npx expo start)
scan the QR code from within the Expo Go app.

npx expo start vs npx expo run

start defaults to Expo Go.
If you press a or i after that, it will run in any attached simulators or devices.

run automatically runs prebuild under the hood.
It does everything in one command, eg: npx expo run:android

Though it also depends on whats in app.json and eas.json.

References

Development build

Various commands

References

Bare vs Expo

Bare means without using Expo nor Metro bundler (nor any other frameworks) to manage it for you. You create the native app and configure everything yourself.

Back in the days, Expo wasn't fully stable and had some drawbacks in terms of using native Code and modules but today most projects can be run in Expo really well.

https://docs.expo.dev/workflow/prebuild is used to adapt from Expo to bare. But not fully bare.

You can create and run an Expo app on Expo Go on your phone and emulator. But when you start working with native stuff you'll need a dev build

Local app compilation

To build your project locally you can use compile commands from Expo CLI which generates the android and ios directories: npx expo run:android npx expo run:ios The above commands compile your project, using your locally installed Android SDK or Xcode, into a debug build of your app.

These compilation commands initially run npx expo prebuild to generate native directories (android and ios) before building, if they do not exist yet. If they already exist, this will be skipped. You can also add the --device flag to select a device to run the app on — you can select a physically connected device or emulator/simulator. You can pass in --variant release (Android) or --configuration Release (iOS) to build a production build of your app. Note that these builds are not signed and you cannot submit them to app stores. To sign your production build, see Local app production.

Local builds with expo-dev-client

If you install expo-dev-client to your project, then a debug build of your project will include the expo-dev-client UI and tooling, and we call these development builds.

npx expo install expo-dev-client

To create a development build, you can use local app compilation commands (npx expo run:[android|ios]) which will create a debug build and start the development server.

Android Studio and xCode

It's advantageous to install xCode and Android Studio too.
Typical system requirements:
xCode needs ~50GB disk space, Android Studio needs ~20GB disk space. Overall, a Mac of ~200GB disk space.
Android Emulator typically needs 16GB RAM & 16GB disk space. Though 8GB of RAM can still cope.

References

Common things

Query

Push notification

Awesome tutorial:

PS: If you changed Private Key and you need to set a new private key. You can delete the old key and then add a new one.

To delete existing key: eas credentials. Navigate thru the prompts, select Google Service Account. Keep navigating and find Delete a Google Service Account Key

For backend:

Icon:

The notification icon is tricky, and various solutions are all over the internet. But just do this (2025 solution):

    "notification": {
      "icon": "./assets/images/icon-notif.png",
      "color": "#000000"
    },
  • Have the above in app.json, same level/nest as "android" and "ios".
  • 96x96 png, white content and transparent background.

Tools:

Others:

Data management

Social media integration

Toast messages

Audio

At its most bare-basic

import { Audio } from 'expo-av';

async function playSound() {
  const { sound } = await Audio.Sound.createAsync( require('../assets/audio/xxx.wav') );
  await sound.playAsync();
}

<Button title="Play Sound" onPress={playSound} />

Camera

Forms

Keyboard Avoidance

OS specific frontend styling

Paypal integration

This tutorial is for RN Cli: https://www.npmjs.com/package/react-native-paypal - react-native link react-native-paypal generates android & ios folders

This tutorial is for Expo: https://chatgpt.com/share/d1c838b8-2e6e-4f89-92b6-d603d2a3f176 - expo eject generates android & ios folders

Routers and navigators

How to solve this problem ("RNCSafeAreaProvider was not found in the UIManager Error") when using Expo Drawer Nav ( https://docs.expo.dev/router/advanced/drawer )

{
  "name": "drawers",
  "version": "1.0.0",
  "main": "expo-router/entry",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web"
  },
  "dependencies": {
    "@react-native-community/masked-view": "^0.1.11",
    "@react-navigation/drawer": "^6.7.2",
    "expo": "~51.0.28",
    "expo-router": "^3.5.23",
    "expo-status-bar": "~1.12.1",
    "react": "18.2.0",
    "react-native": "0.74.5",
    "react-native-gesture-handler": "^2.18.1",
    "react-native-reanimated": "3.10.1",
    "react-native-safe-area-context": "^4.10.9",
    "react-native-screens": "^3.34.0"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0"
  },
  "private": true
}

import { useRouter } from 'expo-router';
const router = useRouter();
router.back();

Deep Linking

Tabs

https://gist.github.com/atabegruslan/07fc9e556141b7a5e27c7ed7bf8a96c0

Render HTML

FlatList Infinite Scroll

Flash List

Payments

https://github.com/atabegruslan/Notes/wiki/React-Native-Payments

Open Phone's Email App

https://gist.github.com/atabegruslan/0aa755192f7db9c940feee12187255ee

Background Tasks

Publish

EAS

Pre-publish

npx expo-doctor@latest
Advice: Use 'npx expo install --check' to review and upgrade your dependencies.

1/ https://docs.expo.dev/workflow/prebuild 1a/ https://www.youtube.com/watch?v=2yHI0e4MzUE

If you are just using HTTPS REST API, Websockets and/or WebRTC, then just tick the standard option.

Publishing - Android

Google Play Console don't accept .apk anymore

Publishing - iOS

Different ways: https://developer.apple.com/help/app-store-connect/manage-builds/upload-builds

If you encounter this issue below, you need to agree to Apple's latest contract (2024).
https://stackoverflow.com/questions/78680844/ios-you-do-not-have-required-contracts-to-perform-an-operation
https://forums.developer.apple.com/forums/thread/710906

Before agreeing

After agreeing

Filling questionaire for review > Giving Screenshots

What screenshot dimensions App Store Connect needs for review

So:

References:

Testing

Alpha testing = internal testing.
Beta testing = external testing.

https://github.com/atabegruslan/Notes/wiki/Testing

In both iOS and Android. Beta testing isn't required. If you are confident enough, you can just go straight to releasing it.

Update

app.json

    "ios": {
      "supportsTablet": true,
      "bundleIdentifier": "com.yyy.xxx",
      "buildNumber": "1",
      "config": {
        "usesNonExemptEncryption": false
      }
    },
    "android": {
      "package": "com.yyy.xxx",
      "versionCode": 1,
      "adaptiveIcon": {
        "foregroundImage": "./assets/adaptive-icon.png",
        "backgroundColor": "#ffffff"
      }
    },

Update - Android

Increment versionCode!

When testing: Testing > Internal Testing > Create new release & add testers

When creating anew: (Todo)

This step isn't necessary

If you do it (Linking service account and downloading the key), you can then publish new releases automatically by: eas build --platform android then eas submit -p android --latest, with eas.json:

{
  ...
  "submit": {
    "production": {
      "android": {
        "serviceAccountKeyPath": "path to that downloaded key"
      }
    }
  }
}

If not, then just eas build --platform android, manually download build from expo.dev and upload to Google Play Console.

Update - iOS

Versions

Don't forget to update remote version too https://docs.expo.dev/build-reference/app-versions/#remote-version-source

So:
eas build:version:set to set Android versionCode and iOS buildNumber, and chose remote. eas.json will be updated.
eas build:version:sync

And don't forget to update:

  • android/app/build.gradle's versionCode and versionName
    • versionCode corresponds to app.json's Android versionCode
    • versionName corresponds to app.json's version
  • ios/{appname}/Info.plist's CFBundleVersion and CFBundleShortVersionString:
    • CFBundleVersion corresponds to app.json's iOS buildNumber
    • CFBundleShortVersionString corresponds to app.json's version

The app version number is shown in the App Store after an app is released, but the build version number is not; it is only visible to TestFlight Beta testers who are invited to test your app and in App Store Connect. 

AppStoreConnect's other version number

The version number 0.01 was set by the development team during the app creation process (xCode > General > Identity > Version). It is not a number that Apple assigned. 

To change it:

  • Either release the app ( click on your iOS submission. Once you do this, if you scroll down, there will be a version section where you can update the number ) on the App Store
  • Or select the “cancel this release” link found in the blue highlighted text directly under “iOS App Version 0.01.”

After cancelling the release, you'll see:

Also, after your app is already in store, and then you want to update it with a new build, you'll have to create a new version, and this is another time when that version has to increment. https://developer.apple.com/help/app-store-connect/update-your-app/create-a-new-version

After that, you will have to fill the form, include your latest build, submit to review, just like before.

Soon you will get an email from Apple notifying you that your update went thru. And you will see in your Apple Store:

Others

Support

Google Play Developer support

Apple

Expo:

Theory

Metro; The JavaScript bundler for React Native:

Platform Specific

Audio

Android emulator control output volume

Android emulator control input microphone - Method 1

Android emulator control input microphone - Method 2

iOS simulator control output volume

iOS simulator control input microphone

https://stackoverflow.com/questions/3195739/turn-off-sound-in-iphone-simulator

Mac control input microphone

Start afresh

Android

Clear the emulator.

Open the android folder in Android Studio. Go to File > Invalidate Caches.

Or just delete app in emulator.

iOS

Delete app in simulator.

Reinstall all CocoaPods afresh: rm -rf node_modules; rm -rf ios/build; rm -rf ios/Pods; rm -rf ios/Podfile.lock; yarn; yarn podinstall.

Update Pods cd ios, then pod repo update, then pod install.

Or simple delete these folders: ios/build and ios/Pods.

PS: A Pod is a third-party library or framework that is integrated into a project using CocoaPods (CocoaPods is a dependency manager)

Android

Dealing with multiple gradles

When you run npx expo run:android, you can also see:

yarn run v1.22.22
$ expo run:android --variant debug
› Building app...
Downloading https://services.gradle.org/distributions/gradle-8.8-all.zip

iOS

iOS simulator use simulator's keyboard instead of Mac's keyboard

Screenshot

Run many Simulators

Firebase

Sometimes its faster to distribute builds among other developers during development phase

Upload

Drag & Drop the build file (eg: .apk) into Firebase, like any online dropbox.

Invite others

https://www.youtube.com/watch?v=V3z97mWuvmA&t=180s