iOS 15 app ui keep breaking after few hour kept in background

Description

Hello everyone.

I have an issue with an iOS react-native app after the iOS 15 upgrade but with not a crash. If someone opens the app after ~1 hour from the last time he/she opened it, the app skips the SplashScreen, and after that nothing renders correctly. The positioning and order of components are wrong. also only happens in some devices like iPhone 12 pro max running 15.1.1 any help would be highly appreciated I’m counting on these forms other than that there is no way to debug such an issue or to put any log because even log will not identify issuethe

Version

61.3

Output of react-native info

System: OS: macOS 11.5.2 CPU: (8) x64 Intel® Core™ i7-4870HQ CPU @ 2.50GHz Memory: 1.85 GB / 16.00 GB Shell: 5.8 - /bin/zsh Binaries: Node: 15.3.0 - /usr/local/bin/node Yarn: 1.22.10 - /usr/local/bin/yarn npm: 6.14.9 - /usr/local/bin/npm Watchman: 4.9.0 - /usr/local/bin/watchman SDKs: iOS SDK: Platforms: iOS 14.5, DriverKit 20.4, macOS 11.3, tvOS 14.5, watchOS 7.4 IDEs: Android Studio: 4.0 AI-193.6911.18.40.6514223 Xcode: 12.5/12E262 - /usr/bin/xcodebuild npmPackages: react: ^16.9.0 => 16.9.0 react-native: 0.61.3 => 0.61.3 npmGlobalPackages: react-native-cli: 2.0.1 react-native-rename: 2.4.1

Steps to reproduce

Keep the app in background for more than 1 hour and reopen to reproduce in iPhone 12 pro max iOS 15.1.1

Snack, code example, screenshot, or link to a repository

No response

[vietnd2307]

@dhairyasenjaliya 0.66.4

[jonathan-k4]

For everyone following the thread as I was…

The issue seems to be with a change in iOS 13 with the app lifecycle. AppDelegate is no longer responsible for creating a window, but rather SceneDelegate should be used. The bad rendering seems to be related to the addition of “pre-warming” in iOS 15. Here is how we solved it in our React Native 0.63 app (we also have modules that would require updating)

Add a SceneDelegate to your app for iOS 13+

#import "SceneDelegate.h"
#import "AppDelegate.h"

@implementation SceneDelegate

- (void)scene:(UIScene *)scene willConnectToSession:(UISceneSession *)session options:(UISceneConnectionOptions *)connectionOptions  API_AVAILABLE(ios(13.0)){
  
  if (@available(iOS 13.0, *)) {
    
    
    //for iOS 13+, use the new scene manager
    AppDelegate *appDelegate = (AppDelegate*)[UIApplication sharedApplication].delegate;
    UIWindow *window = [[UIWindow alloc] initWithWindowScene:(UIWindowScene *)scene];
    [appDelegate load:window];
  }

    
}

@end

Modify AppDelegate to only initialize window on older versions. For convenience, we moved our init code to a single method that both AppDelegate and SceneDelegate can share:

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  
  self.launchOptions = launchOptions; 
  
  if (@available(iOS 13.0, *)) { } else {
    
    //only use old app delegate for iOS 12 and below. Newer uses SceneDelegate to create window

    UIWindow *window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
    [self load:window];
    
  }
  
  return YES;
}

//common window setup code that is share between AppDelegate and SceneDelegate

- (void) load:(UIWindow*) window
{
  
  RCTBridge *bridge = [[RCTBridge alloc] initWithDelegate:self launchOptions:self.launchOptions];
  RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge
                                                   moduleName:@"k4-member-app"
                                            initialProperties:nil];

  rootView.backgroundColor = [[UIColor alloc] initWithRed:0.04f green:0.13f blue:0.19f alpha:1];
  self.window = window;
  UIViewController *rootViewController = [UIViewController new];
  rootViewController.view = rootView;
  self.window.rootViewController = rootViewController;
  [self.window makeKeyAndVisible];

  
}