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

package/ios/React/ANNReactComponentRegistry.mm

@@ -0,0 +1,153 @@
+#import "ANNReactComponentRegistry.h"
+#import "ANNAssert.h"
+
+// One root of the registry: its name, whether it rendered, and who waits for that.
+@interface ANNRegisteredComponent : NSObject
+@property(nonatomic, copy) NSString *name;
+@property(nonatomic, strong) UIView<ANNComponentProtocol> *view;
+@property(nonatomic) BOOL ready;
+@property(nonatomic, strong) NSMutableArray<dispatch_block_t> *readyHandlers;
+@property(nonatomic, copy, nullable) ANNReactViewReadyCompletionBlock moduleReadyBlock;
+@end
+
+@implementation ANNRegisteredComponent
+@end
+
+@implementation ANNReactComponentRegistry {
+    id<ANNComponentViewCreator> _creator;
+    NSMutableDictionary<NSString *, ANNRegisteredComponent *> *_components;
+}
+
+- (instancetype)initWithCreator:(id<ANNComponentViewCreator>)creator {
+    if (self = [super init]) {
+        _creator = creator;
+        _components = [NSMutableDictionary new];
+    }
+    return self;
+}
+
+- (ANNReactView *)createComponentIfNotExists:(ANNComponentOptions *)component
+                           parentComponentId:(NSString *)parentComponentId
+                               componentType:(ANNComponentType)componentType
+                         reactViewReadyBlock:(ANNReactViewReadyCompletionBlock)reactViewReadyBlock {
+    UIView<ANNComponentProtocol> *view = [self componentView:component type:componentType];
+    if (!view) {
+        return nil;
+    }
+    ANNRegisteredComponent *registered = _components[view.componentId];
+    if (reactViewReadyBlock) {
+        if (registered.ready) {
+            reactViewReadyBlock();
+        } else {
+            registered.moduleReadyBlock = reactViewReadyBlock;
+        }
+    }
+    return [view isKindOfClass:ANNReactView.class] ? (ANNReactView *)view : nil;
+}
+
+- (UIView<ANNComponentProtocol> *)componentView:(ANNComponentOptions *)component
+                                           type:(ANNComponentType)componentType {
+    ANNAssertMainQueue();
+    NSString *name = [component.name withDefault:nil];
+    NSString *componentId = [component.componentId withDefault:nil];
+    if (name.length == 0 || componentId.length == 0) {
+        return nil;
+    }
+    ANNRegisteredComponent *registered = _components[componentId];
+    if (registered && [registered.name isEqualToString:name]) {
+        return registered.view;
+    }
+    // Another name with the id: a new component in the place of the old one, which stops.
+    if (registered) {
+        [self removeChildComponent:componentId];
+    }
+    ANNRegisteredComponent *made = [ANNRegisteredComponent new];
+    made.name = name;
+    made.readyHandlers = [NSMutableArray new];
+    __weak ANNReactComponentRegistry *weakSelf = self;
+    __weak ANNRegisteredComponent *weakMade = made;
+    UIView<ANNComponentProtocol> *view =
+        [_creator createComponentView:name
+                          componentId:componentId
+                        componentType:componentType
+                  reactViewReadyBlock:^{
+                    [weakSelf componentBecameReady:weakMade];
+                  }];
+    if (!view) {
+        return nil;
+    }
+    made.view = view;
+    _components[componentId] = made;
+    // A content that was ready inside its own init (none of the core's are) still counts.
+    if (view.isReady) {
+        [self componentBecameReady:made];
+    }
+    return view;
+}
+
+- (void)componentBecameReady:(ANNRegisteredComponent *)registered {
+    if (!registered || registered.ready ||
+        _components[registered.view.componentId ?: @""] != registered) {
+        return;
+    }
+    registered.ready = YES;
+    NSArray<dispatch_block_t> *handlers = [registered.readyHandlers copy];
+    [registered.readyHandlers removeAllObjects];
+    ANNReactViewReadyCompletionBlock moduleReadyBlock = registered.moduleReadyBlock;
+    registered.moduleReadyBlock = nil;
+    for (dispatch_block_t handler in handlers) {
+        handler();
+    }
+    if (moduleReadyBlock) {
+        moduleReadyBlock();
+    }
+}
+
+- (UIView<ANNComponentProtocol> *)existingComponent:(NSString *)componentId {
+    return componentId ? _components[componentId].view : nil;
+}
+
+- (BOOL)isComponentReady:(NSString *)componentId {
+    return componentId && _components[componentId].ready;
+}
+
+- (void)whenComponentReady:(NSString *)componentId do:(dispatch_block_t)handler {
+    ANNRegisteredComponent *registered = componentId ? _components[componentId] : nil;
+    if (!registered) {
+        return;
+    }
+    if (registered.ready) {
+        handler();
+        return;
+    }
+    [registered.readyHandlers addObject:[handler copy]];
+}
+
+- (void)removeChildComponent:(NSString *)childId {
+    ANNAssertMainQueue();
+    ANNRegisteredComponent *registered = childId ? _components[childId] : nil;
+    if (!registered) {
+        return;
+    }
+    [_components removeObjectForKey:childId];
+    [registered.readyHandlers removeAllObjects];
+    registered.moduleReadyBlock = nil;
+    [registered.view stopSurface];
+}
+
+- (void)stopAll {
+    ANNAssertMainQueue();
+    for (NSString *componentId in _components.allKeys) {
+        [self removeChildComponent:componentId];
+    }
+}
+
+- (NSArray<UIView<ANNComponentProtocol> *> *)allComponents {
+    NSMutableArray<UIView<ANNComponentProtocol> *> *views = [NSMutableArray new];
+    for (ANNRegisteredComponent *registered in _components.allValues) {
+        [views addObject:registered.view];
+    }
+    return views;
+}
+
+@end

