@apexnative/navigation 0.0.0-stage → 1.0.0-alpha.0

package/ios/React/ANNReactViewCreator.mm

@@ -0,0 +1,42 @@
+#import "ANNReactViewCreator.h"
+#import "ANNAssert.h"
+#import "ANNReactView.h"
+#import "ANNSlotContainers.h"
+#import "ANNSlotScreenView.h"
+#import "ApexNavigation+Internal.h"
+
+@implementation ANNReactViewCreator {
+    ANNEventEmitter *_eventEmitter;
+}
+
+- (instancetype)initWithEventEmitter:(ANNEventEmitter *)eventEmitter {
+    if (self = [super init]) {
+        _eventEmitter = eventEmitter;
+    }
+    return self;
+}
+
+- (UIView<ANNComponentProtocol> *)createComponentView:(NSString *)name
+                                          componentId:(NSString *)componentId
+                                        componentType:(ANNComponentType)componentType
+                                  reactViewReadyBlock:
+                                      (ANNReactViewReadyCompletionBlock)reactViewReadyBlock {
+    ANNAssertMainQueue();
+    RCTHost *host = [ApexNavigation getHost];
+    // A screen of the one React tree: the slot screen view starts the tree's host with it.
+    if (host && componentType == ANNComponentTypeComponent && [name hasPrefix:ANNSlotPrefix]) {
+        return [[ANNSlotScreenView alloc] initWithComponentId:componentId
+                                                         name:name
+                                                         host:host
+                                                 eventEmitter:_eventEmitter
+                                          reactViewReadyBlock:reactViewReadyBlock];
+    }
+    return [[ANNReactView alloc] initWithHost:host
+                                  componentId:componentId
+                                         name:name
+                                componentType:componentType
+                                 eventEmitter:_eventEmitter
+                          reactViewReadyBlock:reactViewReadyBlock];
+}
+
+@end

package/ios/React/ANNSafeAreaViewComponentView.h

@@ -0,0 +1,13 @@
+#import <React/RCTViewComponentView.h>
+
+NS_ASSUME_NONNULL_BEGIN
+
+/// The safe area view (`ANNSafeAreaView`): keeps its content out of its screen's safe area, by a padding in the layout.
+@interface ANNSafeAreaViewComponentView : RCTViewComponentView
+
+/// The screen is rendered into the view, also when it renders nothing (`null`).
+@property(nonatomic, readonly) BOOL contentRendered;
+
+@end
+
+NS_ASSUME_NONNULL_END

package/ios/React/ANNSafeAreaViewComponentView.mm

