Unable to hide Splash Screen on app load

Description:

I am attempting to replace the black loading screen (on app start) with a customized loading indicator, using the react-native-splash-screen package. I’m currently implementing it on Android, but will later do the same for iOS. I’ve tried following the instructions and am able to display the customized screen on starting the app, but I am unable to hide it (after the app has loaded) to resume functionality of the app.

Steps to reproduce:

1. installed package ‘npm install react-native-splash-screen’
2. included the project in android/settings.gradle

include ':react-native-splash-screen'
project(':react-native-splash-screen').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-splash-screen/android')

1. added the dependency in android/app/build.gradle

implementation project(':react-native-splash-screen')

1. created a layout file launch_screen.xml as required by the ‘react-native-splash-screen’ package

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/background_splash"
    android:gravity="center">

    <ProgressBar
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="200dp" />

</LinearLayout>

1. modified the MainActivity (in the overridden onCreate method) to show the customized screen before super.onCreate(savedInstance); // this works fine as I am able to show the customized screen

import org.devio.rn.splashscreen.SplashScreen;

@Override
protected void onCreate(Bundle savedInstanceState) {
    SplashScreen.show(this);
    super.onCreate(savedInstanceState);
}

1. Attempting to hide the screen in React Native code in componentDidMount() - tried in many different places but without success i.e. BaseApp.js, AbstractApp.js, App.native.js, WelcomePage.native.js, etc. // this does not work

Expected behavior:

The customized screen should hide once the app is loaded, redirecting to the WelcomePage.native.js

Actual behavior:

The customized screen is shown while the app is loading, but I get a TypeError: Cannot read property ‘hide’ of null as shown in the image below once it has loaded. I’ve tried the same in a simple React Native app and it works flawlessly.

Server information:

• Jitsi Meet version: current
• Operating System: Ubuntu 20.04 LTS

[saghul]

Looks like you haven’t linked the react-native-splash-screen library correctly. Our project has a bit of an unusual layout, so you need to do it manually. You need to add the package to this list: https://github.com/jitsi/jitsi-meet/blob/fc75d45c6cb16ac2e0917ba03da35342587c1d53/android/sdk/src/main/java/org/jitsi/meet/sdk/ReactInstanceManagerHolder.java#L186-L199

[saghul]

Glad you got it solved!