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

LaunchImage is not hiding in iOS

Open aditya27dev opened this issue 7 years ago • 38 comments

Hello,

On the android platform splash screen is working fine. But on the iOS platform, splash screen is not hiding. Please guide.

export default class Main extends Component {
  componentDidMount() {
    SplashScreen.hide();
  }
  render() {
    return (
      <View>
      </View>
    );
  }
}

aditya27dev avatar Aug 21 '17 06:08 aditya27dev

+1

danieljvdm avatar Sep 19 '17 18:09 danieljvdm

+1 I'm using iOS 11 and react-native-splash-screen 3.0.1

rsml avatar Sep 28 '17 17:09 rsml

The problem I was having was that I was calling [SplashScreen show]; too early in my AppDelegate. Make sure it's after the call to [self.window makeKeyAndVisible];

danieljvdm avatar Sep 29 '17 03:09 danieljvdm

I really have been removed after

[self.window makeKeyAndVisible];

but also the same problem, splash screen is not hiding, I'm using iOS 10.3 and react-native-splash-screen 3.0.1 react-native 0.44.3

jweboy avatar Sep 30 '17 08:09 jweboy

Hi , can someone help me out. I can't get the splashscreen working for iOS, I get black screen. I am not sure if I have set it up correctly on iOS. There is only an example for customizing splashscreen on iOS.

YasirSherzad avatar Nov 01 '17 11:11 YasirSherzad

@YasirPanjsheri show your code of AppDelegate.m、Info.plist and Images.xcassets.

presentra avatar Nov 03 '17 13:11 presentra

has this problem was solved?

IvanzZ0814 avatar Nov 08 '17 09:11 IvanzZ0814

It's not a problem... it's just incorrect usage. If you want help post your AppDelegate.m applicationDidLaunch code function

danieljvdm avatar Nov 08 '17 20:11 danieljvdm

+1 Using "react-native":"0.47.2" and "react-native-splash-screen":"^3.0.6"! The screen does not disappear after calling SplashScreen.hide() in componentDidMount() function in my LoginScreen. Here is my AppDelegate.m

#import "AppDelegate.h"
#import <React/RCTBundleURLProvider.h>
#import <React/RCTRootView.h>
#import "SplashScreen.h"
@implementation AppDelegate
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  NSURL *jsCodeLocation;
  jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index.ios" fallbackResource:nil];
  RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                                      moduleName:@"MyApp"
                                               initialProperties:nil
                                                   launchOptions:launchOptions];
  rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1];
  self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
  UIViewController *rootViewController = [UIViewController new];
  rootViewController.view = rootView;
  self.window.rootViewController = rootViewController;
  [self.window makeKeyAndVisible];
  [SplashScreen show];
  return YES;
}
@end

Here is my LoginScreen.js (as part of StackNavigator of react-navigation):

const AuthNavigator = StackNavigator(
  {
    LoginScreen: {screen: Login},
    RegisterScreen: {screen: Register}
  },
  {
    initialRouteName: 'LoginScreen',
    headerMode: 'none'
  }
)
...
class LoginScreen extends React.Component {
  componentDidMount() {
    setTimeout(SplashScreen.hide(), 3000)
  }
  ...
}

Any help?

ghost avatar Nov 19 '17 23:11 ghost

@ralcon likely you haven't linked the library properly. Are you sure you ran react-native link react-native-splash-screen?

danieljvdm avatar Nov 20 '17 20:11 danieljvdm

This is the output:

myName:MyApp (feature/BlaBlaBla *)$ react-native link react-native-splash-screen
Scanning 1157 folders for symlinks in /Users/myName/DEV/projects/MyApp/node_modules (9ms)
rnpm-install info Android module react-native-splash-screen is already linked
rnpm-install info iOS module react-native-splash-screen is already linked

I'm on a mac. Are there any known issues or problems? I will try to follow the instructions of a manual installation. Maybe this helps?! I will give you an info...

ghost avatar Nov 21 '17 18:11 ghost

same here, I have got the same problem, splash screen doesn't disappear

6axter82 avatar Nov 24 '17 15:11 6axter82

@ralcon I have deleted the ios directory in my project with rm -rf ios, than react-native eject, after react-native link.

This helped me and now everything is fine.

6axter82 avatar Nov 30 '17 17:11 6axter82

If I add the splash screen through LaunchScreen.xib then this library works like a charm. But if I add splash screen images in Images.xcassets then splash screen is not hiding.

aditya-simplecrm avatar Dec 18 '17 10:12 aditya-simplecrm

If I add the splash screen through LaunchScreen.xib then this library works like a charm. But if I add splash screen images in Images.xcassets then splash screen is not hiding.

Same here. But for my use case, i need to use images.xcassets instead of LaunchScreen.

tikkichan4 avatar Jan 11 '18 03:01 tikkichan4