@@ -0,0 +1,153 @@
+#import "ANNSafeAreaViewComponentView.h"
+#import "ANNScreenInsets.h"
+#import "ANNScreenReadiness.h"
+#import "../cpp/react/renderer/components/ApexNavigationSpec/ANNSafeAreaViewComponentDescriptor.h"
+#import <React/RCTConversions.h>
+
+using namespace facebook::react;
+
+@implementation ANNSafeAreaViewComponentView {
+    ANNSafeAreaViewShadowNode::ConcreteState::Shared _state;
+    NSString *_screenId;
+    BOOL _readySent;
+    // The screen heard that its content rendered.
+    BOOL _contentRenderedSent;
+}
+
++ (ComponentDescriptorProvider)componentDescriptorProvider {
+    return concreteComponentDescriptorProvider<ANNSafeAreaViewComponentDescriptor>();
+}
+
+- (instancetype)initWithFrame:(CGRect)frame {
+    if (self = [super initWithFrame:frame]) {
+        static const auto defaultProps = std::make_shared<const ANNSafeAreaViewProps>();
+        _props = defaultProps;
+        [NSNotificationCenter.defaultCenter addObserver:self
+                                               selector:@selector(paddingDidChange:)
+                                                   name:ANNScreenSafeAreaPaddingDidChangeNotification
+                                                 object:nil];
+    }
+    return self;
+}
+
+- (void)dealloc {
+    [NSNotificationCenter.defaultCenter removeObserver:self];
+}
+
+- (void)updateProps:(const Props::Shared &)props oldProps:(const Props::Shared &)oldProps {
+    const auto &newProps = static_cast<const ANNSafeAreaViewProps &>(*props);
+    _screenId = RCTNSStringFromStringNilIfEmpty(newProps.screenId);
+    // The screen's readiness comes from this view, never from its root's children.
+    if (_screenId != nil) {
+        [ANNScreenReadiness screenHasSafeAreaView:_screenId];
+    }
+    _contentRendered = newProps.contentRendered;
+    [super updateProps:props oldProps:oldProps];
+    [self applyPadding];
+    if (_contentRendered) {
+        [self sendContentRendered];
+    }
+}
+
+// Without the flag (a wrapper that doesn't give it), the first children mounted tell that the content rendered.
+- (void)mountChildComponentView:(UIView<RCTComponentViewProtocol> *)childComponentView
+                          index:(NSInteger)index {
+    [super mountChildComponentView:childComponentView index:index];
+    [self sendContentRendered];
+}
+
+// The screen's container waits for it: once, by the screen's id.
+- (void)sendContentRendered {
+    if (_contentRenderedSent || _screenId == nil) {
+        return;
+    }
+    _contentRenderedSent = YES;
+    [ANNScreenReadiness screenContentDidRender:_screenId];
+}
+
+- (void)updateState:(const State::Shared &)state oldState:(const State::Shared &)oldState {
+    _state = std::static_pointer_cast<const ANNSafeAreaViewShadowNode::ConcreteState>(state);
+    [self applyPadding];
+}
+
+- (void)paddingDidChange:(NSNotification *)notification {
+    if ([notification.object isEqual:_screenId]) {
+        [self applyPadding];
+    }
+}
+
+// The padding of the screen goes to the state, which lays the view out with it.
+- (void)applyPadding {
+    if (_state == nullptr || _screenId == nil) {
+        return;
+    }
+    UIEdgeInsets padding = [ANNScreenInsets paddingForScreenId:_screenId];
+    EdgeInsets insets{.left = (Float)padding.left,
+                      .top = (Float)padding.top,
+                      .right = (Float)padding.right,
+                      .bottom = (Float)padding.bottom};
+    if (insets != _state->getData().padding) {
+        _state->updateState(ANNSafeAreaViewState{insets});
+    }
+}
+
+- (void)updateEventEmitter:(const EventEmitter::Shared &)eventEmitter {
+    [super updateEventEmitter:eventEmitter];
+    [self sendReadyIfLaidOut];
+}
+
+- (void)didMoveToSuperview {
+    [super didMoveToSuperview];
+    [self sendReadyIfLaidOut];
+}
+
+- (void)didMoveToWindow {
+    [super didMoveToWindow];
+    [self sendReadyIfLaidOut];
+}
+
+- (void)layoutSubviews {
+    [super layoutSubviews];
+    [self sendReadyIfLaidOut];
+}
+
+- (void)safeAreaInsetsDidChange {
+    [super safeAreaInsetsDidChange];
+    [self sendReadyIfLaidOut];
+}
+
+// The screen renders its content once this view is laid out in its place with a size, as
+// react-native-safe-area-context does: a list that is there before the first layout of the top bar
+// makes UIKit start the large title collapsed. The preload window of tabs attached together has no
+// size: a tab renders its content where it shows.
+- (void)sendReadyIfLaidOut {
+    if (_readySent || _eventEmitter == nullptr || self.superview == nil) {
+        return;
+    }
+    if (self.waitsForReadiness && (self.window == nil || CGRectIsEmpty(self.window.bounds) ||
+                                   CGSizeEqualToSize(self.frame.size, CGSizeZero))) {
+        return;
+    }
+    _readySent = YES;
+    std::static_pointer_cast<const ANNSafeAreaViewEventEmitter>(_eventEmitter)->onReady({});
+    if (_screenId != nil) {
+        [ANNScreenReadiness screenDidLayOut:_screenId];
+    }
+}
+
+// The core answers by the id: a screen waits for its layout; a component of a bar (title, button, background) or the
+// item of a tab renders at once, as it did before; it shows with the bar.
+- (BOOL)waitsForReadiness {
+    return _screenId == nil || [ANNScreenReadiness screenWaitsForReadiness:_screenId];
+}
+
+- (void)prepareForRecycle {
+    [super prepareForRecycle];
+    _state.reset();
+    _screenId = nil;
+    _readySent = NO;
+    _contentRenderedSent = NO;
+    _contentRendered = NO;
+}
+
+@end

