Splash screen does not hide

Question

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

Hengel

Answer 1

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();
    }, 1000); <<<==== SET YOUR PREFERRED TIMEOUT!

    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"; <<<==== CHANGE TO YOUR PROJECT NAME!
  // 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! 😜

Revenant

just changing the AppDelegate.mm file code as suggested worked. Didn't have to use setTimeout for hiding the splashscreen. Dependencies: "react-native": "0.73.6", "react": "18.2.0", "react-native-splash-screen": "^3.3.0", – Nymphet

Answer 2

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"

Ouch

Answer 3

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.

Pathological

Answer 4

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.

Vaso

Answer 5

Add this in your AppDelegate.mm

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  self.moduleName = @"GrandPrixInfo";
  // 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 = @{};
  bool didFinish=[super application:application  didFinishLaunchingWithOptions:launchOptions];
  [RNSplashScreen show];   
  return didFinish;        
}

Doggoned

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Edelsten

Answer 6

Change this line on AppDelegete.mm

[RNSplashScreen show]; 

to

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

Franklinfranklinite