Dynamic splash screens depending on theme

[Kamill90]

Not a bug, not an issue. We use this library for the current project. However, we need to set darkSplashScreen.png when user choose a dark mode and lightSplashScreen.png when user choose a light mode.

Is it even possible with this (or another) library?

[maitrungduc1410]

For everyone need this. Check this link: https://blog.brainsandbeards.com/how-to-add-a-dark-mode-splash-screen-to-a-react-native-app-f0fb8724d9d7

Works perfectly (scroll to bottom to see how to use with react-native-splash-screen)

[shariqahmed525]

@maitrungduc1410 could you share the code with me I'm getting many errors.

[dimatretyak]

For Android

1. Add a splash screen using this approach
2. Create a colors.xml in android/app/src/main/res/values-night (create the values-night directory if it doesn’t exist) in which you override splashscreen_bg color name

[pxmage]

I followed the link provided by @maitrungduc1410

Here is how I did it:

First, I prepare two images for dark and light mode launch_screen_light and launch_screen_dark.

Then, create a theme.xml at android/app/src/main/res/values folder:

<?xml version="1.0" encoding="utf-8"?>
<resources>
  <attr name="launchImage" format="reference"/>
</resources>

As you can see, I defined a custom attr called launchImage.

Then, in the android/app/src/main/res/values/styles.xml, add:

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<resources>

  <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    ....
  </style>

  <!-- add this -->
  <style name="LightTheme" parent="AppTheme">
    <item name="launchImage">@drawable/launch_screen_light</item>
  </style>

  <!-- and add this -->
  <style name="DarkTheme" parent="AppTheme">
    <item name="launchImage">@drawable/launch_screen_dark</item>
  </style>
</resources>

I Added two themes called LightTheme and DarkTheme, and I write the values which are my pre-defined launch screen images.

Then, in the android/app/src/main/res/layout/launch_screen.xml, reference my image attr:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">
    <ImageView 
        android:layout_width="match_parent" 
        android:layout_height="match_parent"
        android:src="?attr/launchImage"
        android:scaleType="centerCrop" 
    />
</RelativeLayout>

Just look at this line: android:src="?attr/launchImage" .

Finally, in the android/app/src/main/java/com/packageName/appName/MainActivity.java:

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        switch (getResources().getConfiguration().uiMode & Configuration.UI_MODE_NIGHT_MASK) {
            case Configuration.UI_MODE_NIGHT_YES:
                setTheme(R.style.DarkTheme);

                break;
            case Configuration.UI_MODE_NIGHT_NO:
                setTheme(R.style.LightTheme);
                break;
            default:
                setTheme(R.style.LightTheme);
        }

        SplashScreen.show(this);
        super.onCreate(savedInstanceState);
    }

Add that "switch" part code. Don't forget to add import android.content.res.Configuration;, this is not mentioned in the article.

And that's all, it is done. 😆

@shariqahmed525 FYI.

[namnm]

This is great. Anyone tried to have the same on ios?

[huzaifaazim0]

For IOS, follow this

go to images.xcassets, add new image set in attribute inspector on right pane, select "Any,Dark" under appearances

Then upload your splash screens, for dark mode upload in dark section and for light mode upload in 'any' section then go to launchScreen.storyboard and create a imageView component and import your created image asset

and it will automatically change splash screen according to the launch screen

[santhosh-umapathi-appymango]

I followed the link provided by @maitrungduc1410

Here is how I did it:

First, I prepare two images for dark and light mode launch_screen_light and launch_screen_dark.

Then, create a theme.xml at android/app/src/main/res/values folder:

<?xml version="1.0" encoding="utf-8"?>
<resources>
  <attr name="launchImage" format="reference"/>
</resources>

As you can see, I defined a custom attr called launchImage.

Then, in the android/app/src/main/res/values/styles.xml, add:

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<resources>

  <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    ....
  </style>

  <!-- add this -->
  <style name="LightTheme" parent="AppTheme">
    <item name="launchImage">@drawable/launch_screen_light</item>
  </style>

  <!-- and add this -->
  <style name="DarkTheme" parent="AppTheme">
    <item name="launchImage">@drawable/launch_screen_dark</item>
  </style>
</resources>

I Added two themes called LightTheme and DarkTheme, and I write the values which are my pre-defined launch screen images.

Then, in the android/app/src/main/res/layout/launch_screen.xml, reference my image attr:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">
    <ImageView 
        android:layout_width="match_parent" 
        android:layout_height="match_parent"
        android:src="?attr/launchImage"
        android:scaleType="centerCrop" 
    />
</RelativeLayout>

Just look at this line: android:src="?attr/launchImage" .

Finally, in the android/app/src/main/java/com/packageName/appName/MainActivity.java:

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        switch (getResources().getConfiguration().uiMode & Configuration.UI_MODE_NIGHT_MASK) {
            case Configuration.UI_MODE_NIGHT_YES:
                setTheme(R.style.DarkTheme);

                break;
            case Configuration.UI_MODE_NIGHT_NO:
                setTheme(R.style.LightTheme);
                break;
            default:
                setTheme(R.style.LightTheme);
        }

        SplashScreen.show(this);
        super.onCreate(savedInstanceState);
    }

Add that "switch" part code. Don't forget to add import android.content.res.Configuration;, this is not mentioned in the article.

And that's all, it is done. 😆

@shariqahmed525 FYI.

Hi, What does the AndroidManifest.xml looks like ? Can you share a demo project incase if you have any ? Its not working in my case