Expo on Aamnah - Frontend Web Developer

Handling permissions in Expo

Tue, 14 Jul 2020 23:10:01 +0500

1expo install expo-permissions

You can check if a permission is granted with Permissions.getAsync(...permissionTypes) and ask for a permission with Permissions.askAsync(...types)
Both return a Promise with has status and expires as well as details about scope
The status is usually granted or denied. It could also be undetermined in case of Permissions.NOTIFICATIONS for iOS, as iOS does not disambiguate undetermined from denied
Make sure you’re basing your logic on granted and !granted to account for cases like undetermined that only happen on iOS and only for some permissions
on iOS remote notifications only show if allowsSound, allowsAlert or allowsBadge is set.

There are about a dozen permission types
- NOTIFICATIONS
- USER_FACING_NOTIFICATIONS
- LOCATION
- CAMERA
- AUDIO_RECORDING
- CONTACTS
- CAMERA_ROLL
- CALENDAR
- REMINDERS
- SYSTEM_BRIGHTNESS
- MOTION

Environment variables in Expo using Release Channels

Mon, 13 Jul 2020 14:01:06 +0500

You can reference the release channel with Constants.manifest.releaseChannel. It’s part of expo-constants
Default values for releaseChannel are:
- undefined in dev mode
- default in production
Constants.manifest.releaseChannel does NOT exist in dev mode, it’ll return undefined. It does exist, however when you explicitly publish / build with it.
If you don’t specify a release channel, it’ll publish to a channel called default

Here’s what i use, it uses indexOf to accomodate for different variations in channel names and __DEV__ to set default environment when releaseChannel is undefined

Expo builds vs. Turtle builds

Wed, 01 Jul 2020 16:58:06 +0500

Expo	Turtle
App hosted on Expo servers	Self-hosted
Calls Expo URL for future OTAs `exp://i3-kvb.ccheever.an-example.exp.direct:80`	Calls our server’s URL for furture OTAs `http://build.myserver.com/android-index.json`
OTAs will fetch JS bundles and assets from Expo’s CDN	OTAs will fetch JS bundles and assets from your servers
Build is put in a build queue, you wait for your turn	No build queue
~ 32 minutes in pipeline	~ 8 minutes in pipeline

The entire pipeline including installing JDK, setting up Android SDK, the actual build of the app bundle, and uploading of the artifacts took less than 8 minutes.

Expo keystore invalid format error

Mon, 29 Jun 2020 23:58:08 +0500

ISSUE

Build fails giving the following erros

Failed to read key xxxxxxxlc3BlbxxxxxxxxnBwcmVhY3Ruxxxxxxxx from store "/tmp/turtle/keystore-dfb2d7a0-91d0-44c0-b085-2486ec2039b8.jks": Invalid keystore format

Get keystore details

1expo fetch:android:keystore

Keystore credentials
  Keystore password: xx299bxxxxxxxx98a9a42e1cxxxxxxxx
  Key alias:         xxxxxxxlc3BlbxxxxxxxxnBwcmVhY3Ruxxxxxxxx
  Key password:      3d1xxxxxxxx744xxxxxxxx9bcxxxxxxx

  Path to Keystore:  /media/aamnah/Files/Sites/appreactnative/appreactnative.jks

Use the keystore details to get details about the keystore format

1keytool -list -keystore appreactnative.jks -alias "xxxxxxxlc3BlbxxxxxxxxnBwcmVhY3Ruxxxxxxxx"

Enter keystore password:
xxxxxxxlc3BlbxxxxxxxxnBwcmVhY3Ruxxxxxxxx, Jan 15, 2020, PrivateKeyEntry,
Certificate fingerprint (SHA-256): AA:BB:CC:1D:BB:C8:00:7B:35:12:12:21:21:12:12:12:12:12:34:56:78:90:E5:E5:A3:EB:1A:56:E3:2C:73:63

Warning:
The JKS keystore uses a proprietary format. It is recommended to migrate to PKCS12 which is an industry standard format using "keytool -importkeystore -srckeystore appreactnative.jks -destkeystore appreactnative.jks -deststoretype pkcs12".

If for some reason your keystore is not the right format, expect the following errors instead of seeing the details above

Setup a publish, build and distribute pipeline for Expo based React Native project

Mon, 29 Jun 2020 23:58:07 +0500

Steps

Build your app and let Expo manage your key
Generate a keystore
Sign the app and set it up in the Play Console
Setup Netlify to serve the app
Export the app to Netlify’s public URL
Build the app and mention that URL (will be used for OTA)
Send the builds (.aab and .ipa)to a distribution service (Firebase App Distribution or Microsoft AppCenter)

The reason i’m building with turtle and not with expo is because Expo builds are put in a build queue, which can take up to 45 minutes to build your app.. I can not waste this many minutes in a CI/CD pipeline. For reference, the Bitbucket free plan gives you only 50 build minutes for an entire month. I actually ran out of build minutes while putting the pipeline together..

