React-native-navigation: Properly Setting the Splash Screen

[joecaraccio]

I've noticed, using the activity splash screen.. it still doesn't really achieve the same desired effect of a true splashscreen.

In the splash activity, I tried setting the splashscreen that way

  @Override
  public LinearLayout createSplashLayout() {
        LinearLayout view = new LinearLayout(this);
         view.setBackgroundColor(Color.parseColor("#42A5F5"));
         view.setGravity(Gravity.CENTER);

}

However there will still be a white flash, at least on Android. My response to that was to then set the app theme to that color as well. Although, the issue with this is on certain components, or say when the keyboard opens, you can see this blue background briefly

so, I guess the TLDR is does anyone have a solution we reflects that true native splash screen feel, no white splash

[aMarCruz]

@joecaraccio , this worked for me:

android/app/src/main/res/drawable/splash.xml

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@color/primaryColor"/>
    <item>
        <bitmap
            android:gravity="center"
            android:src="@drawable/app_logo"/>
    </item>
</layer-list>

android/app/src/main/res/values/styles.xml

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="colorPrimary">@color/primaryColor</item>
        <item name="colorPrimaryDark">@color/primaryDarkColor</item>
        <item name="colorAccent">@color/primaryLightColor</item>
        <item name="android:statusBarColor">@color/statusbarColor</item>
        <item name="android:windowBackground">@color/primaryColor</item>
    </style>

    <style name="SplashScreen" parent="AppTheme">
        <item name="android:windowBackground">@drawable/splash</item>
    </style>

</resources>

android/app/src/main/AndroidManifest.xml (partial)

    <application
        android:name=".MainApplication"
        android:label="@string/app_name"
        android:icon="@mipmap/ic_launcher"
        android:theme="@style/AppTheme">
        <activity
            android:name=".MainActivity"
            android:label="@string/app_name"
            android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
            android:theme="@style/SplashScreen"
   ...

android/app/src/main//MainActivity.java (partial)

import android.view.View;
import com.reactnativenavigation.controllers.SplashActivity;

public class MainActivity extends SplashActivity {

  @Override
  public View createSplashLayout() {
    return new View(this);   // <====== TO AVOID WHITE BACKGROUND
  }
  ...

My first screen' background is the primaryColor (#4269d2), by returning a transparent view in createSplashLayout we avoids the default white background and we have a pretty fade-effect.

[pqkluan]

Hey, I just wrote a detail article about implementing Splash Screen with RNN.

@joecaraccio If you still have trouble Splash Screen, then follow the guide would help, and please close the issue after done with the problem.

[pqkluan]

I'll close this issue, assuming the problem was solved. Feel free to re-open if needed.

[joecaraccio]

@pqkluan
That splash screen "works", but the issue is it still be out of place with native apps.
On Android specifically, to avoid the white flash that you see before the React Native Splashscreen activity starts we set the background color of the app to the same color of our splash screen.

The big issue with that, and its not really something you'd expect, is if you are using something such as a keyboard view, when the keyboard pops up youll see a flash of color (in our case blue, our background color) as you'' briefly see the android background

Do you think this is just unavoidable and just might be one of the few drawbacks of using react native? trying to think of a solution

[pqkluan]

@joecaraccio You are right. I don't notice the brief white flash before the splash screen shown up.

I tried to set the native background color as you said and it works perfectly. You just need to add the background color for each screen to avoid the drawback.

navigatorStyle: { screenBackgroundColor: "white" },

If you are using some kind of global style using HOC for all screens then it will be a quick fix. Good luck.

[joecaraccio]

@pqkluan Have you tried it with the keyboard?
I'm not getting the same results, when the keyboard disappears you can see white but some sort of border as well

How exactly did you set this up?

[joecaraccio]

I see like white background with a white box

[pqkluan]

I tried to add TextInput to test but can't find the issue. Here is the gif

[joecaraccio]

@pqkluan ahh, yeah but for text input you'll draw ocer the screen with the keyboard

My issue is with the keyboardavoidview for something like a chat box, you'll see a flash of the black background

[danialdezfouli]

where do you defined @color/primaryColor ?
@sturmenta

[sturmenta]

@eagle-design This may be useful to you

const startApp = () => Navigation.startSingleScreenApp({
  screen: {
    screen: 'myschool.login',
    navigatorStyle: {
      navBarHidden: true,
      screenBackgroundColor: 'black',
    },
    animationType: 'fade'
  }
});

https://wix.github.io/react-native-navigation/#/screen-api?id=pushparams

[sturmenta]

White screen before and after splash screen GIF

I already try putting default color to each screen, but it does not work for me.
Any other possible solution?

[tkulpa]

Hey @pqkluan you have typo in your article, in MainActivity.java at line 13, there should be

launch_screen

instead of

launch_screen_bitmap

:smile_cat:

[pqkluan]

Hi @tkulpa, do you mean this line?

