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!

Testing Production Android Build

The output of the production Android build is an .AAB file. You can test this via the Play store by doing an "Internal App Sharing" build. You can set it so that anybody who gets the link can install it, but they must first follow the instructions at [this page] under "How authorized testers turn on internal app sharing."

Dark Mode

Status: Fixed

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.

This is not enough (and I don't really know if it's necessary). As of Expo 54, various packages set up the default Android theme to be based on Theme.AppCompat.DayNight.NoActionBar, which allows dark mode for the app no matter what other settings are done. I've added a plugin (plugins/withForceLightModeThemeAndroid.js) that explicitly forces the theme to be based on light mode. To verify this, do a local EAS build and look at

build/android/app/src/main/res/values/styles.xml:
<resources xmlns:tools="http://schemas.android.com/tools">
  <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="android:enforceNavigationBarContrast" tools:targetApi="29">true</item>
    <item name="android:editTextBackground">@drawable/rn_edit_text_material</item>
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="android:statusBarColor">#ffffff</item>
  </style>
  <style name="Theme.App.SplashScreen" parent="Theme.SplashScreen">
    <item name="windowSplashScreenBackground">@color/splashscreen_background</item>
    <item name="windowSplashScreenAnimatedIcon">@drawable/splashscreen_logo</item>
    <item name="postSplashScreenTheme">@style/AppTheme</item>
    <item name="android:windowSplashScreenBehavior">icon_preferred</item>
  </style>
</resources>

The fixed version has Theme.AppCompat.Light.NoActionBar instead of Theme.AppCompat.DayNight.NoActionBar.

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.