[Bug] Dark mode for splash screen

[watadarkstar]

Steps to reproduce:

1. Go to phone settings and change to dark mode
2. Open the app (from a fully closed state)
3. Notice how the splash screen doesn't have a dark background

Expected behaviour:

• Background colour for splash screen should be Colors.gray900 #333333 in dark mode otherwise it should be white
• Background colour for navigation bar should be Colors.gray975 #121212 in dark mode otherwise it should be white
• Status bar should also be in dark mode and light mode depending on the phone settings

Actual behaviour: Background colour for splash screen is white

Smartphone (please complete the following information):

• Device/OS: iPhone simulator

Screenshots/Recording:

[watadarkstar]

From Brent at Expo:

it's technically possible by configuring expo-splash-screen via the plugin (rather than using the splash key). we haven't documented this yet because the api may change. https://github.com/expo/expo-cli/blob/76b720688d635e588066e571df15d8f787d9fd87/packages/prebuild-config/src/plugins/unversioned/expo-splash-screen/getIosSplashConfig.ts#L17-L22 https://github.com/expo/expo-cli/blob/76b720688d635e588066e571df15d8f787d9fd87/packages/prebuild-config/src/plugins/unversioned/expo-splash-screen/getAndroidSplashConfig.ts#L50-L71

See: https://expo.canny.io/feature-requests/p/dark-mode-splash-screen

[frubesss]

Hello @watadarkstar,

Would also like to pick this one up if that's okay? I have had a look but it looks like we cannot simply change the asset backgroundColor in app.json to #000 as the asset assets/images/splash.png has a static white background set.

I have tried creating the a dark version of the splash.png myself but it looks a bit messy.

Do you have the original woman meditating with blob background image on hand?

Thanks

[watadarkstar]

Hey @frubesss I do! Here is a transparent version of the splash screen (just right click to save it). Try to keep the code as clean as possible. You should be able to configure it for dark mode using this: https://github.com/expo/expo-cli/blob/76b720688d635e588066e571df15d8f787d9fd87/packages/prebuild-config/src/plugins/unversioned/expo-splash-screen/getIosSplashConfig.ts#L17-L22 but its an undocumented feature of Expo so it will require some effort to figure out.

[frubesss]

Hi @watadarkstar,

Apologies once again for this but I cannot come up with an optimal solution that I am happy with for this issue.

The main sticking point I have is the quick flash of a white screen at the start while the application is bundling and the splash screen disappearing before the assets have loaded producing another quick white screen flash.

I think we have two options in order of what I think is best:

1. Wait for Expo to support dark splash screens that can be configured via app.json for managed applications.
2. As discussed in the thread you linked you could come up with some workaround code that somehow shows the splash screen while the app is bundling and only appears once the app is ready. My concern with this is that you will be writing quite a lot of custom code that messes with the expo managed application launch process for a fairly small feature.

One lead that worked well for option two was this example with an animated splash screen (https://github.com/expo/examples/tree/master/with-splash-screen). The main reason I don't want to go down this path though is as highlighted before that you are writing a fair amount of custom code for an expo managed application for a small feature that could possibly cause more pain than its worth.

So yea, I would just wait for dark mode splash screens to be fully supported for managed expo applications.

I have attached the splash image with the dark background if anyone else wants to have a go at this issue.

[watadarkstar]

@frubesss I recently upgraded the app from Expo SDK 42 to 44. I wonder if they have dark mode splash support now?

It seems like we can do it via the plugin:

it's technically possible by configuring expo-splash-screen via the plugin (rather than using the splash key). we haven't documented this yet because the api may change. https://github.com/expo/expo-cli/blob/76b720688d635e588066e571df15d8f787d9fd87/packages/prebuild-config/src/plugins/unversioned/expo-splash-screen/getIosSplashConfig.ts#L17-L22 https://github.com/expo/expo-cli/blob/76b720688d635e588066e571df15d8f787d9fd87/packages/prebuild-config/src/plugins/unversioned/expo-splash-screen/getAndroidSplashConfig.ts#L50-L71

Source: Brent from Expo (https://expo.canny.io/feature-requests/p/dark-mode-splash-screen)

[watadarkstar]

I have a PR in WIP thats semi working but the navigation bar is white instead of a dark color in dark mode. Similar issue with the status bar: https://github.com/heylinda/heylinda-app/pull/135