react-native-platform-components 1.4.0 → 1.5.0

package/ios/PCMenuSupport.swift

@@ -0,0 +1,350 @@
+import UIKit
+
+/// One menu item bridged from JS (src/menuItems.ts). The action tree arrives
+/// flattened: each item points at its parent submenu or section by index.
+struct PCMenuItem {
+    /// Position in the flattened list
+    let index: Int
+    let id: String
+    let title: String
+    let subtitle: String
+    /// Index of the parent submenu or section; -1 at the top level
+    let parent: Int
+    /// "action" | "menu" | "section"
+    let kind: String
+    let icon: PCButtonSupport.Icon
+    let imageColor: String
+    let destructive: Bool
+    let disabled: Bool
+    let keepsMenuPresented: Bool
+    /// "" | "off" | "on" | "mixed"
+    let state: String
+    /// The item's own `haptics`; "" = the component's
+    let haptics: String
+
+    init(
+        index: Int,
+        id: String,
+        title: String,
+        subtitle: String = "",
+        parent: Int = -1,
+        kind: String = "action",
+        icon: PCButtonSupport.Icon = .none,
+        imageColor: String = "",
+        destructive: Bool = false,
+        disabled: Bool = false,
+        keepsMenuPresented: Bool = false,
+        state: String = "",
+        haptics: String = ""
+    ) {
+        self.index = index
+        self.id = id
+        self.title = title
+        self.subtitle = subtitle
+        self.parent = parent
+        self.kind = kind
+        self.icon = icon
+        self.imageColor = imageColor
+        self.destructive = destructive
+        self.disabled = disabled
+        self.keepsMenuPresented = keepsMenuPresented
+        self.state = state
+        self.haptics = haptics
+    }
+
+    /// Reads an item bridged from ObjC++ as a dictionary (see PCMenuItems.h).
+    init(index: Int, dictionary dict: [String: Any]) {
+        func string(_ key: String) -> String { (dict[key] as? String) ?? "" }
+        self.init(
+            index: index,
+            id: string("id"),
+            title: string("title"),
+            subtitle: string("subtitle"),
+            parent: (dict["parent"] as? NSNumber)?.intValue ?? -1,
+            kind: string("kind").isEmpty ? "action" : string("kind"),
+            icon: PCButtonSupport.Icon(dictionary: dict),
+            imageColor: string("imageColor"),
+            destructive: string("destructive") == "true",
+            disabled: string("disabled") == "true",
+            keepsMenuPresented: string("keepsMenuPresented") == "true",
+            state: string("state"),
+            haptics: string("haptics")
+        )
+    }
+}
+
+/// Images currently displayed by one view's menu. A menu rebuild must reuse its
+/// loaded images even when the request bypasses the shared cache or the response
+/// forbids caching. Removed icons release both their image and pending entry.
+/// Must be used from the main thread.
+final class PCMenuImageState {
+    private final class Entry {
+        var image: UIImage?
+    }
+
+    private var entries: [PCButtonSupport.Icon: Entry] = [:]
+
+    func retain(icons: [PCButtonSupport.Icon]) {
+        let current = Set(icons)
+        entries = entries.filter { current.contains($0.key) }
+    }
+
+    func image(for icon: PCButtonSupport.Icon, onImageLoaded: @escaping () -> Void) -> UIImage? {
+        if let entry = entries[icon] { return entry.image }
+        let entry = Entry()
+        entries[icon] = entry
+        entry.image = PCButtonSupport.image(for: icon) { [weak self, weak entry] image in
+            guard let self, let entry, self.entries[icon] === entry else { return }
+            entry.image = image
+            if image != nil { onImageLoaded() }
+        }
+        return entry.image
+    }
+}
+
+/// Builds UIKit menus from flattened menu items: actions, submenus, inline
+/// sections, subtitles, icons (SF Symbols, asset catalog names and React
+/// Native image sources), attributes and states. Shared by the components
+/// that show a native menu.
+///
+/// Must be used from the main thread.
+enum PCMenuSupport {
+    /// Parses the array of dictionaries ObjC++ bridges.
+    static func items(from array: [Any]) -> [PCMenuItem] {
+        array.enumerated().compactMap { index, any in
+            guard let dict = any as? [String: Any] else { return nil }
+            return PCMenuItem(index: index, dictionary: dict)
+        }
+    }
+
+    /// The root menu. Its identifier is UIKit's own, different for every
+    /// build; `updatedVisibleMenu` finds it through the menu it replaces.
+    ///
+    /// - `imageState`: retained by the view across menu rebuilds, holding only
+    ///   the current menu's images.
+    /// - `onImageLoaded`: called when an image icon has loaded; build the menu
+    ///   again then using the same image state.
+    /// - `handler`: called with the item when an action is performed.
+    static func menu(
+        title: String,
+        options: UIMenu.Options = [],
+        items: [PCMenuItem],
+        imageState: PCMenuImageState,
+        onImageLoaded: @escaping () -> Void,
+        handler: @escaping (PCMenuItem) -> Void
+    ) -> UIMenu {
+        imageState.retain(icons: items.map(\.icon))
+        return UIMenu(
+            title: title,
+            options: options,
+            children: elements(for: items, imageState: imageState, onImageLoaded: onImageLoaded, handler: handler)
+        )
+    }
+
+    /// The top-level elements of the menu. Submenus and sections without
+    /// children are left out.
+    static func elements(
+        for items: [PCMenuItem],
+        imageState: PCMenuImageState,
+        onImageLoaded: @escaping () -> Void,
+        handler: @escaping (PCMenuItem) -> Void
+    ) -> [UIMenuElement] {
+        let children = Dictionary(grouping: items, by: { $0.parent })
+
+        func build(_ parent: Int) -> [UIMenuElement] {
+            (children[parent] ?? []).compactMap { item in
+                switch item.kind {
+                case "menu", "section":
+                    let elements = build(item.index)
+                    guard !elements.isEmpty else { return nil }
+                    let inline = item.kind == "section"
+                    let menu = UIMenu(
+                        title: item.title,
+                        image: inline ? nil : image(for: item, imageState: imageState, onImageLoaded: onImageLoaded),
+                        identifier: identifier(for: item),
+                        options: inline ? .displayInline : [],
+                        children: elements
+                    )
+                    if !item.subtitle.isEmpty { menu.subtitle = item.subtitle }
+                    return menu
+                default:
+                    return action(for: item, imageState: imageState, onImageLoaded: onImageLoaded, handler: handler)
+                }
+            }
+        }
+
+        return build(-1)
+    }
+
+    static func action(
+        for item: PCMenuItem,
+        imageState: PCMenuImageState,
+        onImageLoaded: @escaping () -> Void,
+        handler: @escaping (PCMenuItem) -> Void
+    ) -> UIAction {
+        var attributes: UIMenuElement.Attributes = []
+        if item.destructive { attributes.insert(.destructive) }
+        if item.disabled { attributes.insert(.disabled) }
+        if item.keepsMenuPresented, #available(iOS 16.0, *) {
+            attributes.insert(.keepsMenuPresented)
+        }
+
+        return UIAction(
+            title: item.title,
+            subtitle: item.subtitle.isEmpty ? nil : item.subtitle,
+            image: image(for: item, imageState: imageState, onImageLoaded: onImageLoaded),
+            attributes: attributes,
+            state: state(item.state)
+        ) { _ in
+            handler(item)
+        }
+    }
+
+    static func state(_ value: String) -> UIMenuElement.State {
+        switch value {
+        case "on": return .on
+        case "mixed": return .mixed
+        default: return .off
+        }
+    }
+
+    /// Submenus are identified by their action id, so an open submenu can be
+    /// found again when the menu is rebuilt (`updatedVisibleMenu`).
+    static func identifier(for item: PCMenuItem) -> UIMenu.Identifier {
+        UIMenu.Identifier("com.platformcomponents.menu.\(item.id)")
+    }
+
+    /// The item's icon. SF Symbol and asset catalog names resolve right away;
+    /// an image source that is still loading gives nil and calls
+    /// `onImageLoaded` when it arrives.
+    static func image(for item: PCMenuItem, imageState: PCMenuImageState, onImageLoaded: @escaping () -> Void) -> UIImage? {
+        let icon = item.icon
+        var image: UIImage?
+        switch icon.type {
+        case "sfSymbol":
+            // SF Symbols are templates already; asset catalog images keep the
+            // rendering mode set in the catalog.
+            image = PCImageLoader.symbol(named: icon.name)
+        case "image":
+            image = imageState.image(for: icon, onImageLoaded: onImageLoaded)
+        default:
+            return nil
+        }
+
+        if let color = color(hex: item.imageColor) {
+            image = image?.withTintColor(color, renderingMode: .alwaysOriginal)
+        }
+        return image
+    }
+
+    /// The menu in `root` that replaces the one showing, for
+    /// `updateVisibleMenu`: `root` itself when the root of `oldRoot` is
+    /// showing, else the submenu with the visible submenu's identifier. Falls
+    /// back to the visible menu, unchanged, when it no longer exists.
+    static func updatedVisibleMenu(_ visible: UIMenu, in root: UIMenu, replacing oldRoot: UIMenu? = nil) -> UIMenu {
+        if let oldRoot, visible.identifier == oldRoot.identifier { return root }
+        func find(_ menu: UIMenu) -> UIMenu? {
+            if menu.identifier == visible.identifier { return menu }
+            for case let child as UIMenu in menu.children {
+                if let found = find(child) { return found }
+            }
+            return nil
+        }
+        return find(root) ?? visible
+    }
+
+    /// "#RRGGBB" or "RRGGBB"; nil for anything else.
+    static func color(hex string: String) -> UIColor? {
+        var hex = string.trimmingCharacters(in: .whitespacesAndNewlines)
+        if hex.hasPrefix("#") { hex = String(hex.dropFirst()) }
+        guard hex.count == 6, let rgb = UInt64(hex, radix: 16) else { return nil }
+        return UIColor(
+            red: CGFloat((rgb & 0xFF0000) >> 16) / 255,
+            green: CGFloat((rgb & 0x00FF00) >> 8) / 255,
+            blue: CGFloat(rgb & 0x0000FF) / 255,
+            alpha: 1
+        )
+    }
+}
+
+/// A button that shows its `menu` as its primary action and reports when the
+/// menu opens and closes, through UIControl's context menu delegate methods.
+/// Used as an invisible anchor that presents a system menu over React
+/// content.
+final class PCMenuButton: UIButton {
+    var onMenuOpen: (() -> Void)?
+    /// Called once the menu has finished dismissing.
+    var onMenuClose: (() -> Void)?
+
+    private(set) var isMenuVisible = false
+
+    override init(frame: CGRect) {
+        super.init(frame: frame)
+        showsMenuAsPrimaryAction = true
+    }
+
+    required init?(coder: NSCoder) {
+        super.init(coder: coder)
+        showsMenuAsPrimaryAction = true
+    }
+
+    /// Replaces the menu. While it is open, `updatingVisibleMenu` also
+    /// updates it in place (for actions that keep the menu presented); pass
+    /// false when the change comes from a pick, while the menu is closing.
+    func setMenu(_ newMenu: UIMenu?, updatingVisibleMenu: Bool = true) {
+        let oldMenu = menu
+        menu = newMenu
+        guard updatingVisibleMenu, isMenuVisible, let newMenu,
+              let interaction = contextMenuInteraction else { return }
+        interaction.updateVisibleMenu { visible in
+            PCMenuSupport.updatedVisibleMenu(visible, in: newMenu, replacing: oldMenu)
+        }
+    }
+
+    /// Whether `presentMenu()` can open the menu without a touch:
+    /// `UIControl.performPrimaryAction()`, iOS 17.4+.
+    static var canPresentMenuProgrammatically: Bool {
+        if #available(iOS 17.4, *) { return true }
+        return false
+    }
+
+    /// Opens the menu without a touch. Returns false where UIKit has no public
+    /// API for it (before iOS 17.4).
+    @discardableResult
+    func presentMenu() -> Bool {
+        guard #available(iOS 17.4, *) else { return false }
+        performPrimaryAction()
+        return true
+    }
+
+    /// Closes the menu if it is open; a closed menu's interaction is left alone.
+    func dismissMenu() {
+        guard isMenuVisible else { return }
+        contextMenuInteraction?.dismissMenu()
+    }
+
+    override func contextMenuInteraction(
+        _ interaction: UIContextMenuInteraction,
+        willDisplayMenuFor configuration: UIContextMenuConfiguration,
+        animator: UIContextMenuInteractionAnimating?
+    ) {
+        super.contextMenuInteraction(interaction, willDisplayMenuFor: configuration, animator: animator)
+        isMenuVisible = true
+        onMenuOpen?()
+    }
+
+    override func contextMenuInteraction(
+        _ interaction: UIContextMenuInteraction,
+        willEndFor configuration: UIContextMenuConfiguration,
+        animator: UIContextMenuInteractionAnimating?
+    ) {
+        super.contextMenuInteraction(interaction, willEndFor: configuration, animator: animator)
+        isMenuVisible = false
+        // Report after the dismissal, when a selected action has run.
+        if let animator {
+            animator.addCompletion { [weak self] in self?.onMenuClose?() }
+        } else {
+            DispatchQueue.main.async { [weak self] in self?.onMenuClose?() }
+        }
+    }
+}