package/ios/React/ANNSurfaceHostingView.h

@@ -0,0 +1,17 @@
+#import <React/RCTSurfaceHostingView.h>
+
+NS_ASSUME_NONNULL_BEGIN
+
+/// The view that hosts the React surface of a screen or component the core makes (`ANNReactView`). React Native takes
+/// the traits of any hosting view as the app's color scheme (`RCTAppearance`); this view passes a trait change on only
+/// when its interface style is its window's, so the app's theme follows the window alone. Without a window it passes
+/// every change on.
+@interface ANNSurfaceHostingView : RCTSurfaceHostingView
+
+/// Called at each mount of the hosted surface: after a change of the surface's size, the first one lays the surface
+/// out again, so a render that was on its way during the change doesn't keep the old size's layout.
+- (void)surfaceDidMount;
+
+@end
+
+NS_ASSUME_NONNULL_END

package/ios/React/ANNSurfaceHostingView.mm

@@ -0,0 +1,68 @@
+#import "ANNSurfaceHostingView.h"
+#import <React/RCTFabricSurface.h>
+
+@implementation ANNSurfaceHostingView {
+    // The surface was given a new size since its last mount.
+    BOOL _surfaceSizeChanged;
+}
+
+// React Native 0.87 posts the hosting view's traits as the app's scheme from here (`RCTSurfaceHostingView.mm`). On
+// iOS 26 the glass of a bar switches the style of the views under it, and without this filter the app's whole theme
+// switched while a list scrolled under the bar. A change the window shares too passes: the window's style changed.
+- (void)traitCollectionDidChange:(UITraitCollection *)previousTraitCollection {
+    UIWindow *window = self.window;
+    if (window &&
+        self.traitCollection.userInterfaceStyle != window.traitCollection.userInterfaceStyle) {
+        return;
+    }
+    [super traitCollectionDidChange:previousTraitCollection];
+}
+
+#pragma mark - The surface's size
+
+// React Native gives the surface its size here. A size change is noted for the next mount (see below). The note is
+// put aside during the call: the change's own commit mounts inside it and must not take an earlier note, or a size
+// that changes every frame (a sheet dragged between detents, a window resized) would lay out three times a frame. A
+// layout that changes nothing keeps the earlier note for the render still on its way.
+- (void)layoutSubviews {
+    RCTFabricSurface *surface = [self fabricSurface];
+    CGSize minimumSize = surface.minimumSize;
+    CGSize maximumSize = surface.maximumSize;
+    BOOL sizeChangedBefore = _surfaceSizeChanged;
+    _surfaceSizeChanged = NO;
+    [super layoutSubviews];
+    BOOL sizeChanged = surface && (!CGSizeEqualToSize(minimumSize, surface.minimumSize) ||
+                                   !CGSizeEqualToSize(maximumSize, surface.maximumSize));
+    _surfaceSizeChanged = sizeChanged || sizeChangedBefore;
+}
+
+// A React commit that JavaScript started before the size change lands after it with children laid out for the old
+// size, and React Native keeps their layout: the root has the new size, but the children are clean (`YogaLayoutable
+// ShadowNode::updateYogaChildren` checks their style only), so nothing lays them out again until the next change of
+// the size (a rotation with a render on its way — a pop from a landscape screen, a JavaScript reload in landscape —
+// left a tab's root laid out for landscape in portrait). At the first mount after a size change the surface lays out
+// once more: a maximum one point taller and back. Both commits lay out the whole tree (a change of the constraints
+// dirties the root) and give the same frames as the exact size: the root's minimum holds it at the size. They mount on
+// the main queue inside these calls, so nothing in between reaches the screen.
+- (void)surfaceDidMount {
+    if (!_surfaceSizeChanged) {
+        return;
+    }
+    _surfaceSizeChanged = NO;
+    RCTFabricSurface *surface = [self fabricSurface];
+    if (!surface) {
+        return;
+    }
+    CGSize minimumSize = surface.minimumSize;
+    CGSize maximumSize = surface.maximumSize;
+    [surface setMinimumSize:minimumSize
+                maximumSize:CGSizeMake(maximumSize.width, maximumSize.height + 1)];
+    [surface setMinimumSize:minimumSize maximumSize:maximumSize];
+}
+
+- (nullable RCTFabricSurface *)fabricSurface {
+    id surface = self.surface;
+    return [surface isKindOfClass:RCTFabricSurface.class] ? surface : nil;
+}
+
+@end