package/ios/React/ANNReactView.h

@@ -0,0 +1,104 @@
+#import "ANNComponentType.h"
+#import "ANNEventEmitter.h"
+#import <React/RCTFabricSurface.h>
+#import <UIKit/UIKit.h>
+
+@class ANNScreenAppearance;
+@class RCTHost;
+
+NS_ASSUME_NONNULL_BEGIN
+
+/// Called once, on the main queue, when a React view is ready: its content rendered (or mounted). No content waits on
+/// a timer of its own: a waiting command has its limit.
+typedef void (^ANNReactViewReadyCompletionBlock)(void);
+
+/// What a screen shows, whoever makes it: the core's React view (a React surface of its own) or the slot screen view of
+/// one React tree (`ANNSlotScreenView`). The core talks to a screen's content only through this.
+@protocol ANNComponentProtocol <NSObject>
+
+/// The id of the screen or component.
+@property(nonatomic, readonly) NSString *componentId;
+
+- (ANNReactComponentType)componentType;
+
+/// The appearance of the content as JavaScript is told it: the content owns it, made with the content's id, its name
+/// without the `slot:` prefix, its type and the content itself as what it waits for.
+@property(nonatomic, strong, readonly) ANNScreenAppearance *appearance;
+
+/// The lifecycle of the screen as it shows and goes: `ANN.ComponentWillAppear`, `DidAppear`, `DidDisappear`. Each
+/// hands the content's `appearance` to `ANNAppearanceDispatcher`, which holds the events until the content mounted (at
+/// most 0.5 s), keeps them balanced and sends them.
+- (void)componentWillAppear;
+- (void)componentDidAppear;
+- (void)componentDidDisappear;
+
+/// The ready signal went, for good: the content rendered (a React root) or mounted (a slot screen).
+@property(nonatomic, readonly) BOOL isReady;
+
+/// Called each time content mounts in the view, one handler for each key; nil removes the handler of the key.
+- (void)setContentDidMount:(nullable void (^)(void))handler forKey:(NSString *)key;
+
+/// The screen goes: its React content stops.
+- (void)stopSurface;
+
+/// Touches that no React view takes go through to what is under the view.
+@property(nonatomic, assign) BOOL passThroughTouches;
+
+/// The React surface the content is measured with (its size); nil when the content has no surface of its own.
+@property(nonatomic, readonly, nullable) RCTFabricSurface *surface;
+
+@optional
+
+/// The content's root mounted once ("root mounted"): its first mount, whatever it rendered. A content whose readiness
+/// is its mount (the slot screen view) has no separate answer: its `isReady` says it.
+@property(nonatomic, readonly) BOOL hasMounted;
+
+/// `handler` runs once, at the first mount of the content's root; at once when it mounted already. Dropped when the
+/// content stops.
+- (void)whenMounted:(dispatch_block_t)handler;
+
+/// The height of the content laid out at the width of its container without a height limit, for a content without a
+/// surface of its own (a slot screen): 0 while nothing is measured yet. The first question starts the measure; each
+/// later mount of the content has the height of its last layout.
+- (CGFloat)contentHeightAtWidth:(CGFloat)width;
+
+@end
+
+/// The core's React view of a screen or a component: a React surface of its own, made at init with the props
+/// `{ componentId }` and started by the host once its JavaScript runs, sized to the view exactly, in a hosting view
+/// that keeps the app's theme to the window's (`ANNSurfaceHostingView`). It is ready, once and for good, when the safe
+/// area view of its id says its content rendered (`ANNScreenReadiness`); a root without a safe area view is ready at a
+/// mount of its surface once its root view has children. It hears every mount of its own surface (the surface
+/// presenter's observer) and runs its content-mount handlers there while ready. A component of a bar or a tab cell (any
+/// type but `ANNComponentTypeComponent` and the tabs' accessory) renders at once: the view marks its id so.
+/// `stopSurface` stops the surface once, on the main queue; nothing stops it in `dealloc`.
+@interface ANNReactView : UIView <ANNComponentProtocol>
+
+/// `componentId` must not be empty: a view without it is never made (an exception, which rejects the command that
+/// asked for it). Main queue.
+- (instancetype)initWithHost:(nullable RCTHost *)host
+                 componentId:(NSString *)componentId
+                        name:(NSString *)name
+               componentType:(ANNComponentType)componentType
+                eventEmitter:(nullable ANNEventEmitter *)eventEmitter
+         reactViewReadyBlock:(nullable ANNReactViewReadyCompletionBlock)reactViewReadyBlock;
+
+- (instancetype)initWithFrame:(CGRect)frame NS_UNAVAILABLE;
+- (nullable instancetype)initWithCoder:(NSCoder *)coder NS_UNAVAILABLE;
+
+/// The name of the component in JavaScript.
+@property(nonatomic, copy, readonly) NSString *moduleName;
+
+/// The props the native side gives the root (a tab cell's `tabIndex`, `selected`, `badge`, `dot`, `dotColor`), as an
+/// update of the same root's props: the surface gets `{ componentId }` with these over it, and JavaScript keeps the
+/// `passProps` it holds by the id. Nothing when they are the ones it has.
+- (void)setNativeProps:(NSDictionary<NSString *, id> *)nativeProps;
+
+/// The surface takes the hosting view's size again when the size React Native lays it out at isn't the hosting view's
+/// (the hosting view sizes it only in its own layout). Called at every layout of this view and by the screen at every
+/// recompute of its root frame; nothing when they agree.
+- (void)updateSurfaceSizeIfNeeded;
+
+@end
+
+NS_ASSUME_NONNULL_END

