skip to Main Content

After spending a few days on this issue, I’m asking for your help.
I upgraded my project to react-native 0.69.5, and react-native-bootsplash 4.3.2.

I’m trying to customize the splash screen with an icon and a background color, but only the icon shows up.

Here is my styles.xml file:

<resources>
  <!-- Base application theme. -->
  <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="android:statusBarColor">@color/green</item>
    <item name="android:forceDarkAllowed">false</item>
    <item name="android:editTextBackground">@drawable/rn_edit_text_material</item>
  </style>

  <!-- BootTheme should inherit from Theme.SplashScreen -->
  <style name="BootTheme" parent="Theme.SplashScreen">
    <item name="windowSplashScreenBackground">@color/green</item>
    <item name="windowSplashScreenAnimatedIcon">@mipmap/bootsplash_logo</item>
    <item name="postSplashScreenTheme">@style/AppTheme</item>
  </style>
</resources>

My colors.xml looks like this:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="green">#08ba58</color>
    <color name="black">#000000</color>
    <color name="dark_green">#08776c</color>
</resources>

And my AndroidManifest.xml file:

<manifest
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    package="com.****.****">
    <uses-permission android:name="android.permission.INTERNET"/>
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
    <uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
    <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
    <uses-permission android:name="com.google.android.c2dm.permission.RECEIVE"/>
    <uses-permission android:name="android.permission.VIBRATE"/>
    <uses-permission android:name="android.permission.CAMERA"/>

    <application
        android:name=".MainApplication"
        android:label="@string/app_name"
        android:icon="@mipmap/ic_launcher"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:allowBackup="false"
        android:theme="@style/BootTheme"
        android:networkSecurityConfig="@xml/network_security_config">
        <activity
            android:name=".MainActivity"
            android:label="@string/app_name"
            android:configChanges="keyboard|keyboardHidden|orientation|screenLayout|screenSize|smallestScreenSize|uiMode"
            android:launchMode="singleTask"
            android:windowSoftInputMode="adjustResize"
            android:exported="true"
            android:screenOrientation="portrait">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
            <intent-filter>
                <action android:name="android.intent.action.VIEW" />
                <category android:name="android.intent.category.DEFAULT" />
                <category android:name="android.intent.category.BROWSABLE" />
                <data android:scheme="@string/app_scheme"/>
            </intent-filter>
            <intent-filter>
                <action android:name="android.intent.action.VIEW" />
                <category android:name="android.intent.category.DEFAULT" />
                <category android:name="android.intent.category.BROWSABLE" />
                <data android:scheme="https"
                        android:host="****.****/****"/>
            </intent-filter>
            <intent-filter>
                <action android:name="android.intent.action.VIEW" />
                <category android:name="android.intent.category.DEFAULT" />
                <category android:name="android.intent.category.BROWSABLE" />
                <data android:scheme="https"
                        android:host="****.****/****"/>
            </intent-filter>
        </activity>
        <meta-data android:name="com.google.android.geo.API_KEY" android:value="@string/google_geo_api_key"/>
        <meta-data android:name="com.facebook.sdk.ApplicationId" android:value="@string/facebook_app_id"/>
        <meta-data android:name="com.facebook.sdk.ClientToken" android:value="@string/facebook_client_token"/>
        <meta-data
            android:name="com.google.firebase.messaging.default_notification_icon"
            android:resource="@drawable/ic_stat_ic_notification" />
        <meta-data
            android:name="com.google.firebase.messaging.default_notification_color"
            android:resource="@color/black"
            tools:replace="android:resource" />
        <meta-data
            android:name="com.google.android.gms.wallet.api.enabled"
            android:value="true" />
    </application>
</manifest>

And then I implemented the onCreate function in the MainActivity.java like this:

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    RNBootSplash.init(this);
    super.onCreate(null);
  }

Here is the result:
splashscreen with black background

But the expected result would be something like this (not the real color, not the real icon, but you get the idea):
splashscren with green background

Do you have any idea why is it not working?

Thank you very much!

2

Answers


  1. Did you try to put the color you want in this command, which generates splashscreen

    yarn react-native generate-bootsplash assets/bootsplash_logo_original.png 
      --background-color=F5FCFF 
      --logo-width=100 
    
    Login or Signup to reply.
  2. If the dark mode is bugging you, then you might want to make some changes in the styles.xml (fyi the directory is: android/app/src/main/res/values/styles.xml)

    In my case I have added

    <item name="android:forceDarkAllowed">false</item>

    inside "App Theme" style.
    Hope this gives vision to your problem.

    PS.
    Also I found that in some cases you might have to change the style parent to :

        <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search