Project structure - Expo vs. React Native

Wed, 24 Jun 2020 20:13:39 +0500

1# create a react native project with typescript
2npx react-native init AwesomeTSProject --template react-native-template-typescript

.
├── android/
├── app.json
├── App.tsx
├── babel.config.js
├── index.js
├── ios/
├── metro.config.js
├── node_modules/
├── package.json
├── package-lock.json
├── __tests__/
└── tsconfig.json

4 directories, 8 files

1# create an Expo project
2expo init my-project

.
├── app.config.js
├── App.tsx
├── assets
├── babel.config.js
├── components
├── constants
├── hooks
├── navigation
├── node_modules
├── package.json
├── screens
├── tsconfig.json
└── types.tsx

7 directories, 6 files

Ejecting from Expo

Thu, 11 Jun 2020 19:05:21 +0500

Cons

The expo build tool chain
You start doing react native development for iOS and Android

Pros

full Firebase SDK
automate deployments and distributionn to app stores
CodePush or RemoteConfig
SDKs for React Native by Google and Microsoft

Building Standalone Expo React Native apps locally with Turtle CLI

Thu, 04 Jun 2020 22:30:31 +0500

tl;dr

Get a secure URL to publish project to ngrok http 127.0.0.1:8080 -host-header="127.0.0.1:8080"
Export project to secure URL rm -rf dist/ && expo export --public-url https://XXXXXXXXXXXX.ngrok.io
Run project on secure local server cd dist/ && npx http-server and confirm it’s running curl https://XXXXXXXXXXXX.ngrok.io/android-index.json
Build project using turtle-cli with --public-url pointing to the secure server

1EXPO_ANDROID_KEYSTORE_PASSWORD="XXXXXXXX" \
2EXPO_ANDROID_KEY_PASSWORD="XXXXXXXX" \
3turtle build:android \
4  --keystore-path /PATH/TO/YOUR/KEYSTORE_FILE.jks \
5  --keystore-alias PUT_KEYSTORE_ALIAS_HERE
6  --public-url https://XXXXXXXXXXXX.ngrok.io/android-index.json

Right now when you run the expo build command, it puts you into a queue, and stores the build on Expo servers. I obviously don’t want that because a queue slows me down (the build keeps failing..) and once the build is done i have to manually download it in order to be able to upload it somewhere else..

Changing from Expo generated Android keystore to your own

Fri, 07 Feb 2020 00:00:00 +0500

This assumes that you have a new app and have not published it to Google Play Store before.

1. Opt in to Google Play App Signing

You can either do that directly through the Play Console, or you can run this Expo command

1expo opt-in-google-play-signing

which will basically walk you through it

2. Backup the Expo generated keystore and save the outputted details

1expo fetch:android:keystore

Keystore credentials
Keystore credentials
  Keystore password: xx299bxxxxxxxx98a9a42e1cxxxxxxxx
  Key alias:         xxxxxxxlc3BlbxxxxxxxxnBwcmVhY3Ruxxxxxxxx
  Key password:      3d1xxxxxxxx744xxxxxxxx9bcxxxxxxx

  Path to Keystore:  /media/aamnah/Files/Sites/appreactnative/appreactnative.jks

3. Generate a keystore

1keytool -genkeypair -v -keyalg RSA -keysize 4096 -validity 10000 -keystore KEYSTORE_OUTPUT_FILE.keystore -alias KEY_ALIAS

4. Clear the keystore that Expo generated and attach your own keystore

Keep in mind that --clear-credentials will permanently delete your existing keystore from Expo servers and this is something that can not be reversed. Make absolutely sure that you have the correct keystore that you’re using with Play Store.

Firebase Crashlytics and Expo

Thu, 09 Jan 2020 14:36:10 +0500

tl;dr:

You can’t use Crashlytics in Expo without ejecting. link
You can use the Firebase JS SDK in Expo, but that only supports Database and Storage
You can use Firebase React Native for full Firebase functionality, once you eject from Expo

Integrating Sentry with Expo

Thu, 04 Apr 2019 13:57:37 +0500

1npm i sentry-expo --save

Create an API auth token. Must have project:write

app.json

 1"hooks": {
 2  "postPublish": [
 3    {
 4      "file": "sentry-expo/upload-sourcemaps",
 5      "config": {
 6        "organization": "your organization's short name here",
 7        "project": "your project name here",
 8        "authToken": "your auth token here"
 9      }
10    }
11  ]
12}

App.js

1import Sentry from 'sentry-expo';
2
3// Remove this once Sentry is correctly setup.
4Sentry.enableInExpoDevelopment = true;
5
6Sentry.config('your Public DSN goes here').install();