App runs but does not show splash screen. Calling hide() gives error: Cannot read property 'hide' of null

[bakedchim]

Run react-native info in your project and share the content.

System:
OS: Windows 10 10.0.19044
CPU: "(12) x64 AMD Ryzen 5 3600X 6-Core Processor "
Memory: 1.30 GB / 15.91 GB
Binaries:
Node:
version: 18.17.1
path: C:\Program Files\nodejs\node.EXE
Yarn: Not Found
npm:
version: 9.6.7
path: C:\Program Files\nodejs\npm.CMD
Watchman: Not Found
SDKs:
Android SDK: Not Found
Windows SDK:
AllowAllTrustedApps: Disabled
IDEs:
Android Studio: AI-223.8836.35.2231.10671973
Visual Studio: Not Found
Languages:
Java: 11.0.20
Ruby: Not Found
npmPackages:
"@react-native-community/cli": Not Found
react:
installed: 18.2.0
wanted: 18.2.0
react-native:
installed: 0.72.4
wanted: 0.72.4
react-native-windows: Not Found
npmGlobalPackages:
"react-native": Not Found
Android:
hermesEnabled: true
newArchEnabled: false
iOS:
hermesEnabled: Not found
newArchEnabled: Not found

What react-native-splash-screen version are you using?

3.3.0

What platform does your issue occur on? (Android/iOS/Both)

Android

Describe your issue as precisely as possible :

1. Steps to reproduce the issue or to explain in which case you get the issue
   I did all the steps of the installation process and example usage except the linking part (because of autolinking).
   I added the splash component, hid all of my other screens, and commented out the hide() function to see if the app could show the splash screen, but it only showed a white screen. After adding the hide() function, the app showed an error: Cannot read property 'hide' of null.
   I also tried manual linking but it did not work either.
2. Interesting logs

Join a screenshot or video of the problem on the simulator or device?

Show us the code you are using?
It's basically the same code provided in the installation guide without the manual linking.

[mienpv10]

Facing the same issue with
Android:
hermesEnabled: true
newArchEnabled: true
Any help?

[ZoranRavic]

That part of code is usually very simple:

import SplashScreen from 'react-native-splash-screen';

SplashScreen.hide();

If you are using the default import like this it should work.

If you are getting an error that SplashScreen is null then something is just wrong with the way you are importing the module.

[Karthik-V26]

Hey @bakedchim,
Did you find any solution? I am also facing the same issue.

[bakedchim]

@Karthik-V26 Sorry for the late reply. I reversed the installation and did it on another machine and somehow everything worked. Not sure what was the problem because I did the same thing again without any changes. I was lucky I was not deep into the changes so I could reverse them.

[Sakib-203-15-3883]

import SplashScreen from 'react-native-splash-screen';

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

// I face the same problem, now it,s works for me

[gabrieledore]

Try this:

useEffect(() => {
// Hide the splash screen after 2 seconds
const timer = setTimeout(() => {
if(SplashScreen){
SplashScreen.hide();
}
}, 2000);

// Clear the timer on component unmount
return () => clearTimeout(timer);

}, []);