Dark Mode Splash Screen | Voters

Dark Mode Splash Screen

Ijaas Yunoos

Allow to set an alternative splash screen color and image when device is set to dark mode.

If it is possible to customize the status bar the same way would be brilliant.

November 17, 2019

Kasra Alizadeh

can we use it in sdk 50 expo ?? how please send full example

Attique Ur Rehman

Its already possible in expo managed flow. Please see following configuration for app.json / app.config.js. App will automatically pick dark/light splash screen depending on device theme
const splash = {
"image": "./assets/splash.png",
"resizeMode": "contain",
"backgroundColor": "YOUR_LIGHR_COLOR",
"dark":{
"image": "./assets/splash.png",
"resizeMode": "contain",
"backgroundColor": "YOUR_DARK_COLOR",
}
}
export default{
"name": "APP_NAME",
"slug": "APP_SLUG",
"owner": "APP_OWNER",
"version": "1.0.0",
"icon": "./assets/icon.png",
"userInterfaceStyle": "automatic",
"splash": splash,
"ios": {
"userInterfaceStyle": "automatic",
"splash": splash,
"bundleIdentifier": "APP_BUNDLE_IDENTIFIER",
"buildNumber": "BUILD_NUMBER",
.......
},
"android": {
"package": "PACKAGE_NAME",
"versionCode": 1,
"userInterfaceStyle": "automatic",
"splash": splash,
"adaptiveIcon": {
"foregroundImage": "./assets/adaptive-icon.png",
"backgroundColor": "#FFFFFF",
.....
},
},
....
};
Note: Make sure your splash image/logo has transparent background or use separate images for dark/light splash. (I'm using single image with transparent background color)

Sallar

Seems like this has been possible for a while.

https://stackoverflow.com/questions/68704502/is-there-any-way-to-change-the-splash-screen-background-color-in-expo-according

Jonak Adipta Kalita

Got any Updates? Evan Bacon

Kim Brandwijk

marked this post as

open

sendylo app

Any update on this? waiting for this for ever Brent Vatne Evan Bacon

Pristine Judah

Please what's the update on this feature Brent Vatne

Adrian Carolli

Any update on this feature request Brent Vatne or Evan Bacon? :)

Brent Vatne

Adrian Carolli: 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

sita berete

Brent Vatne: Can you give me an example or link to a resource that explain how it can be done using the plugin? I'm new to react native.

Brent Vatne

sita berete: it is intentionally not documented yet because it's not final :) i don't recommend using this if you are new

Slapbox

Brent Vatne: any idea when the API might be nailed down? If it changes, would that be expected in SDK 43, or some ways down the road? Might make sense for us to pull the trigger on this if we won't have to rewrite it as soon as SDK 43 comes out.

Brent Vatne

Slapbox: we are not actively working on this, we just built it out while rewriting splash screen config logic for eas build. unknown when it will change in the future. at worst you'll have to change the config object a bit so it's not a big deal

Olalekan Raheem

Brent Vatne: Please how we implement this

Wodin

Olalekan Raheem: See outatime's post here: https://forums.expo.dev/t/how-to-make-splash-background-color-dynamic/63520/2

But bear in mind that this is not "official" and it might stop working in future if the Expo team changes the API.

Joe Knight

Hello, I didn't notice anything in SDK41 CHANGELOG referencing this feature, any chance it's making it in?

Wodin

Merged in a post:

Appearance-Specific Config in app.json

Taha Attari

It would be great if app.json had dark/light mode specific configs for stuff like the splash screen and android navigation bar. I understand updating the theme on the fly might be hard for native components but since the app knows the theme when it starts up it should be able to pick appropriate options.

February 3, 2021

→