@tikkichan4 try to do the suggestion from the Nov 30, 2017 above.

6axter82 avatar Jan 18 '18 10:01 6axter82

I remove [SplashScreen show] in my native code , then found some error in my js code; that is the real reason for it; sorry , my english is very poor; holp it can help

HelloHxz avatar Feb 06 '18 02:02 HelloHxz

The iOS implementation of this library creates a semi-blocking loop which is dangerous depending on where you instantiate it.

I'm not entirely sure how this is all working, but from what I understand: Black screen Try making sure you call [SplashScreen show] specifically inside the didFinishLaunchingWithOptions lifecycle method.

Splash screen won't hide Move where you put the [SplashScreen show] until after the React Native view is already created, else the splash screen's blocking loop never allows React Native to be instantiated. You might have to put both the React Native view creation also inside the didFinishLaunchingWithOptions, and before the splash screen show.

christophermark avatar Mar 21 '18 20:03 christophermark

@christophermark What's the "React Native view creation"?

mileung avatar Apr 12 '18 07:04 mileung

@MiLeung it's when you create and assign the RCTRootView, the native view which holds the React Native view.

https://facebook.github.io/react-native/docs/integration-with-existing-apps.html#the-magic-rctrootview

christophermark avatar Apr 12 '18 12:04 christophermark

now anyone could solve this issue, give me some help? waiting answer on line.

841660202 avatar May 06 '18 14:05 841660202

So, I had the same exact issue, this is how I fixed it. Seems a bit glitchy in my emulator, will test on actual device.

change -> DidMount to -> WillMount

componentWillMount() { SplashScreen.hide(); }

"react": "^16.3.2", "react-native": "^0.55.4"

UPDATE

While this will work, if you have an authenticated space (login/logout) with tokens, which allows the app to not always fire from the initial launch screen, the splash screen still remains and does not hide. Currently exploring additional options.

UPDATE PART 2

Ok, so if your app has the potential to launch from different screens (login screen/another screen) you'll need to import RN Splash Screen and hide on both screens. Component Did Mount does not work for me on my launch screen; it does work on my other "interior" screen. Component Will Mount works everywhere.

wincod75 avatar May 18 '18 03:05 wincod75

I had this issue, but because of an issue nothing to do with this library 🙈

Just in case anyone else is in the same boat - check that your root component doesn't have a render error! The splash screen hides react-native's default red screen error, so you might not notice properly.

If your component has a render error, then your componentDidMount() { SplashScreen.hide() } never gets called! 😨

If you're using React 16, you can make this a little less confusing by changing your code to this:

componentDidMount() {
  SplashScreen.hide();
}

componentDidCatch() {
  SplashScreen.hide();
}

stephencookdev avatar Oct 19 '18 10:10 stephencookdev

@danieljvdm This worked for me, this issue needs to be documented in the readme @crazycodeboy

VinceBT avatar Nov 07 '18 14:11 VinceBT

edit: nvm, my issue was an export issue. I forgot to place 'default', when i changed my root set up. So when i imported it to the file where i register the app, it wasn't exporting correctly. Oops.

DISKONEKTeD avatar Dec 16 '18 10:12 DISKONEKTeD

@aditya-simplecrm did you manage to solve the issue you were facing? I am also facing the same issue, where I have to use the image assets instead of the LaunchScreen.xib. Any help would be appreciated.

ShaharyarMaroof avatar Nov 06 '19 04:11 ShaharyarMaroof

I've tried @wincod75 and @stephencookdev 's solution. But none of them are working. I'm using react-native 0.60.6 and react-native-splash-screen 3.2.0. For android it is working perfectly.

In my AppDelegate file I have the required lines in the following order.

[self.window makeKeyAndVisible]; [RNSplashScreen show];

The async calls execute fine, but the splash screen doesn't hide. Any help will be appreciated.

ShaharyarMaroof avatar Nov 06 '19 13:11 ShaharyarMaroof

@ShaharyarMaroof Do this simple test... remove [RNSplashScreen show]; from your appdelegate file, rebuild your app and see what happens. I rediscovered this issue after upgrading to RN 61 and thought it was the splash screen not hiding, but I had other errors preventing the splash screen from hiding. Once i removed the [RNSplashScreen show]; and could identify and resolve my console errors, I added [RNSplashScreen show]; back and it works fine.

wincod75 avatar Jan 22 '20 04:01 wincod75

@wincod75 have added try catch block in my CDM component. No errors, but SplashScreen is still not hiding.

povilasDadelo avatar Aug 27 '20 08:08 povilasDadelo

@wincod75 have added try catch block in my CDM component. No errors, but SplashScreen is still not hiding.

Getting any errors Xcode? Checked your pods/using pods? Ironically my splash screen was failing to hide today and I ended up back here, but yet again the issue was errors in RN, not this package.

wincod75 avatar Aug 28 '20 20:08 wincod75