react-native: iOS 15 app ui keep breaking after few hour kept in background

@dhairyasenjaliya 0.66.4

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];

  
}

@ciaoamigoschat I dont find any workaround but still, you can do one thing like listen to background events like when minimize your app and reopen the app again at that same time you can refresh the entire page by adding some logic that re-renders the entire screen or maybe key props to the parent component