Giters

heylinda / heylinda-app

The open source and free meditation app alternative for everyone. Built with React Native and Expo.

Home Page:https://heylinda.netlify.app

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

[Bug] Dark mode for splash screen

watadarkstar opened this issue · comments

commented

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:
simulator_screenshot_E9618E07-279F-46EE-883A-51168A161BD7
simulator_screenshot_FABC20ED-69BD-4484-A9B6-225E1A55710C

commented

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

Screenshot 2021-10-09 at 19 00 11

commented

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.

splash-transparent

commented

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.

splash-dark

commented

@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)

commented

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:
#135