Floodzuki Expo Upgrade Notes

Floodzuki Expo 54 Upgrade Notes

This is an uncategorized list of notes about updating Floodzuki's Expo version to v54. This is mostly here for posterity, in the hopes that it might help with future upgrades.

Overall Notes

Directly upgrading the expo version was going to be very complicated, because there are a number of big changes:

• new react native architecture
• no more @expo/sentry package
• file-based routing issues

Because of this, my approach was to build a new empty Expo 54 project with Sentry and then take the basic framework, and all of the expo versions, into the floodzuki project.

One side effect was moving all of the components, utils, etc, out of /app and into a new /src directory. Having them in /app was causing a lot of warnings about default exports, because file-based-routing was expecting anything in /app to be a route. This change may not have been necessary, but I wanted to go ahead and do it so that if we want to use file-based routing in the future it'll be easier.

Local EAS Build

The below issues (dark mode, map blank) are showing up on EAS builds but not on my normal local builds. It's possible to run a local EAS build, which does appear to replicate both of these issues. This is how I did a local EAS build on WSL (note: get the environment variable values from the usual places):

GOOGLE_AUTH_CLIENT_SECRET="??" \
GOOGLE_RECAPTCH_SITE_KEY="??" \
GOOGLE_MAPS_WEB_API_KEY="??" \
GOOGLE_MAPS_ANDROID_API_KEY="??" \
GOOGLE_AUTH_EXPO_ID="??" \
GOOGLE_AUTH_WEB_ID="??" \
GOOGLE_AUTH_IOS_ID="??" \
GOOGLE_AUTH_ANDROID_ID="??" \
eas build --profile preview --platform android --local

NOTE! This can sometimes just fail, and immediately re-running it might succeed. Yay!

Dark Mode

Status: BROKEN

Support for dark mode has changed in Expo. We want to force our app to run in light mode, because we haven't yet taken the time to make the app work correctly in dark mode (for example, the text in text fields renders white-on-white when in dark mode).

In Expo we can supposedly force the app to run in light mode only by adding

userInterfaceStyle: "light"

in various places in app.config.ts. Additionally, on Android, the package expo-system-ui is required.

Unfortunately, even with these changes, this is not yet working. We are correctly forcing light mode when run directly either on the emulator or on a real Android device, but the EAS-built preview version is still running in dark mode:

UPDATE: I've been able to finally get an EAS local build working, and the problem appears there also, so I should be able to examine the build processes and see what's different.

UPDATE: Not sure why but this seems to be actually working now? I added expo-system-ui to plugins, and experimented with explicitly setting the app background color to verify that it was getting imported/loaded, and now the app is forcing light mode correctly.

UPDATE: As of the latest build, the problem is back.

Map is blank

Status: Resolved

The map is currently blank when running an EAS build. I originally thought that this was because of a missing environment variable but now I am not sure. I am investigating.

It appears that the Google Maps API key has to have the app's SHA1 fingerprint -- Once I resolve the dark mode issue I'll try to resolve this.

UPDATE: Removing the fingerprint limitation on the development-mode API key resolves the issue; I'll continue investigating to figure out what the right full solution is for this, but it may just be: don't restrict the development-mode key, and just make sure that it isn't ever used in production.

UPDATE: Definitely caused by the android key being limited to certain fingerprints. If in doubt, adb logcat will give a helpful error message:

E  Authorization failure.  Please see https://developers.google.com/maps/documentation/android-sdk/start for how to correctly set up the map.
E  In the Google Developer Console (https://console.developers.google.com)
   Ensure that the "Maps SDK for Android" is enabled.
   Ensure that the following Android Key exists:
       API Key: <should be your defined api key>
       Android Application (<cert_fingerprint>;<package_name>): 12:34:56:......cd:ef;<com.example.app>

Taking the fingerprint from this error and explicitly allowing it in the google developer console at https://console.cloud.google.com/apis/credentials?project=floodzilla should fix the issue.