package/ios/React/ANNReactView.mm

@@ -0,0 +1,374 @@
+#import "ANNReactView.h"
+#import "ANNAppearanceDispatcher.h"
+#import "ANNAssert.h"
+#import "ANNEventEmitter.h"
+#import "ANNScreenAppearance.h"
+#import "ANNScreenReadiness.h"
+#import "ANNSlotContainers.h"
+#import "ANNSurfaceHostingView.h"
+#import <React/RCTFabricSurface.h>
+#import <React/RCTSurfacePresenter.h>
+#import <React/RCTSurfaceStage.h>
+#import <React/RCTSurfaceView.h>
+#import <ReactCommon/RCTHost.h>
+
+// A surface that still starts can't be stopped yet: it is checked this often, at most this many times (5 s), and then
+// stopped anyway.
+static const NSTimeInterval ANNSurfaceStopCheckInterval = 0.05;
+static const NSUInteger ANNSurfaceStopCheckLimit = 100;
+
+// Stops `surface` once it runs. The block holds the surface and the view that hosts it until then: a hosting view
+// released earlier would stop the surface in its `dealloc`, maybe off the main queue.
+static void ANNStopSurfaceWhenRunning(RCTFabricSurface *surface, UIView *hostingView,
+                                      NSUInteger checksLeft) {
+    if (RCTSurfaceStageIsRunning(surface.stage) || checksLeft == 0) {
+        [surface stop];
+        return;
+    }
+    int64_t delay = (int64_t)(ANNSurfaceStopCheckInterval * NSEC_PER_SEC);
+    dispatch_after(dispatch_time(DISPATCH_TIME_NOW, delay), dispatch_get_main_queue(), ^{
+      ANNStopSurfaceWhenRunning(surface, hostingView, checksLeft - 1);
+    });
+}
+
+@interface ANNReactView () <RCTSurfacePresenterObserver, ANNScreenReadinessListener>
+@end
+
+@implementation ANNReactView {
+    NSString *_componentId;
+    ANNComponentType _componentType;
+    ANNEventEmitter *_eventEmitter;
+    ANNReactViewReadyCompletionBlock _reactViewReadyBlock;
+    NSMutableDictionary<NSString *, void (^)(void)> *_contentDidMountHandlers;
+    RCTFabricSurface *_surface;
+    ANNSurfaceHostingView *_hostingView;
+    // The presenter the observer was added to; the same one removes it at the stop.
+    __weak RCTSurfacePresenter *_surfacePresenter;
+    BOOL _rendersAtOnce;
+    // React Native mounts our surface now: a signal that comes inside the mount makes the view ready at its end, once
+    // the whole transaction is on screen and React Native is out of its mounting.
+    BOOL _mounting;
+    BOOL _renderedDuringMount;
+    BOOL _ready;
+    BOOL _stopped;
+    // The root mounted once, and who waits for that (`whenMounted:`).
+    BOOL _mounted;
+    NSMutableArray<dispatch_block_t> *_mountHandlers;
+    NSDictionary<NSString *, id> *_nativeProps;
+}
+
+@synthesize passThroughTouches = _passThroughTouches;
+@synthesize appearance = _appearance;
+
+- (instancetype)initWithHost:(RCTHost *)host
+                 componentId:(NSString *)componentId
+                        name:(NSString *)name
+               componentType:(ANNComponentType)componentType
+                eventEmitter:(ANNEventEmitter *)eventEmitter
+         reactViewReadyBlock:(ANNReactViewReadyCompletionBlock)reactViewReadyBlock {
+    // A root without an id is never made: the command that asked for it rejects.
+    if (componentId.length == 0) {
+        @throw [NSException exceptionWithName:NSInvalidArgumentException
+                                       reason:@"a React view needs the id of its screen"
+                                     userInfo:nil];
+    }
+    if (self = [super initWithFrame:CGRectZero]) {
+        _componentId = [componentId copy];
+        _moduleName = [name copy];
+        _componentType = componentType;
+        _eventEmitter = eventEmitter;
+        _reactViewReadyBlock = [reactViewReadyBlock copy];
+        self.backgroundColor = UIColor.clearColor;
+        NSString *componentName = ANNComponentNameWithoutSlotPrefix(_moduleName ?: @"");
+        _appearance = [[ANNScreenAppearance alloc] initWithComponentId:_componentId
+                                                         componentName:componentName
+                                                         componentType:componentType
+                                                               content:self
+                                                          eventEmitter:eventEmitter];
+        // The safe area view of a component of a bar or of a tab cell renders at once: the core answers it by the id. A
+        // screen and the tabs' accessory wait for their layout.
+        _rendersAtOnce = componentType != ANNComponentTypeComponent &&
+                         componentType != ANNComponentTypeBottomTabsAccessory;
+        if (_rendersAtOnce) {
+            [ANNScreenReadiness setRendersAtOnce:YES forScreenId:_componentId];
+        }
+        // A new root starts with nothing said for its id: late signals of an old surface with the same id (restarted
+        // by React Native after a reload) or of a root that went don't make it ready or take its children fallback
+        // away. A screen's root that still holds the id is going anyway; a bar component's id may be shown by a live
+        // root of another screen too, whose signals stay (each root answers by its own render).
+        if (!_rendersAtOnce || [ANNScreenReadiness listenerCountForScreenId:_componentId] == 0) {
+            [ANNScreenReadiness removeScreenId:_componentId];
+        }
+        // Both before the surface exists, so its first mount and its first signal are never missed.
+        _surfacePresenter = host.surfacePresenter;
+        [_surfacePresenter addObserver:self];
+        [self makeSurfaceWithHost:host];
+        [ANNScreenReadiness setListener:self forScreenId:_componentId];
+    }
+    return self;
+}
+
+// The surface's props are only the id: the props of the screen stay in JavaScript. The host starts the surface itself
+// once the bundle ran (`createSurfaceWithModuleName:`); a second start of ours could attach it to its view twice, which
+// React Native asserts against. The hosting view sizes the surface to its own size exactly, in its `layoutSubviews`.
+- (void)makeSurfaceWithHost:(RCTHost *)host {
+    if (!host) {
+        return;
+    }
+    _surface = [host createSurfaceWithModuleName:_moduleName
+                               initialProperties:@{@"componentId" : _componentId}];
+    _hostingView = [[ANNSurfaceHostingView alloc]
+        initWithSurface:_surface
+        sizeMeasureMode:RCTSurfaceSizeMeasureModeWidthExact | RCTSurfaceSizeMeasureModeHeightExact];
+    _hostingView.backgroundColor = UIColor.clearColor;
+    _hostingView.frame = self.bounds;
+    _hostingView.autoresizingMask =
+        UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
+    [self addSubview:_hostingView];
+}
+
+- (NSString *)componentId {
+    return _componentId;
+}
+
+#pragma mark - The surface's size
+
+// The hosting view, the only place that sizes the surface, follows this view at every layout of it and of the screen,
+// so the surface's size never waits for a later layout pass. A render on its way during a size change is laid out
+// again by the hosting view at the next mount (`-[ANNSurfaceHostingView surfaceDidMount]`). The hosting view is the
+// core's; React Native's views inside it are never touched.
+- (void)layoutSubviews {
+    [super layoutSubviews];
+    [self updateSurfaceSizeIfNeeded];
+}
+
+- (void)updateSurfaceSizeIfNeeded {
+    ANNSurfaceHostingView *hostingView = _hostingView;
+    if (!hostingView || !_surface || _stopped) {
+        return;
+    }
+    if (!CGRectEqualToRect(hostingView.frame, self.bounds)) {
+        hostingView.frame = self.bounds;
+    }
+    CGSize size = hostingView.bounds.size;
+    if (CGSizeEqualToSize(_surface.minimumSize, size) &&
+        CGSizeEqualToSize(_surface.maximumSize, size)) {
+        return;
+    }
+    [hostingView setNeedsLayout];
+    [hostingView layoutIfNeeded];
+}
+
+- (ANNReactComponentType)componentType {
+    return _componentType;
+}
+
+- (RCTFabricSurface *)surface {
+    return _surface;
+}
+
+- (BOOL)isReady {
+    return _ready;
+}
+
+- (BOOL)hasMounted {
+    return _mounted;
+}
+
+- (void)whenMounted:(dispatch_block_t)handler {
+    if (_stopped) {
+        return;
+    }
+    if (_mounted) {
+        handler();
+        return;
+    }
+    if (!_mountHandlers) {
+        _mountHandlers = [NSMutableArray new];
+    }
+    [_mountHandlers addObject:[handler copy]];
+}
+
+// The first mount of the root (or its readiness, which comes with a mount): each waiter hears it once.
+- (void)markMounted {
+    if (_mounted || _stopped) {
+        return;
+    }
+    _mounted = YES;
+    NSArray<dispatch_block_t> *handlers = _mountHandlers;
+    _mountHandlers = nil;
+    for (dispatch_block_t handler in handlers) {
+        handler();
+    }
+}
+
+- (void)setNativeProps:(NSDictionary<NSString *, id> *)nativeProps {
+    ANNAssertMainQueue();
+    if (_stopped || !_surface || [_nativeProps isEqualToDictionary:nativeProps]) {
+        return;
+    }
+    _nativeProps = [nativeProps copy];
+    NSMutableDictionary<NSString *, id> *properties = [nativeProps mutableCopy];
+    properties[@"componentId"] = _componentId;
+    _surface.properties = properties;
+}
+
+#pragma mark - Readiness
+
+// Once: the content-mount handlers of this moment run first (the dispatcher's `ANNAppearance` key sends the events it
+// held), then the ready block (the node's `readyForPresentation`, which ends a command's wait). Nothing waits here on
+// its own: the waiting command has its limit.
+- (void)becomeReady {
+    if (_ready || _stopped) {
+        return;
+    }
+    _ready = YES;
+    [self markMounted];
+    [self runContentDidMountHandlers];
+    ANNReactViewReadyCompletionBlock readyBlock = _reactViewReadyBlock;
+    _reactViewReadyBlock = nil;
+    if (readyBlock) {
+        readyBlock();
+    }
+}
+
+- (void)runContentDidMountHandlers {
+    // A handler may set or remove handlers: each one of this moment runs once.
+    for (void (^handler)(void) in _contentDidMountHandlers.allValues) {
+        handler();
+    }
+}
+
+- (void)setContentDidMount:(void (^)(void))handler forKey:(NSString *)key {
+    if (!_contentDidMountHandlers) {
+        _contentDidMountHandlers = [NSMutableDictionary new];
+    }
+    _contentDidMountHandlers[key] = [handler copy];
+}
+
+// Read only: whether the root view of the surface has children, for a root without a safe area view. Nothing in React
+// Native's views changes.
+- (BOOL)rootViewHasChildren {
+    UIView *surfaceView = _surface.view;
+    for (UIView *rootView in surfaceView.subviews) {
+        if (rootView.tag == _surface.rootTag) {
+            return rootView.subviews.count > 0;
+        }
+    }
+    return NO;
+}
+
+#pragma mark - ANNScreenReadinessListener
+
+// The safe area view of the id says the content rendered. It says so while React Native mounts the surface (its props
+// or its first children): then the view gets ready as that mount ends.
+- (void)screenReadinessContentDidRender:(NSString *)screenId {
+    if (_mounting) {
+        _renderedDuringMount = YES;
+        return;
+    }
+    // Another live root of the same bar component's id said it, in its own mount: not this root's render.
+    if (_rendersAtOnce && [ANNScreenReadiness listenerCountForScreenId:_componentId] > 1) {
+        return;
+    }
+    [self becomeReady];
+}
+
+#pragma mark - RCTSurfacePresenterObserver
+
+- (void)willMountComponentsWithRootTag:(NSInteger)rootTag {
+    if (_surface && rootTag == _surface.rootTag) {
+        _mounting = YES;
+    }
+}
+
+// Every mount of our own surface: while ready, the content-mount handlers run (a sheet's and a modal's size, the large
+// title); before, the content gets ready if its safe area view said so during this mount, or, for a root no safe area
+// view ever spoke for, once the root view has children.
+- (void)didMountComponentsWithRootTag:(NSInteger)rootTag {
+    if (_stopped || !_surface || rootTag != _surface.rootTag) {
+        return;
+    }
+    _mounting = NO;
+    [_hostingView surfaceDidMount];
+    if (_stopped) {
+        return;
+    }
+    if (_ready) {
+        [self runContentDidMountHandlers];
+        return;
+    }
+    // The first mount, before any readiness test: a tab not shown counts as rendered by it.
+    [self markMounted];
+    if (_stopped) {
+        return;
+    }
+    if (_renderedDuringMount) {
+        _renderedDuringMount = NO;
+        [self becomeReady];
+        return;
+    }
+    if ([ANNScreenReadiness contentRenderedOfScreen:_componentId] == ANNContentRenderedUnknown &&
+        [self rootViewHasChildren]) {
+        [self becomeReady];
+    }
+}
+
+#pragma mark - Appearance
+
+- (void)componentWillAppear {
+    [ANNAppearanceDispatcher willAppear:_appearance];
+}
+
+- (void)componentDidAppear {
+    [ANNAppearanceDispatcher didAppear:_appearance];
+}
+
+- (void)componentDidDisappear {
+    [ANNAppearanceDispatcher didDisappear:_appearance];
+}
+
+#pragma mark - Stop
+
+// Once, on the main queue, never in `dealloc`: the appearance ends first, so JavaScript hears the end of an appearance
+// it heard start and what is still held is dropped with its limit; then the observer leaves the presenter it was added
+// to (in `dealloc` the presenter's weak entry would be empty already), the readiness listener and the "renders at once"
+// mark go, and the surface stops a turn later, as soon as it runs.
+- (void)stopSurface {
+    ANNAssertMainQueue();
+    if (_stopped) {
+        return;
+    }
+    _stopped = YES;
+    [ANNAppearanceDispatcher didDisappear:_appearance];
+    [_surfacePresenter removeObserver:self];
+    // A root that renders at once (a bar's or a tab's component) has no screen to clear its id at a destroy: its stop
+    // does, while the id is still its own and no other live root shows it, so a later root with the same id isn't
+    // "rendered" before it renders. The "renders at once" mark goes the same way: a root that stops after a newer one
+    // took its id (a reload) leaves the newer one's mark. Read once, before the listener goes.
+    BOOL heldId = [ANNScreenReadiness isListener:self forScreenId:_componentId];
+    [ANNScreenReadiness removeListener:self forScreenId:_componentId];
+    // The tabs' accessory has no screen to clear its id either.
+    BOOL clearsOwnId = _rendersAtOnce || _componentType == ANNComponentTypeBottomTabsAccessory;
+    if (clearsOwnId && heldId && [ANNScreenReadiness listenerCountForScreenId:_componentId] == 0) {
+        [ANNScreenReadiness removeScreenId:_componentId];
+        if (_rendersAtOnce) {
+            [ANNScreenReadiness setRendersAtOnce:NO forScreenId:_componentId];
+        }
+    }
+    _reactViewReadyBlock = nil;
+    _mountHandlers = nil;
+    [_contentDidMountHandlers removeAllObjects];
+    RCTFabricSurface *surface = _surface;
+    if (surface) {
+        // On the next turn of the main queue: a destroy that runs inside React Native's mounting (a wait that ends in
+        // a mount, a root that replaces at once) would stop the surface there, React Native would drop its last
+        // transaction and recycle its root view with the old content still in it, to show in a later screen.
+        UIView *hostingView = _hostingView;
+        dispatch_async(dispatch_get_main_queue(), ^{
+          ANNStopSurfaceWhenRunning(surface, hostingView, ANNSurfaceStopCheckLimit);
+        });
+    }
+}
+
+@end

package/ios/React/ANNReactViewCreator.h

@@ -0,0 +1,20 @@
+#import "ANNComponentViewCreator.h"
+#import "ANNEventEmitter.h"
+#import <Foundation/Foundation.h>
+
+NS_ASSUME_NONNULL_BEGIN
+
+/// The core's maker of the content of screens: a name with `ANNSlotPrefix` gets the slot screen view of the app's one
+/// React tree (`ANNSlotScreenView`), any other name a React view with a surface of its own from the app's host
+/// (`ApexNavigation.getHost`). The layout factory makes one per command, with the emitter of the nodes it makes, so
+/// that the content and its node tell the same JavaScript. Main queue.
+@interface ANNReactViewCreator : NSObject <ANNComponentViewCreator>
+
+- (instancetype)initWithEventEmitter:(ANNEventEmitter *)eventEmitter NS_DESIGNATED_INITIALIZER;
+
+- (instancetype)init NS_UNAVAILABLE;
++ (instancetype)new NS_UNAVAILABLE;
+
+@end
+
+NS_ASSUME_NONNULL_END