React-native-navigation: [v2] [Android] How should I config custom splash screens?

[gabrielvcbessa]

I want a simple white splash screen with my app logo centralized. I was easy to do on iOS, because you just need to make some changes on XCode, but how can I do it on Android? Should I change my NavigationApplication?

---

Environment

• React Native Navigation version: 0.55.1
• React Native version: 2.0.2275
• Platform(s) (iOS, Android, or both?): FILL THIS OUT
• Device info (Simulator/Device? OS version? Debug/Release?): FILL THIS OUT

[ilovett]

I'd like to see it work with a splash activity like in this article:

https://medium.com/handlebar-labs/how-to-add-a-splash-screen-to-a-react-native-app-ios-and-android-30a3cec835ae

        <activity
            android:name=".SplashActivity"
            android:theme="@style/SplashTheme"
            android:label="@string/app_name">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>

        <activity
          android:name=".MainActivity"
          android:label="@string/app_name"
          android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
          android:windowSoftInputMode="adjustResize"
          android:exported="true"
        />

When MainActivity launches just leave the SplashActivity still showing until the js app bootstraps and the first Navigation.setRoot is called... hide the splash at that point...

[cihancil]

v1 had a function called createSplashLayout which worked great for me.

I couldn't find an equivalent of that for v2.

NavigationActivity class needs similar function. In case if I try to set my own contentview, NavigationActivity overrides this with this line of code.

setContentView(navigator.getView());

[ilovett]

While it's nice to get Splash integration "for free" with react native navigation, the resulting android splash screen in v1 had a short moment of white screen when launching. The SplashActivity will show the splash screen immediately without any white screen.

[gabrielvcbessa]

@ilovett Do you have an example using SplashActivity and RNN?

[ilovett]

@gabrielvcbessa No I don't but I was hoping the v2 would offer some easy way to hook into it, or launch in the background while SplashActivity is showing and delay taking the screen over until setRoot is called

[GuillotJessica]

@gabrielvcbessa did you figured this out on rnn v2, btw you mixed up rn version and rnn version

[jinshin1013]

@guyca Is there an equivalent api for creating or getting the splash screen like we did on V1. On V2, documentation is missing about controlling splash screen. V2 Playground it seems like on MainApplcation.java file, it calls FragmentCreator?

[phuongwd]

@gabrielvcbessa

[email protected] https://github.com/wix/react-native-navigation/commit/4adc1485a3cb939e5ab173bf438e25719f5a2dac

[sytolk]

Thanks @phuongwd it works!

[FeniXenAaaa]

Guys, does someone have any guide on how to implement splash screen with RNN v2? I tried to use this plugin and my splash is shown but looks like something crashes inside so I don't have ability to hide it (even JS debugger doesn't start).

I can't see splashscreen example in v2 playground project (and I couldn't launch it locally).
How to setup splashscreen in RNN v2?

[guyca]

You can override onCreate in your MainActivity and set the splash screen using setContentView

public class MainActivity extends NavigationActivity {
    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.splash);
    }
}

[ammichael]

If anyone is still having this issue after migrating from v1, this worked for me:

public class MainActivity extends NavigationActivity {
  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(this.createSplashLayout());
  }

  public LinearLayout createSplashLayout() {
    LinearLayout splash = new LinearLayout(this);
    Drawable launch_screen_bitmap = ContextCompat.getDrawable(getApplicationContext(), R.drawable.launch_screen);
    splash.setBackground(launch_screen_bitmap);

    return splash;
  }
}

[rendomnet]

have problems?
import android.os.Bundle;

and R.layout.splash . <--- splash is the name of layout xml in your android/app/src/res/layout folder

[Johncy1997]

Someone tell me, how to change the splash screen layout based on my i18n.locale.

[evaldsurtans]

Right now there is an overridable function for this purpose:

public class MainActivity extends NavigationActivity {

    @Override
    protected void addDefaultSplashLayout() {
        LinearLayout splash = new LinearLayout(this);
        Drawable splash_background = ContextCompat.getDrawable(getApplicationContext(), R.drawable.splash_background);
        splash.setBackground(splash_background);
        setContentView(splash);
    }

}

Optional timeout:
node_modules/
..com/reactnativenavigation/NavigationActivity.java

   @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        addDefaultSplashLayout();
        navigator = new Navigator(this, new ChildControllersRegistry(), new ModalStack(this), new OverlayManager(), new RootPresenter(this));
        navigator.bindViews();

    }

    @Override
    public void onPostCreate(@Nullable Bundle savedInstanceState) {
        SystemClock.sleep(1000 * 5);
        getReactGateway().onActivityCreated(this);
        super.onPostCreate(savedInstanceState);
        navigator.setContentLayout(findViewById(android.R.id.content));
    }

res/drawable/splash_background.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:tools="http://schemas.android.com/tools"
    xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@android:color/white" />

    <item
        android:width="170dp"
        android:height="122dp"
        android:gravity="center"
        android:drawable="@drawable/src_resources_branding"
        />

</layer-list>

[juddey]

Just to add to add to @evaldsurtans solution, the following imports are required in MainActivity:

```
import android.graphics.drawable.Drawable;
import android.support.v4.content.ContextCompat;
import android.widget.LinearLayout;
````

[Asim13se]

@juddey For RN 0.60+ these are the new imports:

import android.graphics.drawable.Drawable;
import androidx.core.content.ContextCompat;
import android.widget.LinearLayout;