Splash screen does not hide

I followed the instructions for this blog for iOS: Building a splash screen in React Native

I was able to get the app built and the splash screen is displayed when open. However, the splash screen never disappears.

Here's the App.tsx file:

/**
* Sample React Native App
* https://github.com/facebook/react-native
*
* @format
*/
import React from 'react';
import type {PropsWithChildren} from 'react';
import {
SafeAreaView,
ScrollView,
StatusBar,
StyleSheet,
Text,
useColorScheme,
View,
} from 'react-native';
import React, { useEffect } from 'react'; //import useEffect();
import SplashScreen from "react-native-splash-screen";
import {
Colors,
DebugInstructions,
Header,
LearnMoreLinks,
ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';
type SectionProps = PropsWithChildren<{
title: string;
}>;
function Section({children, title}: SectionProps): JSX.Element {
const isDarkMode = useColorScheme() === 'dark';
return (
<View style={styles.sectionContainer}>
<Text
style={[
styles.sectionTitle,
{
color: isDarkMode ? Colors.white : Colors.black,
},
]}>
{title}
</Text>
<Text
style={[
styles.sectionDescription,
{
color: isDarkMode ? Colors.light : Colors.dark,
},
]}>
{children}
</Text>
</View>
);
}
function App(): JSX.Element {
const isDarkMode = useColorScheme() === 'dark';
const backgroundStyle = {
backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
};
useEffect(() => {
SplashScreen.hide(); //hides the splash screen on app load.
}, []);
return (
<SafeAreaView style={backgroundStyle}>
<StatusBar
barStyle={isDarkMode ? 'light-content' : 'dark-content'}
backgroundColor={backgroundStyle.backgroundColor}
/>
<ScrollView
contentInsetAdjustmentBehavior="automatic"
style={backgroundStyle}>
<Header />
<View
style={{
backgroundColor: isDarkMode ? Colors.black : Colors.white,
}}>
<Section title="Step One">
Edit <Text style={styles.highlight}>App.tsx</Text> to change this
screen and then come back to see your edits.
</Section>
<Section title="Bye world!">
<ReloadInstructions />
</Section>
<Section title="Debug">
<DebugInstructions />
</Section>
<Section title="Learn More">
Read the docs to discover what to do next:
</Section>
<LearnMoreLinks />
</View>
</ScrollView>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
sectionContainer: {
marginTop: 32,
paddingHorizontal: 24,
},
sectionTitle: {
fontSize: 24,
fontWeight: '600',
},
sectionDescription: {
marginTop: 8,
fontSize: 18,
fontWeight: '400',
},
highlight: {
fontWeight: '700',
},
});
export default App;

As far as I can tell, I've imported the necessary libraries and added in the useEffect function call the way the tutorial explained it. Not sure how to begin to troubleshoot this.

And here is the AppDelegate.mm file:

#import "AppDelegate.h"
#import <React/RCTBundleURLProvider.h>
#import "RNSplashScreen.h"
@implementation AppDelegate
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
self.moduleName = @"AwesomeProject2";
// You can add your custom initial props in the dictionary below.
// They will be passed down to the ViewController used by React Native.
self.initialProps = @{};
[RNSplashScreen show]; 
return [super application:application didFinishLaunchingWithOptions:launchOptions];
}
- (NSURL *)sourceURLForBridge:(RCTBridge *)bridge
{
#if DEBUG
return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index"];
#else
return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
#endif
}
/// This method controls whether the `concurrentRoot`feature of React18 is turned on or off.
///
/// @see: https://reactjs.org/blog/2022/03/29/react-v18.html
/// @note: This requires to be rendering on Fabric (i.e. on the New Architecture).
/// @return: `true` if the `concurrentRoot` feature is enabled. Otherwise, it returns `false`.
- (BOOL)concurrentRootEnabled
{
return true;
}
@end

June 23rd 2023 Solution - React Native "0.72.0" splash screen not hiding AppDelegate.mm

After scraping the "web 2" for a solution, I got it to work using the following...

App.tsx file - import and useEffect

  import SplashScreen from 'react-native-splash-screen';
useEffect(() => {
const ac = new AbortController();
setTimeout(() => {
SplashScreen.hide();
}, 10000);
return function cleanup() {
ac.abort();
};
}, []);

AppDelegate.mm file

#import "AppDelegate.h"
#import <React/RCTBundleURLProvider.h>
#import "RNSplashScreen.h"
@implementation AppDelegate
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
self.moduleName = @"Closer";
// You can add your custom initial props in the dictionary below.
// They will be passed down to the ViewController used by React Native.
self.initialProps = @{};
[super application:application didFinishLaunchingWithOptions:launchOptions];
[RNSplashScreen show];
return YES;
}
- (NSURL *)sourceURLForBridge:(RCTBridge *)bridge
{
#if DEBUG
return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index"];
#else
return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
#endif
}
@end

That's all folks! 😜

I have this exact problem, and it seems like we're not alone (Source 1, Source 2). It appears that the library is no longer maintained (Source 3, Source 4).

Consider switching to react-native-bootsplash. It has worked perfectly for me. It appears to be the new standard.

I have the exact same problem.
Calling [RNSplashScreen show]; right before the return YES; which is the solution for some also does not solve this.

Even hiding the splash screen explicitly like this

-(void)applicationDidBecomeActive:(UIApplication *)application 
{
[RNSplashScreen hide];
}

does not hide the splash screen. This appeared for me all of a sudden after upgrading react-native and it seems to be a problem for many, as Daniels proposes I think bootsplash is the way to go.

This worked for me.

Mentioned here: (https://github.com/crazycodeboy/react-native-splash-screen/issues/71#issuecomment-1743383657)

[RNSplashScreen show];  return [super application:application didFinishLaunchingWithOptions:launchOptions];

to

BOOL ret = [super application:application didFinishLaunchingWithOptions:launchOptions]; if (ret == YES) { [RNSplashScreen show];  } return ret;

I encountered this issue with:
"react-native": "0.72.4"
"react-native-splash-screen": "^3.3.0"