[iOS] Accessing RNSScreenView from a native module/component

[justblender]

I've recently implemented Picture-in-Picture video playback in the app that I'm currently working on, and meanwhile it works fine, there's one thing that stands out and crushes my inner perfectionist - it obstructs core UI elements such as tab & app bars.

The fix for this is pretty simple. Parent UIViewController has a property additionalSafeAreaInsets, which extends base safe area inset (which covers the notch and home indicator on iPhone X and later) and instructs how system UI elements should position themselves relative to app contents.

Modifying rootViewController is a no-go - this results in a shifted layout of the entire app.
But modifying screen's UIViewController in attachScreen does the job.

diff --git a/node_modules/react-native-screens/ios/RNSScreenContainer.m b/node_modules/react-native-screens/ios/RNSScreenContainer.m
index 06bc4e5..4541853 100644
--- a/node_modules/react-native-screens/ios/RNSScreenContainer.m
+++ b/node_modules/react-native-screens/ios/RNSScreenContainer.m
@@ -127,6 +127,8 @@ - (void)attachScreen:(RNSScreenView *)screen atIndex:(NSInteger)index
   // the frame is already set at this moment because we adjust it in insertReactSubview. We don't
   // want to update it here as react-driven animations may already run and hence changing the frame
   // would result in visual glitches
+  UIEdgeInsets newSafeArea = UIEdgeInsetsMake(0, 0, 50, 0);
+  screen.reactViewController.additionalSafeAreaInsets = newSafeArea;
   [_controller.view insertSubview:screen.controller.view atIndex:index];
   [screen.controller didMoveToParentViewController:_controller];
   [_activeScreens addObject:screen];

This doesn't look pretty and I can't programatically update the insets.

❓ Is there a way to get access to a currently mounted screen and its view controller from an internal native module/component?

Not sure what fits best in this scenario, but I guess that implementing a native component is a better way to go with this problem, since then I could try to find and modify only the screen that renders it.

[WoLewicki]

Can't you add a new prop to Screen component and use it on the native side to update Screen's view controller?

[justblender]

You imply by that patch-packaging react-native-screens, which is not something that I want 😒 I'm looking for a way to find Screen's view controller in a "standalone" way, without modifying existing packages.

I've tried many ways to find that controller manually, including by looping through UIResponder's given that I have UIView instance from a custom component, but none of my work.

But I guess you're right, maybe it's just worth to create a PR that adds support for additionalSafeAreaInsets ib RNS.

[WoLewicki]

Oh, so you want to get to the current top view controller from another library? If so, maybe the best way to do so is traversing the hierarchy of controllers (by correctly calling childViewControllers on UIViewController and topViewController on UINavigationController) from the rootViewController, which you should be able to access easily. Another approach is, if you have a native component that is a child of RNSScreenView, won't calling reactViewController on it return the RNSScreen object?

[39otrebla]

@WoLewicki I have the same question but for a different scenario. We do use [email protected] and [email protected] and we need to present a UIViewController from a React Native module.

We are able to get the current top-most ViewController (code below), but when we then call .present(thirdPartyVC, animated: true) we get the following error:

[Presentation] Attempt to present <UIViewController: 0x7f842b715a70> on <UIViewController: 0x7f841f2093e0> (from <UIViewController: 0x7f841f2093e0>) whose view is not in the window hierarchy.

So I thought it would have been much better if we could access/use react-native-screens's native NavigationController implementation, and present our native UIViewController as its rootViewController. Would it be possible? And, if not, what is the correct way to show native UIViewControllers or Activity/Fragment when using react-navigation/react-native-screens?

The code for accessing top-most view controller

extension UIApplication {
  static func getTopMostController(_ fallbackTo: UIViewController? = nil) -> UIViewController? {
    let viewController = fallbackTo ?? UIApplication.shared.windows.first(where: { window in
      return window.isKeyWindow
    })?.rootViewController
    
    if let tab = viewController as? UITabBarController {
      if let selected = tab.selectedViewController {
        return getTopMostController(selected)
      }
    }
    
    if let nav = viewController as? UINavigationController {
      return getTopMostController(nav.visibleViewController)
    }
    
    if let presented = viewController?.presentedViewController {
      return getTopMostController(presented)
    }
    
    return viewController
  }
}

[WoLewicki]

I am not sure why such error happens. Could you check if this <UIViewController: 0x7f841f2093e0> is the rootViewController? If so, it seems really weird that his view would not be in the view hierarchy 😅 The only reason I can think of is currently being in a fullScreenModal which would need to be handled in a different way.

[39otrebla]

@WoLewicki I'm indeed inside a fullScreenModal.

[WoLewicki]

I think the VC traversal code you posted lacks checking childViewControllers of the VC. We add our controllers to the rootViewController as a simple childViewController, so I would add a check at the end for if the controller has child VCs and iterate over them too, but it might be tricky. Did you try calling reactViewController in the view you are at and see if it does not return the proper value?

[39otrebla]

@WoLewicki Just wanted to let you know that we eventually found another issue in our code and the above works as expected, even inside a fullScreenModal. Going to open the same question for Android though (pushing fragments, not activities).