react-native-splash-screen icon indicating copy to clipboard operation
react-native-splash-screen copied to clipboard

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

Open bakedchim opened this issue 10 months ago • 6 comments

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.

bakedchim avatar Sep 12 '23 07:09 bakedchim

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

mienpv10 avatar Sep 18 '23 10:09 mienpv10

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.

ZoranRavic avatar Nov 08 '23 10:11 ZoranRavic

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

Karthik-V26 avatar Dec 05 '23 10:12 Karthik-V26

@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.

bakedchim avatar Jan 10 '24 18:01 bakedchim

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

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

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

Sakib-203-15-3883 avatar Mar 01 '24 05:03 Sakib-203-15-3883

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);

}, []);

gabrieledore avatar Apr 04 '24 09:04 gabrieledore