 Drawable launch_screen_bitmap = ContextCompat.getDrawable(getApplicationContext(),R.drawable.launch_screen_bitmap);

R.drawable.launch_screen_bitmap is for the xml layout file I created in step 2, launch_screen is the asset file name that use as a background in launch_screen_bitmap.xml.

That was my thought, if I still wrong, please help me point it out.

[aMarCruz]

@eagle-design put your colors in android/app/src/main/res/values/colors.xml. By example:

<resources>
  <color name="colorPrimary">#4269d2</color>
  <color name="colorPrimaryDark">#324f9e</color>
  <color name="colorAccent">#8fc4ee</color>
</resources>

The Google Color Tool can help you choose the right scheme.

@sturmenta, @joecaraccio , a dark background must be set in a earlier step as the time the JS code is executed is already very late. See my comment.

The drawback is this background will be in effect throughout the life of the App and this is why you see the undesired flashings with the keyboard, unless you change it with something like:

    @ReactMethod
    public void resetBackground(final String color) {
        final Activity activity = getCurrentActivity();

        if (activity != null) {
            activity.runOnUiThread(new Runnable() {
                @Override
                public void run() {
                    try {
                        final int code = android.graphics.Color.parseColor(color);
                        final View view = activity.getWindow().getDecorView();
                        view.setBackground(null);
                        view.setBackgroundColor(code);
                    } catch (Exception e) {
                        Log.e(TAG, "Unable to set background: " + e.getMessage());
                    }
                }
            });
        } else {
            Log.d(TAG, "Unable to set background, there's no activity.");
        }
    }

I'm not sure if this works with RNN, currently I'm using react-navigation, but I hope this helps ...and it's understandable, my language is not English :)

[tkulpa]

@pqkluan yes this line, my app was crashing, errors were about not being able to find resource launch_screen_bitmap, i changed name to launch_screen and everything worked

[ikhsanalatsary]

yup, same issue as @tkulpa

[pqkluan]

@ikhsanalatsary Do you have this file in your project?

launch_screen_bitmap.xml

[ikhsanalatsary]

@pqkluan yes i have

[pqkluan]

@ikhsanalatsary That is weird since my example project was set up using launch_screen_bitmap.xml layout.

If you are using the lauch_screen, it's just the splash screen assets. If there are not assets that match the device dimension ratio, there will be white spaces at the border of the screen (default activity background color).

I know there must be something wrong with the article walkthrough since there is more than one person encounter the problem.

[crankeye]

I had the same issue with it crashing complaining about launch_screen_bitmap. I looked deeper into the stack trace and found out the issue was actually the default rgba(0,0,0,0) in app/src/main/res/values/colors.xml.

You have to make sure you use a hex color code instead of the default rgba:

app/src/main/res/values/colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <item name="splashBackground" type="color">#323A4D</item>
</resources>

[pqkluan]

@crankeye Thanks a lot for pointing out this. I have updated the article after your insight.

[GodVampire]

splash question troubled me a few days. find here very luck. RNN Splash Screen Example help me.

but like @joecaraccio say. use keyboard have white background with a white box(I change colors.xml splashBackground to #fff).
I set navigatorStyle: { screenBackgroundColor: "white" }, the best I could. but it not work for me.
maybe not because of it cause. just I think

I need solve other question as soon as possible. :)

Thanks to the open source.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
If you believe the issue is still relevant, please test on the latest version and report back. Thank you for your contributions.

[stale[bot]]

The issue has been closed for inactivity.

[sturmenta]

Answering my old comment

When making another application I realized my old mistake. I miss putting:

    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        ...
        <item name="android:windowBackground">@color/black</item>
    </style>

Following the steps shown in video and with the help of @aMarCruz I was able to achieve a perfect dark splash screen in react-native-navigation

[ikhsanalatsary]

thanks @crankeye, it works now 👍