I am currently in the process of meeting Apple's updated developer guidelines for a React Native mobile app. The hangup for me has been with using a storyboard for the launch screen.
Overview
The production version of the app is using react-native-splash-screen to handle the splash screen, which is just the company logo. I noticed that the package last had an update published a year ago, so I would like to get away from it and handle the splash screen natively.
Current State
I created a storyboard with Xcode and dropped the package from the repo. I made a few changes to AppDelegate.m, and I was able to display the splash screen for a set period of time. I ultimately don't want to use a timer, I want to hide the splash screen once all of the launch time network calls are finished.
Solution (?)
After combing through articles and posts, I came across what I think is the solution. It was a post on r/reactnative from a couple years back: https://www.reddit.com/r/reactnative/comments/754y5g/app_flashing_white_after_launch_screen_on_ios_11/
The OP had found a solution and added it in a comment. The idea is to edit the AppDelegate.m provided by RN to replace the white screen with the same .xib as the launch screen.
I have a .storyboard and not an .xib
Their example has a slightly different AppDelegate.m than the app's.
I don't know a lick of Objective-C
So, my search continued and I found the following post from stackoverflow: React-Native iOS - How to show a view controller after Launch screen, before initialising react native bridge (iOS)
I refactored based on this post and was able to get to my current state.
Code
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions{ UIStoryboard *storyboard = [UIStoryboard storyboardWithName:@"LaunchScreen" bundle:[NSBundle mainBundle]]; UIViewController *backgroundView = [storyboard instantiateViewControllerWithIdentifier:@"LaunchViewController"]; RCTBridge *bridge = [[RCTBridge alloc] initWithDelegate:self launchOptions:launchOptions]; RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge moduleName:@"fakeAppName" initialProperties:nil]; rootView.backgroundColor = [UIColor clearColor];// changed color to clearColor UIViewController *rootViewController = [UIViewController new]; rootViewController.view = rootView; self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds]; self.window.rootViewController = backgroundView; [self.window makeKeyAndVisible]; dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(3 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{ self.window.rootViewController = rootViewController; }); return YES;}Question
How can I display a splash screen after the launch screen storyboard to cover the time between tapping the app icon and the completion of the loading of the app?
Additionally, I want splash screen and launch screen to be the same storyboard so that it is a seamless transition from loading to the home screen.
As I said, I don't know Objective-C and have been at a bit of a loss with debugging this. Can anyone offer suggestions or point me to resources that could help me out here?
Self Defense
I used alternating terminology of splash screen and launch screen because Apple identifies them as 2 different things. As I understand it, launch screen is for OS loading of the app and splash screen is for initial in-app loading.
I have also seen quite a few strong opinions on splash screens. The app has initial network calls that require a short loading period, thus I use a splash screen to cover that loading. I are not using it just for the sake of having the logo in your face for longer.
I am familiar with another RN package called react-native-bootsplash. I am trying to avoid using a package all together, which is why I am pursuing this solution in the first place.