package/ios/PCNavigationRail.h

@@ -0,0 +1,10 @@
+// PCNavigationRail.h
+
+#import <React/RCTViewComponentView.h>
+
+NS_ASSUME_NONNULL_BEGIN
+
+@interface PCNavigationRail : RCTViewComponentView
+@end
+
+NS_ASSUME_NONNULL_END

package/ios/PCNavigationRail.mm

@@ -0,0 +1,270 @@
+// PCNavigationRail.mm
+
+#import "PCNavigationRail.h"
+
+#import <React/RCTComponentViewFactory.h>
+#import <React/RCTConversions.h>
+#import <React/RCTFabricComponentsPlugins.h>
+#import <React/RCTFont.h>
+
+#import <react/renderer/components/PlatformComponentsViewSpec/ComponentDescriptors.h>
+#import <react/renderer/components/PlatformComponentsViewSpec/EventEmitters.h>
+#import <react/renderer/components/PlatformComponentsViewSpec/Props.h>
+#import <react/renderer/core/LayoutPrimitives.h>
+
+#if __has_include(<PlatformComponents/PlatformComponents-Swift.h>)
+#import <PlatformComponents/PlatformComponents-Swift.h>
+#else
+#import "PlatformComponents-Swift.h"
+#endif
+
+#import "PCNavigationRailComponentDescriptors-custom.h"
+#import "PCNavigationRailShadowNode-custom.h"
+#import "PCNavigationRailState-custom.h"
+
+using namespace facebook::react;
+
+namespace {
+static inline bool ItemsEqual(
+    const std::vector<PCNavigationRailItemsStruct> &a,
+    const std::vector<PCNavigationRailItemsStruct> &b) {
+  if (a.size() != b.size()) return false;
+  for (size_t i = 0; i < a.size(); i++) {
+    const auto &x = a[i];
+    const auto &y = b[i];
+    if (x.label != y.label || x.value != y.value || x.disabled != y.disabled ||
+        x.iconType != y.iconType || x.iconName != y.iconName || x.iconRequest != y.iconRequest || x.iconUri != y.iconUri ||
+        x.iconScale != y.iconScale || x.iconTinted != y.iconTinted ||
+        x.selectedIconType != y.selectedIconType || x.selectedIconName != y.selectedIconName ||
+        x.selectedIconRequest != y.selectedIconRequest || x.selectedIconUri != y.selectedIconUri || x.selectedIconScale != y.selectedIconScale ||
+        x.selectedIconTinted != y.selectedIconTinted || x.badge != y.badge ||
+        x.accessibilityLabel != y.accessibilityLabel || x.testID != y.testID ||
+        x.role != y.role) {
+      return false;
+    }
+  }
+  return true;
+}
+
+static inline NSString *NSStringFromStd(const std::string &s, NSString *fallback) {
+  return s.empty() ? fallback : [NSString stringWithUTF8String:s.c_str()];
+}
+
+static inline bool LabelStyleEqual(
+    const PCNavigationRailLabelStyleStruct &a,
+    const PCNavigationRailLabelStyleStruct &b) {
+  return a.fontFamily == b.fontFamily && a.fontSize == b.fontSize &&
+         a.fontWeight == b.fontWeight && a.fontStyle == b.fontStyle;
+}
+
+/// Builds the label font from RN-style font props, or nil when every field is
+/// unset so the rail keeps its default. Without a fontSize the size follows
+/// Dynamic Type (the caption style), capped at maxFontSizeMultiplier times its
+/// default size when that is 1 or more.
+static UIFont *FontFromLabelStyle(const PCNavigationRailLabelStyleStruct &style, double maxFontSizeMultiplier) {
+  if (style.fontFamily.empty() && style.fontSize <= 0 &&
+      style.fontWeight.empty() && style.fontStyle.empty() && maxFontSizeMultiplier < 1) {
+    return nil;
+  }
+  UIFont *caption = [UIFont preferredFontForTextStyle:UIFontTextStyleCaption1];
+  NSNumber *size = style.fontSize > 0 ? @(style.fontSize) : nil;
+  if (!size && maxFontSizeMultiplier >= 1) {
+    UITraitCollection *defaultTraits =
+        [UITraitCollection traitCollectionWithPreferredContentSizeCategory:UIContentSizeCategoryLarge];
+    CGFloat baseSize = [UIFont preferredFontForTextStyle:UIFontTextStyleCaption1
+                           compatibleWithTraitCollection:defaultTraits].pointSize;
+    size = @(MIN(caption.pointSize, baseSize * maxFontSizeMultiplier));
+  }
+  return [RCTFont updateFont:[UIFont systemFontOfSize:caption.pointSize weight:UIFontWeightMedium]
+                  withFamily:NSStringFromStd(style.fontFamily, nil)
+                        size:size
+                      weight:NSStringFromStd(style.fontWeight, nil)
+                       style:NSStringFromStd(style.fontStyle, nil)
+                     variant:nil
+             scaleMultiplier:1.0];
+}
+} // namespace
+
+@interface PCNavigationRail ()
+
+- (void)updateMeasurements;
+
+@end
+
+@implementation PCNavigationRail {
+  PCNavigationRailView *_view;
+  MeasuringPCNavigationRailShadowNode::ConcreteState::Shared _state;
+}
+
++ (ComponentDescriptorProvider)componentDescriptorProvider {
+  return concreteComponentDescriptorProvider<MeasuringPCNavigationRailComponentDescriptor>();
+}
+
+- (instancetype)initWithFrame:(CGRect)frame {
+  if (self = [super initWithFrame:frame]) {
+    // Fabric views seed _props with their own defaults: RCTViewComponentView
+    // asserts on it in debug builds of React Native core, and the first
+    // updateProps would otherwise read the base ViewProps as the component's.
+    static const auto defaultProps = std::make_shared<const PCNavigationRailProps>();
+    _props = defaultProps;
+
+    // A plain subview rather than the contentView, which Fabric sizes to the
+    // content frame: the width padding (see shared/) would leave it none
+    _view = [PCNavigationRailView new];
+    [self addSubview:_view];
+
+    __weak __typeof(self) weakSelf = self;
+
+    _view.onItemPress = ^(NSInteger index, NSString *value, BOOL reselected) {
+      __typeof(self) strongSelf = weakSelf;
+      if (!strongSelf) return;
+
+      [strongSelf->_view.haptics performIn:strongSelf->_view];
+
+      auto eventEmitter =
+          std::static_pointer_cast<const PCNavigationRailEventEmitter>(strongSelf->_eventEmitter);
+      if (!eventEmitter) return;
+
+      PCNavigationRailEventEmitter::OnItemPress payload = {
+          .index = (int)index,
+          .value = value.UTF8String,
+          .reselected = reselected ? "true" : "false",
+      };
+      eventEmitter->onItemPress(payload);
+    };
+
+    _view.onNeedsRemeasure = ^{
+      __typeof(self) strongSelf = weakSelf;
+      if (!strongSelf) return;
+      [strongSelf updateMeasurements];
+    };
+  }
+  return self;
+}
+
+- (void)layoutSubviews {
+  [super layoutSubviews];
+  _view.frame = self.bounds;
+}
+
+// The header goes above the destinations; the rail places it
+- (void)mountChildComponentView:(UIView<RCTComponentViewProtocol> *)childComponentView index:(NSInteger)index {
+  [_view.headerContainer insertSubview:childComponentView atIndex:index];
+}
+
+- (void)unmountChildComponentView:(UIView<RCTComponentViewProtocol> *)childComponentView index:(NSInteger)index {
+  [childComponentView removeFromSuperview];
+}
+
+- (void)updateProps:(Props::Shared const &)props
+           oldProps:(Props::Shared const &)oldProps {
+  const auto &newProps = *std::static_pointer_cast<const PCNavigationRailProps>(props);
+  const auto prevProps = std::static_pointer_cast<const PCNavigationRailProps>(oldProps);
+
+  if (!prevProps || newProps.expanded != prevProps->expanded) {
+    _view.expanded = newProps.expanded == "true";
+  }
+
+  if (!prevProps || newProps.labelVisibility != prevProps->labelVisibility) {
+    _view.labelVisibility = NSStringFromStd(newProps.labelVisibility, @"auto");
+  }
+
+  if (!prevProps || newProps.menuGravity != prevProps->menuGravity) {
+    _view.menuGravity = NSStringFromStd(newProps.menuGravity, @"top");
+  }
+
+  if (!prevProps || !ItemsEqual(newProps.items, prevProps->items)) {
+    NSMutableArray *arr = [NSMutableArray new];
+    for (const auto &item : newProps.items) {
+      [arr addObject:@{
+        @"label" : NSStringFromStd(item.label, @""),
+        @"value" : NSStringFromStd(item.value, @""),
+        @"disabled" : NSStringFromStd(item.disabled, @"enabled"),
+        @"iconType" : NSStringFromStd(item.iconType, @""),
+        @"iconName" : NSStringFromStd(item.iconName, @""),
+        @"iconRequest" : NSStringFromStd(item.iconRequest, @""),
+        @"iconUri" : NSStringFromStd(item.iconUri, @""),
+        @"iconScale" : @(item.iconScale),
+        @"iconTinted" : NSStringFromStd(item.iconTinted, @"true"),
+        @"selectedIconType" : NSStringFromStd(item.selectedIconType, @""),
+        @"selectedIconName" : NSStringFromStd(item.selectedIconName, @""),
+        @"selectedIconRequest" : NSStringFromStd(item.selectedIconRequest, @""),
+        @"selectedIconUri" : NSStringFromStd(item.selectedIconUri, @""),
+        @"selectedIconScale" : @(item.selectedIconScale),
+        @"selectedIconTinted" : NSStringFromStd(item.selectedIconTinted, @"true"),
+        @"badge" : NSStringFromStd(item.badge, @""),
+        @"accessibilityLabel" : NSStringFromStd(item.accessibilityLabel, @""),
+        @"testID" : NSStringFromStd(item.testID, @""),
+        @"role" : NSStringFromStd(item.role, @""),
+      }];
+    }
+    _view.items = arr;
+  }
+
+  if (!prevProps || newProps.selectedValue != prevProps->selectedValue) {
+    _view.selectedValue = NSStringFromStd(newProps.selectedValue, @"");
+  }
+
+  // Colors arrive as SharedColor (already processed by React Native)
+  if (!prevProps || newProps.activeTintColor != prevProps->activeTintColor) {
+    _view.activeTintColor = RCTUIColorFromSharedColor(newProps.activeTintColor);
+  }
+  if (!prevProps || newProps.inactiveTintColor != prevProps->inactiveTintColor) {
+    _view.inactiveTintColor = RCTUIColorFromSharedColor(newProps.inactiveTintColor);
+  }
+  if (!prevProps || newProps.railColor != prevProps->railColor) {
+    _view.railColor = RCTUIColorFromSharedColor(newProps.railColor);
+  }
+  if (!prevProps || newProps.badgeBackgroundColor != prevProps->badgeBackgroundColor) {
+    _view.badgeBackgroundColor = RCTUIColorFromSharedColor(newProps.badgeBackgroundColor);
+  }
+  if (!prevProps || newProps.badgeTextColor != prevProps->badgeTextColor) {
+    _view.badgeTextColor = RCTUIColorFromSharedColor(newProps.badgeTextColor);
+  }
+
+  if (!prevProps || !LabelStyleEqual(newProps.labelStyle, prevProps->labelStyle) ||
+      newProps.maxFontSizeMultiplier != prevProps->maxFontSizeMultiplier) {
+    _view.labelFont = FontFromLabelStyle(newProps.labelStyle, newProps.maxFontSizeMultiplier);
+  }
+
+  // items' systemItem: TabBar only
+  if (!prevProps || newProps.haptics != prevProps->haptics) {
+    _view.haptics.kind = NSStringFromStd(newProps.haptics, @"");
+  }
+
+  // androidIndicatorColor / androidRippleColor: Android only
+
+  [super updateProps:props oldProps:oldProps];
+
+  [self updateMeasurements];
+}
+
+#pragma mark - State (Measuring)
+
+- (void)updateState:(const State::Shared &)state
+           oldState:(const State::Shared &)oldState {
+  _state = std::static_pointer_cast<const MeasuringPCNavigationRailShadowNode::ConcreteState>(state);
+
+  if (oldState == nullptr) {
+    [self updateMeasurements];
+  }
+
+  [super updateState:state oldState:oldState];
+}
+
+- (void)updateMeasurements {
+  if (_state == nullptr) return;
+
+  // The rail's natural width; the height is the app's
+  PCNavigationRailStateFrameSize next;
+  next.frameSize = {(Float)[_view naturalWidth], 0};
+  if (_state->getData() != next) {
+    _state->updateState(std::move(next));
+  }
+}
+
+@end
+
+Class<RCTComponentViewProtocol> PCNavigationRailCls(void) {
+  return PCNavigationRail.class;
+}