useSafeAreaInsets emits too many results during device rotation

Because of the device performance issue, the repeated emission of the same insets or useless emission from useSafeAreaInsets should be skipped.

When I rotated my device with iPhone X, the console printed out like the following.

AS-IS

[Tue Jan 26 2021 11:40:03.498]  LOG      openFullScreen
[Tue Jan 26 2021 11:40:03.512]  LOG      {"bottom": 34, "left": 0, "right": 0, "top": 44}
[Tue Jan 26 2021 11:40:04.220]  LOG      {"bottom": 21, "left": 44, "right": 0, "top": 0}
[Tue Jan 26 2021 11:40:04.267]  LOG      {"bottom": 21, "left": 44, "right": 0, "top": 0}
[Tue Jan 26 2021 11:40:04.644]  LOG      {"bottom": 21, "left": 44, "right": 0, "top": 0}
[Tue Jan 26 2021 11:40:04.930]  LOG      {"bottom": 0, "left": 0, "right": 0, "top": 0}
[Tue Jan 26 2021 11:40:05.251]  LOG      {"bottom": 0, "left": 44, "right": 0, "top": 0}
[Tue Jan 26 2021 11:40:05.558]  LOG      {"bottom": 21, "left": 44, "right": 44, "top": 0}
[Tue Jan 26 2021 11:40:05.827]  LOG      {"bottom": 21, "left": 44, "right": 44, "top": 0}

[Tue Jan 26 2021 11:40:08.221]  LOG      closeFullScreen
[Tue Jan 26 2021 11:40:08.325]  LOG      {"bottom": 21, "left": 44, "right": 44, "top": 0}
[Tue Jan 26 2021 11:40:08.491]  LOG      {"bottom": 0, "left": 0, "right": 0, "top": 44}
[Tue Jan 26 2021 11:40:08.793]  LOG      {"bottom": 0, "left": 0, "right": 0, "top": 44}
[Tue Jan 26 2021 11:40:09.234]  LOG      {"bottom": 0, "left": 0, "right": 0, "top": 44}
[Tue Jan 26 2021 11:40:09.394]  LOG      {"bottom": 0, "left": 0, "right": 0, "top": 0}
[Tue Jan 26 2021 11:40:09.677]  LOG      {"bottom": 0, "left": 0, "right": 0, "top": 44}
[Tue Jan 26 2021 11:40:09.956]  LOG      {"bottom": 34, "left": 0, "right": 0, "top": 44}
[Tue Jan 26 2021 11:40:10.364]  LOG      {"bottom": 34, "left": 0, "right": 0, "top": 44}

The 6 emissions of the processing are useless and cause performance issues because every layout of components is re-calculated with each inset values.

TO-BE

[Tue Jan 26 2021 11:40:03.498]  LOG      openFullScreen
[Tue Jan 26 2021 11:40:03.512]  LOG      {"bottom": 34, "left": 0, "right": 0, "top": 44}
[Tue Jan 26 2021 11:40:05.827]  LOG      {"bottom": 21, "left": 44, "right": 44, "top": 0}

[Tue Jan 26 2021 11:40:08.221]  LOG      closeFullScreen
[Tue Jan 26 2021 11:40:08.325]  LOG      {"bottom": 21, "left": 44, "right": 44, "top": 0}
[Tue Jan 26 2021 11:40:10.364]  LOG      {"bottom": 34, "left": 0, "right": 0, "top": 44}

[denotter]

Having the same issue here. Did anyone find a solution yet?

[mym0404]

In my case, I just made native module for me. There are several files and verbose codes but If you need you can use it. These codes are written with Swift Native Module. If you need to learn how to use Swift for Native Module in RN, look my sample project, documentation.

This module reduces some ignorable event emission but not 100%

SafeArea.swift

@objc(SafeAreaModule)
class SafeAreaModule: RCTEventEmitter{
  static var shared: SafeAreaModule? = nil
  static func viewSafeAreaInsetsDidChange(){
    guard let shared = SafeAreaModule.shared else { return }
    guard shared.getWindow() != nil else { return }
    shared.sendEvent(shared.getSafeAreaInsets())
  }
  
  // MARK: - RCTEventEmitter
  override func supportedEvents() -> [String]! {
    return ["viewSafeAreaInsetsDidChange"]
  }
  
  private func sendEvent(_ insets: Dictionary<String, Int>){
    guard bridge != nil else { return }
    self.sendEvent(withName: "viewSafeAreaInsetsDidChange", body: insets)
  }
  
  @objc
  override func constantsToExport() -> [AnyHashable: Any]!{
    return [:]
  }
  
  @objc
  override static func requiresMainQueueSetup() -> Bool {
    return true
  }
  
