React Native Expo

Builds

Production

iOS

  1. create the build npx eas build -p ios --profile production - this could take between 30mins to a few hours depending on queue.
  2. submit the build to App Store Connect npx eas submit -p ios or npx testflight

Android

eas build -p android --profile production

Development

build locally

Builds Troubleshooting

Error 10

This was due to incorrect SHA-1. I was using the SHA-1 from the expo.dev project page instead of the SHA-1 from the google cloud console.

App Icon and Name

iOS change icon

  1. place the icon.png file in the src/assets/icon.png
  2. update the app.json file:
{
  "expo": {
    "name": "sleeprituals02",
    "icon": "./src/assets/icon.png",
    "ios": {
      "icon": "./src/assets/icon.png",
      "infoPlist": {
        "ITSAppUsesNonExemptEncryption": false,
        "CFBundleDisplayName": "Sleep Rituals"
      }
    },
    "android": {
      "icon": "./src/assets/icon.png",
      "adaptiveIcon": {
        "foregroundImage": "./src/assets/icon.png",
        "backgroundColor": "#ffffff"
      }
    }
  }
}

iOS Name change

use the CFBundleDisplayName in the app.json file.

Public Wifi (ngrok)

This is how you can get around the issue of not being able to access your API from your phone when you are on public wifi.

Tunnel Expo Go

install ngrok

npm i -g @expo/ngrok

run app

yarn start --tunnel

Tunnel API

install ngrok

brew install ngrok

config / register

  1. go to https://dashboard.ngrok.com/signup

  2. get add-auth token from https://dashboard.ngrok.com/get-started/setup/macos or where ever you get it from the website

  3. add token to terminal ngrok config add-authtoken [token]

run API

  1. create ephemeral tunnel ngrok http http://localhost:3000

  2. create named tunnel from terminal run: ngrok http http://localhost:3000 --name [name]

    • example output includes Forwarding https://b9d5ab4e28ce.ngrok-free.app -> http://localhost:3000
    • I use the "https://b9d5ab4e28ce.ngrok-free.app" in my react native app fetch requests to the API running on my workstation.

Maybe OBE

Expo Go Publish to Google Play Store

video YouTube video

  1. eas build --platform android
  2. after build go to eas.dev project page and download the app

Expo Build

  1. yarn remove expo-dev-client
  2. yarn install You'll need to remove all the build associated packages

Expo eas build

To run the build on the iPhone (or any Apple device), you must both:

  1. register with apple (https://developer.apple.com/account/resources/devices/list)
  2. let expo know the device is registered with apple via eas device:create

for step 2 you will need the UDID

for UIDID:

  1. connect phone to computer
  2. click on iPhone in finder
  3. Click on the Serial Number field — it will change into the UDID.
  4. Right-click or copy it.

Google Sign in (recap)

This is my best guess as to what worked

1. eas build

build for ios

Google Sign in [ First Try]

source video used: https://www.youtube.com/watch?v=tacJUeBYPYc&t=320s

1. npx expo prebuild

This will get the package names for ios and android

2. eas build

3. generate OAuth client

  1. got to https://console.cloud.google.com/auth
  2. create a new project > from "Overview" > "Get Started" > answer questions
  3. Create iOS client: Go to clients > select "iOS"
  4. use bundle id for example "com.costarica.kybervisionmobile11" is for KyberVisionMobile11
  1. Create web client: Go to clients > select "Web application"
  2. just hit create no information needed to be given here
  3. Create Android client: Go to clients > select "Android"
  4. enter the package name is the same as bundle id
  5. enter the SHA1. I found this in expo.dev > Project > Configuration > Credentials > in a table called "Android upload keystore"

4. Modify app.json

    "plugins": [
      "expo-video",
      [
        "@react-native-google-signin/google-signin",
        {
          "iosUrlScheme": "com.googleusercontent.apps.493523572741-_SOME_CODE_"
        }
      ]
    ],

5. Modify App.js

import { GoogleSignin } from "@react-native-google-signin/google-signin";
export default function App() {

  useEffect(() => {
    GoogleSignin.configure({
      iosClientId:
        "493523572741-_SOME_CODE_.apps.googleusercontent.com",
      webClientId:
        "493523572741-_SOME_CODE_.apps.googleusercontent.com",
      profileImageSize: 150,
    });
  }, []);
  return ();
}

6. Run app on emulator

some key questions

  1. generate a new android keystore? (y/n)
  1. Generate a new Apple Provisioning Profile?
  1. this is taking some time to finish (> 20 mins so far)

3. generate OAuth client

  1. got to https://console.cloud.google.com/auth
  2. create a new project > from "Overview" > "Get Started" > answer questions
  3. Create iOS client: Go to clients > select "iOS"
  4. use bundle id for example "com.costarica.kybervisionmobile11" is for KyberVisionMobile11
  1. Create web client: Go to clients > select "Web application"
  2. just hit create no information needed to be given here
  3. Create Android client: Go to clients > select "Android"
  4. enter the package name is the same as bundle id
  5. enter the SHA1. I found this in expo.dev > Project > Configuration > Credentials > in a table called "Android upload keystore"

4. install pacakge

yarn add @react-native-google-signin/google-signin@latest

trouble shooting

error: TurboModuleRegistry.getEnforcing(...): 'RNGoogleSignin' could not be found. Verify that a module by this name is registered in the native binary.

eas build --profile development --platform all

I actually needed to do eas build --platform ios --profile development --local for emulator

Run expo build

npx expo start