SplashScreen.show() not working on app state change.

I need to show a splash screen when my app state was changed to inactive or background, but unfortunately, it’s not working.

Anyone faced with this issue?

---

react-native info results:

System:
    OS: macOS 12.2.1
    CPU: (8) x64 Intel(R) Core(TM) i5-1038NG7 CPU @ 2.00GHz
    Memory: 61.12 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 14.17.6 - ~/.nvm/versions/node/v14.17.6/bin/node
    Yarn: 1.22.17 - ~/.nvm/versions/node/v14.17.6/bin/yarn
    npm: 8.1.4 - ~/.nvm/versions/node/v14.17.6/bin/npm
    Watchman: Not Found
  Managers:
    CocoaPods: 1.11.2 - /usr/local/bin/pod
  SDKs:
    iOS SDK:
      Platforms: DriverKit 21.0.1, iOS 15.0, macOS 12.0, tvOS 15.0, watchOS 8.0
    Android SDK:
      API Levels: 30, 32
      Build Tools: 30.0.2, 32.0.0, 32.1.0, 33.0.0
      System Images: android-31 | Google APIs Intel x86 Atom_64
      Android NDK: Not Found
  IDEs:
    Android Studio: 2021.1 AI-211.7628.21.2111.8193401
    Xcode: 13.1/13A1030d - /usr/bin/xcodebuild
  Languages:
    Java: 17.0.2 - /usr/bin/javac
  npmPackages:
    @react-native-community/cli: Not Found
    react: ^17.0.2 => 17.0.2 
    react-native: ^0.67.3 => 0.67.3 
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

---

I’m using the following packages versions:

Package Name.	Version
react-native-splash-screen	3.3.0
react	17.0.2
react-native	0.67.3

---

The issue occurs on both platforms.

---

My code:

import React, { useEffect, useCallback } from "react";
import { AppState, AppStateStatus } from "react-native";
import SplashScreen from "react-native-splash-screen";
import Navigation from "./Navigation";

function App() {
  const onAppStateChange = useCallback((nextAppState: AppStateStatus) => {
    if (nextAppState !== "active") {
      SplashScreen.show(); // <--- not working
    } else {
      SplashScreen.hide();
    }
  }, []);

  useEffect(() => {
    SplashScreen.hide();

    const subscription = AppState.addEventListener("change", onAppStateChange);
    return () => {
      subscription.remove();
    };
  }, []);

  return <Navigation />;
}

export default App;

[Adnan-Bacic]

i tried to the the same thing recently and had the same problem.

so for your specific problem i would say you should just remove all the AppState functionality. is there a specific reason you NEED to show the splash screen when the appstate changes? probably not. i personally just call .hide() once and that is it, i have never had to use .show().

so i would just simplify it:

import React, { useEffect } from "react";
import SplashScreen from "react-native-splash-screen";
import Navigation from "./Navigation";

function App() {
  useEffect(() => {
    SplashScreen.hide();
  }, []);

  return <Navigation />;
}

export default App;

[bigorangemachine]

any update here ?

No.

show() getting deprecated and new android version doesn’t work good with onPause.

Looks like react native needs to upgrade to kotlin or maybe a plugin kotlin with co-routines would work.