package/ios/React/Slots/ANNSlotComponentView.h

@@ -0,0 +1,10 @@
+#import <React/RCTViewComponentView.h>
+
+NS_ASSUME_NONNULL_BEGIN
+
+/// A slot of the app's React tree (`ANNSlot`). It stays in the hidden host with nothing of its own; its children move
+/// into the container with the same slot id (`nativeID`), and lay out at the container's size.
+@interface ANNSlotComponentView : RCTViewComponentView
+@end
+
+NS_ASSUME_NONNULL_END

package/ios/React/Slots/ANNSlotComponentView.mm

@@ -0,0 +1,122 @@
+#import "ANNSlotComponentView.h"
+#import "ANNSlotContainers.h"
+#import "ANNSlotContentView.h"
+#import "ANNSlotHost.h"
+#import "../../cpp/react/renderer/components/ApexNavigationSpec/ANNSlotComponentDescriptor.h"
+#import <React/RCTConversions.h>
+#import <React/RCTFabricSurface.h>
+
+using namespace facebook::react;
+
+@implementation ANNSlotComponentView {
+    // The React children live here. It waits hidden inside the slot, then moves into the container.
+    ANNSlotContentView *_contentView;
+    ANNSlotShadowNode::ConcreteState::Shared _state;
+    BOOL _observing;
+    // The layout that measures the content was asked for once.
+    BOOL _measureAsked;
+}
+
++ (ComponentDescriptorProvider)componentDescriptorProvider {
+    return concreteComponentDescriptorProvider<ANNSlotComponentDescriptor>();
+}
+
+- (instancetype)initWithFrame:(CGRect)frame {
+    if (self = [super initWithFrame:frame]) {
+        static const auto defaultProps = std::make_shared<const ANNSlotProps>();
+        _props = defaultProps;
+        // The children belong to the surface of the app's tree, wherever the content view shows them.
+        _contentView = [[ANNSlotContentView alloc] initWithSurface:ANNSlotHost.surface];
+        _contentView.hidden = YES;
+        _contentView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
+    }
+    return self;
+}
+
+- (void)dealloc {
+    [NSNotificationCenter.defaultCenter removeObserver:self];
+}
+
+- (void)updateProps:(const Props::Shared &)props oldProps:(const Props::Shared &)oldProps {
+    [super updateProps:props oldProps:oldProps];
+    if (!_observing) {
+        _observing = YES;
+        [NSNotificationCenter.defaultCenter addObserver:self
+                                               selector:@selector(containerDidChange:)
+                                                   name:ANNSlotContainerDidChangeNotification
+                                                 object:nil];
+    }
+    [self attachContent];
+}
+
+- (void)updateState:(const State::Shared &)state oldState:(const State::Shared &)oldState {
+    _state = std::static_pointer_cast<const ANNSlotShadowNode::ConcreteState>(state);
+    [self attachContent];
+}
+
+- (void)containerDidChange:(NSNotification *)notification {
+    if ([notification.object isEqual:self.nativeId]) {
+        [self attachContent];
+    }
+}
+
+- (void)attachContent {
+    UIView *container = self.nativeId ? [ANNSlotContainers containerForSlotId:self.nativeId] : nil;
+    UIView *target = container ?: self;
+    if (_contentView.superview != target) {
+        _contentView.frame = target.bounds;
+        [target addSubview:_contentView];
+    }
+    _contentView.hidden = container == nil;
+    [self contentDidMount];
+
+    // Fabric lays the children out at the size in the state (ANNSlotComponentDescriptor::adopt). A container that
+    // measures the content gets one layout more for it, with the same size, until the height came.
+    if (container != nil && _state != nullptr) {
+        auto size = RCTSizeFromCGSize(container.bounds.size);
+        std::string slotId = self.nativeId.UTF8String ?: "";
+        BOOL measures = !_measureAsked && !slotId.empty() &&
+                        ANNSlotContentHeights::isRequested(slotId) &&
+                        ANNSlotContentHeights::height(slotId) < 0;
+        if (size.width > 0 && size.height > 0 && (!(size == _state->getData().size) || measures)) {
+            _measureAsked = _measureAsked || measures;
+            _state->updateState(ANNSlotState{size});
+        }
+    }
+}
+
+- (void)mountChildComponentView:(UIView<RCTComponentViewProtocol> *)childComponentView index:(NSInteger)index {
+    [_contentView insertSubview:childComponentView atIndex:index];
+    [self contentDidMount];
+}
+
+// The container learns once it shows the content.
+- (void)contentDidMount {
+    UIView *container = _contentView.superview;
+    if (container != self && _contentView.subviews.count > 0 &&
+        [container conformsToProtocol:@protocol(ANNSlotContainer)]) {
+        [(id<ANNSlotContainer>)container slotContentDidMount];
+    }
+}
+
+- (void)unmountChildComponentView:(UIView<RCTComponentViewProtocol> *)childComponentView index:(NSInteger)index {
+    [childComponentView removeFromSuperview];
+}
+
+// The slot itself stays in the host with nothing to touch.
+- (UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event {
+    return nil;
+}
+
+// A recycled slot waits for another screen: it stops listening and drops the old screen's state.
+- (void)prepareForRecycle {
+    [super prepareForRecycle];
+    [NSNotificationCenter.defaultCenter removeObserver:self];
+    _observing = NO;
+    _measureAsked = NO;
+    _state.reset();
+    [_contentView removeFromSuperview];
+    _contentView.hidden = YES;
+}
+
+@end

package/ios/React/Slots/ANNSlotContainers.h

@@ -0,0 +1,34 @@
+#import <UIKit/UIKit.h>
+
+NS_ASSUME_NONNULL_BEGIN
+
+/// Posted when the container of a slot appears or changes its size; the object is the slot id.
+extern NSNotificationName const ANNSlotContainerDidChangeNotification;
+
+/// A component named with this prefix is a screen of the app's one React tree: it has no React surface of its own,
+/// and the slot of the tree with its componentId shows it. Events and the state give its name without the prefix.
+extern NSString *const ANNSlotPrefix;
+
+/// The name a component is known by in the events: without the slot prefix.
+NSString *ANNComponentNameWithoutSlotPrefix(NSString *name);
+
+/// A container that hears when the content of its slot mounted: the screen counts as shown once it did.
+@protocol ANNSlotContainer <NSObject>
+- (void)slotContentDidMount;
+@end
+
+/// The native containers the slots of the app's React tree show their children in, by slot id. A destroyed
+/// container drops out on its own.
+@interface ANNSlotContainers : NSObject
+
++ (void)setContainer:(UIView *)container forSlotId:(NSString *)slotId;
++ (nullable UIView *)containerForSlotId:(NSString *)slotId;
+/// The container goes: its slot takes its content back.
++ (void)removeContainerForSlotId:(NSString *)slotId;
+
+/// The container of a slot appeared or changed its size.
++ (void)containerDidChange:(NSString *)slotId;
+
+@end
+
+NS_ASSUME_NONNULL_END

package/ios/React/Slots/ANNSlotContainers.mm

@@ -0,0 +1,39 @@
+#import "ANNSlotContainers.h"
+
+NSNotificationName const ANNSlotContainerDidChangeNotification = @"ANNSlotContainerDidChange";
+NSString *const ANNSlotPrefix = @"slot:";
+
+NSString *ANNComponentNameWithoutSlotPrefix(NSString *name) {
+    return [name hasPrefix:ANNSlotPrefix] ? [name substringFromIndex:ANNSlotPrefix.length] : name;
+}
+
+@implementation ANNSlotContainers
+
++ (NSMapTable<NSString *, UIView *> *)containers {
+    static NSMapTable *containers;
+    static dispatch_once_t once;
+    dispatch_once(&once, ^{
+      containers = [NSMapTable strongToWeakObjectsMapTable];
+    });
+    return containers;
+}
+
++ (void)setContainer:(UIView *)container forSlotId:(NSString *)slotId {
+    [self.containers setObject:container forKey:slotId];
+    [self containerDidChange:slotId];
+}
+
++ (UIView *)containerForSlotId:(NSString *)slotId {
+    return [self.containers objectForKey:slotId];
+}
+
++ (void)removeContainerForSlotId:(NSString *)slotId {
+    [self.containers removeObjectForKey:slotId];
+    [self containerDidChange:slotId];
+}
+
++ (void)containerDidChange:(NSString *)slotId {
+    [NSNotificationCenter.defaultCenter postNotificationName:ANNSlotContainerDidChangeNotification object:slotId];
+}
+
+@end

package/ios/React/Slots/ANNSlotContentView.h

@@ -0,0 +1,12 @@
+#import <React/RCTSurfaceView.h>
+
+NS_ASSUME_NONNULL_BEGIN
+
+/// The root of a slot's React children: hidden in the slot, or shown in the screen's container. It is an
+/// `RCTSurfaceView` with a touch handler of its own, as the root of a screen's React surface is, so libraries that look
+/// for that root above a view find it in one tree too. Gesture Handler adds its root recognizer to it and, as a gesture
+/// starts, cancels the JavaScript touches through the touch handler it finds there.
+@interface ANNSlotContentView : RCTSurfaceView
+@end
+
+NS_ASSUME_NONNULL_END

package/ios/React/Slots/ANNSlotContentView.mm

@@ -0,0 +1,18 @@
+#import "ANNSlotContentView.h"
+#import <React/RCTSurfaceTouchHandler.h>
+
+@implementation ANNSlotContentView {
+    RCTSurfaceTouchHandler *_touchHandler;
+}
+
+- (instancetype)initWithSurface:(id<RCTSurfaceProtocol>)surface {
+    if (self = [super initWithSurface:surface]) {
+        // The children are outside the views of the host's surface, so they need a touch handler of their own. It
+        // sits on this view, where React Native's surface view has its own, for Gesture Handler to find.
+        _touchHandler = [RCTSurfaceTouchHandler new];
+        [_touchHandler attachToView:self];
+    }
+    return self;
+}
+
+@end

package/ios/React/Slots/ANNSlotHost.h

@@ -0,0 +1,29 @@
+#import <UIKit/UIKit.h>
+
+@class RCTFabricSurface;
+@class RCTHost;
+
+NS_ASSUME_NONNULL_BEGIN
+
+/// The hidden host of the app's React tree: one React surface in a hidden window of its own, so the app's providers
+/// live as long as the app does and no navigation command touches them. It starts with the first slot screen, when
+/// JavaScript runs; React Native starts its surface again after a reload.
+@interface ANNSlotHost : NSObject
+
+/// The name of the host's component in JavaScript.
+@property(class, nonatomic, readonly) NSString *moduleName;
+
+/// The root tag of the host's React surface; 0 before it starts.
+@property(class, nonatomic, readonly) NSInteger rootTag;
+
+/// The host's React surface; nil before it starts.
+@property(class, nonatomic, readonly, nullable) RCTFabricSurface *surface;
+
++ (void)startWithHost:(RCTHost *)host;
+
+/// The navigation window joined its scene: the host's window, made before any scene, goes into it too. Main queue.
++ (void)mainWindowSceneDidConnect:(UIWindowScene *)windowScene;
+
+@end
+
+NS_ASSUME_NONNULL_END

package/ios/React/Slots/ANNSlotHost.mm

@@ -0,0 +1,59 @@
+#import "ANNSlotHost.h"
+#import "ANNAssert.h"
+#import "ANNUtils.h"
+#import <React/RCTFabricSurface.h>
+#import <React/RCTSurfaceHostingView.h>
+#import <ReactCommon/RCTHost.h>
+
+static UIWindow *ANNSlotHostWindow;
+static RCTFabricSurface *ANNSlotHostSurface;
+
+@implementation ANNSlotHost
+
++ (NSString *)moduleName {
+    return @"apexnative.slots";
+}
+
++ (NSInteger)rootTag {
+    return ANNSlotHostSurface.rootTag;
+}
+
++ (RCTFabricSurface *)surface {
+    return ANNSlotHostSurface;
+}
+
++ (void)startWithHost:(RCTHost *)host {
+    if (ANNSlotHostSurface != nil || host == nil) {
+        return;
+    }
+    RCTFabricSurface *surface = [host createSurfaceWithModuleName:self.moduleName initialProperties:@{}];
+    RCTSurfaceHostingView *surfaceView = [[RCTSurfaceHostingView alloc]
+        initWithSurface:surface
+        sizeMeasureMode:RCTSurfaceSizeMeasureModeWidthExact | RCTSurfaceSizeMeasureModeHeightExact];
+    surfaceView.backgroundColor = UIColor.clearColor;
+    surfaceView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
+
+    // Hidden and without a root view controller: it takes no touches and has no say in the orientation or the status
+    // bar (a visible window above the app does). The tree still mounts; the slots move their content into screens.
+    UIWindowScene *scene = ANNUtils.mainWindow.windowScene;
+    UIWindow *window = scene ? [[UIWindow alloc] initWithWindowScene:scene]
+                             : [[UIWindow alloc] initWithFrame:ANNUtils.mainScreen.bounds];
+    surfaceView.frame = window.bounds;
+    [window addSubview:surfaceView];
+    window.hidden = YES;
+
+    ANNSlotHostWindow = window;
+    ANNSlotHostSurface = surface;
+    // The host starts the surface itself once the bundle has run. A start of its own raced it: both found the surface
+    // not started yet and attached it to its view twice, which React Native asserts against.
+}
+
++ (void)mainWindowSceneDidConnect:(UIWindowScene *)windowScene {
+    ANNAssertMainQueue();
+    UIWindow *window = ANNSlotHostWindow;
+    if (window && window.windowScene != windowScene) {
+        window.windowScene = windowScene;
+    }
+}
+
+@end

package/ios/React/Slots/ANNSlotScreenView.h

@@ -0,0 +1,38 @@
+#import "ANNReactView.h"
+#import "ANNSlotContainers.h"
+#import <UIKit/UIKit.h>
+
+@class RCTFabricSurface;
+@class RCTHost;
+
+NS_ASSUME_NONNULL_BEGIN
+
+/// The view of a slot screen (a component named with `ANNSlotPrefix`): a screen of the app's one React tree. It has no
+/// React surface of its own; the slot of the tree with the screen's componentId shows its content here. It answers
+/// what a screen asks of its React view, so it stands in for one.
+@interface ANNSlotScreenView : UIView <ANNComponentProtocol, ANNSlotContainer>
+
+- (instancetype)initWithComponentId:(NSString *)componentId
+                               name:(NSString *)name
+                               host:(RCTHost *)host
+                       eventEmitter:(ANNEventEmitter *)eventEmitter
+                reactViewReadyBlock:(nullable ANNReactViewReadyCompletionBlock)reactViewReadyBlock;
+
+- (instancetype)initWithFrame:(CGRect)frame NS_UNAVAILABLE;
+- (nullable instancetype)initWithCoder:(NSCoder *)coder NS_UNAVAILABLE;
+
+/// The screen's name, without the prefix.
+@property(nonatomic, readonly) NSString *moduleName;
+/// Always nil: the content belongs to the host's surface.
+@property(nonatomic, readonly, nullable) RCTFabricSurface *surface;
+@property(nonatomic, assign) BOOL passThroughTouches;
+@property(nonatomic, strong) ANNEventEmitter *eventEmitter;
+
+/// Called each time the slot mounts content here, one handler for each key; nil removes it.
+- (void)setContentDidMount:(nullable void (^)(void))handler forKey:(NSString *)key;
+/// The screen goes: its slot takes the content back and JavaScript unmounts it.
+- (void)stopSurface;
+
+@end
+
+NS_ASSUME_NONNULL_END