  override init() {
    super.init()
    SafeAreaModule.shared = self
  }
  
  @objc func getSafeAreaInsets(_ resolve: @escaping RCTPromiseResolveBlock, reject: @escaping RCTPromiseRejectBlock){
    DispatchQueue.main.async { [weak self] in
      guard let self = self else {
        reject("self not found", "self not found", nil)
        return
      }
      resolve(self.getSafeAreaInsets())
    }
  }
  
  private func getSafeAreaInsets() -> Dictionary<String, Int>{
    var ret = ["top": 0, "bottom": 0, "left": 0, "right": 0]
    let window = getWindow()
    
    if let insets = window?.safeAreaInsets{
      ret["top"] = Int(insets.top)
      ret["bottom"] = Int(insets.bottom)
      ret["left"] = Int(insets.left)
      ret["right"] = Int(insets.right)
    }
    
    return ret
  }
  
  private func getWindow() -> UIWindow?{
    if #available(iOS 13.0, *) {
      return UIApplication.shared.windows[0]
    }else{
      return UIApplication.shared.keyWindow
    }
  }
}

MainViewController.swift

import UIKit

class MainViewController : UIViewController{}

// MARK: -Lifecycle
extension MainViewController{
  override func viewDidLoad() {
    super.viewDidLoad()
  }
  
  override func viewSafeAreaInsetsDidChange() {
    SafeAreaModule.viewSafeAreaInsetsDidChange()
  }
  override func viewDidLayoutSubviews() {
  }
}

Appdelegate.m

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
#if DEBUG && TARGET_OS_SIMULATOR
  InitializeFlipper(application);
#endif
  ...
  
  RCTBridge *bridge = [[RCTBridge alloc] initWithDelegate:self launchOptions:launchOptions];
  
  NSDictionary *appProperties = [RNFBMessagingModule addCustomPropsToUserProps:nil withLaunchOptions:launchOptions];
  
  RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge
                                                   moduleName:@"MathKing"
                                            initialProperties:appProperties];
  
  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 = [MainViewController new];
  rootViewController.view = rootView;
  self.window.rootViewController = rootViewController;
  [self.window makeKeyAndVisible];
  
  return YES;
}

Modules.m

@interface RCT_EXTERN_MODULE(SafeAreaModule, RCTEventEmitter)
RCT_EXTERN_METHOD(
                  getSafeAreaInsets: (RCTPromiseResolveBlock)resolve
                  reject: (RCTPromiseRejectBlock)reject
                  )
@end

SafeAreaModuleIOS.ts

import { NativeEventEmitter, NativeModules } from 'react-native';

import { EdgeInsets } from 'react-native-safe-area-context';

const COMPONENT_NAME = 'SafeAreaModule';

const NativeSafeAreaModule = NativeModules[COMPONENT_NAME];
const EventEmitter = new NativeEventEmitter(NativeSafeAreaModule);

type Listener = (insets: EdgeInsets) => void;
class SafeAreaModuleIOS {
  private subscription;
  private listeners: Listener[] = [];

  constructor() {
    this.subscription = EventEmitter.addListener('viewSafeAreaInsetsDidChange', (event: EdgeInsets) => {
      this.listeners.forEach((listener: Listener) => {
        listener(event);
      });
    });
  }

  addListener(listener: Listener) {
    this.listeners.push(listener);
  }

  removeListener(listener: Listener) {
    const idx = this.listeners.indexOf(listener);
    if (idx === -1) {
      return;
    }
    this.listeners.splice(idx, 1);
  }

  async getSafeAreaInsets(): Promise<EdgeInsets> {
    return NativeSafeAreaModule.getSafeAreaInsets();
  }
}

export default new SafeAreaModuleIOS();

useSafeAreaInsets.ios.ts

import { useCallback, useEffect, useState } from 'react';

import { EdgeInsets } from 'react-native-safe-area-context';
import SafeAreaModuleIOS from './SafeAreaModuleIOS';
import { SentryWrapper } from '../log/SentryWrapper';
import { useMount } from '../../hooks/useMount';

export default function useSafeAreaInsets() {
  const [insets, setInsets] = useState<EdgeInsets>({ top: 0, bottom: 0, left: 0, right: 0 });
  const listener = useCallback((insets: EdgeInsets) => {
    setInsets(insets);
  }, []);

  useMount(() => {
    SafeAreaModuleIOS.getSafeAreaInsets()
      .then(setInsets)
      .catch((e) => {
        SentryWrapper.throw('safe area not found', e);
      });
  });

  useEffect(() => {
    SafeAreaModuleIOS.addListener(listener);
    return () => {
      SafeAreaModuleIOS.removeListener(listener);
    };
  }, [listener]);

  return insets;
}