Is there any way to change the Splash Screen background color in Expo according to dark/light themes?

Question

I'm trying to change my Splash Screen's background color on my expo app in accordance with the system's dark/light theme configuration, however since I can't reach out for the Appearance module I couldn't find a way to do so.

Is this possible at all to do within an expo app?

Thanks!

Blench

I think it is not possible yet, check this post – Lorylose

Were you able to find a solution for this? – Audrieaudris

did you find any solution? – Gimmal

Answer 1

Yes, I'm using Expo SDK 48.0.0 & works on Expo Go

Everything explained here is available on Expo Documentation.

First you'll need to make changes in your 'app.json' file.

If you've configured your app with a Splash Screen

{

     "expo": {

          "splash": {
               "image": "...",
               "resizeMode": "cover",
               "backgroundColor": "#ffffff"
          }

     }

}

Change it to this

{

     "expo": {

          "android": {

               "splash": {
                    "image": "...",
                    "resizeMode": "cover",
                    "backgroundColor": "#ffffff",
                    "dark": {
                         "image": "...",
                         "resizeMode": "cover",
                         "backgroundColor": "#000000"
                    }
               }

          },

          "ios": {

               "splash": {
                    "image": "...",
                    "resizeMode": "cover",
                    "backgroundColor": "#ffffff",
                    "dark": {
                         "image": "...",
                         "resizeMode": "cover",
                         "backgroundColor": "#000000"
                    }
               }

          }

     }

}

Byng

Can you give a minimal reproducible example? I cannot get this to work at all. – Neighbor

@Neighbor Try installing expo-system-ui, Docs Here – Byng

I already do. Could you ping me on email or somewhere? [email protected] Or maybe post a link to an expo snack with your example working? I'm on the latest SDK. – Neighbor

While I'm still creating the Expo Snack, Check This. It's very long and You'll need Android Studio or Xcode to manually change them. – Byng

Your config is work for SplashScreen component but the native spashscreen still render in white in dark mode on iOS. I'm having Expo 48.0.18 with Expo Router. – Belong

So, to make it clear, is this supposed to work in a Expo managed project? – Apostate

@Neighbor i can confirm this works. the app.json file is all you need. Have you tried deleting the ios or android folders before building and running the project again? Also, no need to be so rude. – Jackhammer

@Neighbor this actually works tho – Goulash

I can confirm that this does work . – Zonation

I am unable to get it to work. Please provide an actual example. – Neighbor

This is documented, so whether it works for you, or anyone, you're way out of line to call @AndaHanise a liar. docs.expo.dev/versions/latest/config/app/#splash-1 – Punchinello

I literally followed OP's advice (which indeed worked) AND provided the documentation link. Get over yourself. – Punchinello

Just tried as well and did not work for me with expo 49 while testing on expo go. – Playpen

@Playpen I'm pretty sure you can't use Expo Go and you need a custom client. I could be mistaken. Also try the advice above about installing expo-system-ui – Punchinello

@Punchinello thanks for the response. So you believe that this doesnt work in expo go but once its built as an ios app it does? – Playpen

No, no. First off, OP says it does work in Expo Go. I can't attest to that, and for reference I tested on SDK 49 on Android with a custom dev client. I believe I verified it works on iOS also. You likely need to create a custom Expo client to get this to work though in my opinion. I'd install expo-system-ui before building the custom client. (I believe you just need to install expo-system-ui, not actually reference it anywhere in your code. I'm happy to help if I can, just keep updating on your progress. – Punchinello

Answer 2

I can't add comments yet, but answering to this conversation:

There is a GitHub issue explaining this:

When launching the project with Expo Go (i.e. expo start --ios), the splash DOES NOT pick the dark mode colors.

When launching the project with Expo Dev Client (i.e. expo run:ios), the splash DOES pick the dark mode colors.

So everyone is right: The people who says it doesn't work is because they're using Expo Go; the people who says it works is because they're using Expo Dev Client.

Baluster

Thanks for the response. So you believe that this doesnt work in expo go but once its built as an ios app it does? Looking at the documentation it appears so, thanks for this great link. Should be the approved answer. – Playpen