Changing App Splash Screen in Expo

I really like Expo, but sometimes I find myself going down endless GitHub rabbit holes trying to fix simple things.

In this case, I changed the splash splash image in an Expo app I was working on and ran into a very annoying issue: the old splash image (which was deleted) continued to show briefly when the app was launched before suddenly changing to the new image.

According to Expo Docs - this can sometimes happen with SDK 51 and below because in iOS development builds, launch screens can sometimes remain cached between builds.

The problem was that I was not on SDK 51. I was on SDK 53. Either way, I tried the suggestion of running npx expo run:ios --no-build-cache to fix the issue…and it didn’t work. But it was worth a try.

After browsing through a bunch of GitHub threads, I noticed that a few others who experienced the same issue were able to resolve it by running npx expo prebuild.

The first time I ran this, I got a failure on Android: Could not find MIME for Buffer <null>.

This cryptic error went away if I commented out the “expo-splash-screen” plugin configuration in the app config. Strangely, once I commented it back in and ran prebuild again…the error didn’t happen and a different error emerged:

withIosSplashScreenStoryboardBaseMod: Cannot create property 'constraint' on string ''

More searching lead me to this comment: https://github.com/expo/expo/pull/32858#issuecomment-2476515215

Did you try running prebuild with --clean? If you don't, you may run into problems where it looks at your existing storyboard and tries to modify it but this has changed in the sdk 52 template.

Did i try running with - -clean? No, I did not. So I gave it a shot and it worked. No errors and all the issues went away. I saw the correct splash screen when launching the app on device.

Closing Thoughts:

I really like Expo and React Native. Cross platform frameworks allow me to build mobile apps for iOS and Android using a single codebase and when everything is working, the dev loop and iteration speed is best in class. It’s easy to get into flow and make progress quickly.

BUT…spending so much time debugging why a simple splash screen image change is not working really hurts the overall experience. These kinds of issues just don’t exist with pure native tools (XCode/Swift, Android Studio/Kotlin). Yes, I need to write and maintain two codebases, but if I change an image and re-run my app, the change just works. I hope the same experience can make it’s way into Expo too.

Connecting to Supabase running locally from Android Emulators

While working on a mobile app using React Native and Expo, I ran into an issue where I was unable to connect to a local instance of Supabase from my Android Emulator.

My local Supabase instance was running at: http://127.0.0.1:54321.

When initializing the Supabase JavaScript client, I was simply passing in this URL and anon key:

const supabase = createClient<Database>(supabaseUrl, supabaseAnonKey)

While this worked fine on iOS Simulator, on Android Emulators, I would keep getting an error:

TypeError: Network request failed

Per the official Android documentation, the reason why is because Android Emulators sit behind their own virtual router, so the virtual devices can't see the host computer. They only see a router connection. That router gives the emulator an IP in the 10.0.2.x range, keeping all traffic inside this private network.

The fix is to use a special alias IP that points to the host computer's own local address (127.0.0.1). Per the Android docs, this alias IP is:

10.0.2.2

Changing the URL to http://10.0.2.2:54321 fixed the issue on Android, but caused iOS to break with the same error: TypeError: Network request failed.

To fix the issue for both platforms, I used the Platform helper from react-native to conditionally select the correct URL:

export const supabaseUrl = Platform.select({
  ios: http://127.0.0.1:54321,
  android: http://10.0.2.2:54321,
});