react-native-tinyui 0.1.1

package/LICENSE

@@ -0,0 +1,20 @@
+MIT License
+
+Copyright (c) 2026 Darkce
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,172 @@
+# react-native-tinyui
+
+Dependency-free, native iOS `Menu` and `Popover` components for React Native's
+New Architecture. The public API follows normal React composition patterns;
+the native UI is implemented with SwiftUI behind Fabric components.
+
+The initial component behavior is inspired by
+[`@expo/ui`](https://github.com/expo/expo/tree/main/packages/expo-ui), but this
+package does not require Expo Modules or any other runtime package. The
+React Native ↔ SwiftUI bridge follows the approach used by
+[`react-native-pager-view`](https://github.com/callstack/react-native-pager-view):
+a Fabric component view hosts the SwiftUI view through a `UIHostingController`.
+
+## Requirements
+
+- React Native with the New Architecture enabled
+- iOS 17 or newer
+- `react` and `react-native` are the only peer dependencies
+
+This package intentionally ships only iOS native code. Android and web are not
+supported targets.
+
+## Installation
+
+```sh
+npm install react-native-tinyui
+cd ios && pod install
+```
+
+### Optional component selection
+
+To reduce the native code compiled into your app, list only the components you
+use in your app's `package.json`:
+
+```json
+{
+  "react-native-tinyui": {
+    "components": ["Menu"]
+  }
+}
+```
+
+Available components:
+
+- `Menu`
+- `Popover`
+
+Both components are enabled by default. Use an empty `components` array to
+compile only the TurboModule core. Run `pod install` again whenever this list
+changes. Rendering a component whose native part was not selected throws an
+error that names the missing component.
+
+Component-specific JavaScript entry points are also available:
+
+```tsx
+import { Menu } from 'react-native-tinyui/menu';
+import { Popover } from 'react-native-tinyui/popover';
+```
+
+The root `react-native-tinyui` imports remain supported for backwards
+compatibility. JavaScript entry points provide cleaner dependency boundaries;
+`react-native-tinyui.components` controls which native source files are compiled.
+
+## Menu
+
+`Menu` uses `children` as its trigger and receives its native menu entries
+through the `options` prop. Without `onPrimaryAction`, a tap opens the menu.
+When `onPrimaryAction` is present, a tap invokes it and a long press opens the
+menu.
+
+```tsx
+import { Menu } from 'react-native-tinyui';
+
+<Menu
+  accessibilityLabel="Document actions"
+  onPrimaryAction={() => openDocument()}
+  options={[
+    {
+      title: 'Rename',
+      systemImage: 'square.and.pencil',
+      onSelect: rename,
+    },
+    {
+      title: 'Pinned',
+      state: 'on',
+      systemImage: 'pin',
+      onSelect: togglePinned,
+    },
+    {
+      type: 'submenu',
+      title: 'Share',
+      systemImage: 'square.and.arrow.up',
+      options: [
+        { title: 'Copy link', onSelect: copyLink },
+        { title: 'Invite people', onSelect: invitePeople },
+      ],
+    },
+    { type: 'divider' },
+    {
+      title: 'Delete',
+      destructive: true,
+      systemImage: 'trash',
+      onSelect: remove,
+    },
+  ]}
+>
+  <View style={styles.button}>
+    <Text>Actions</Text>
+  </View>
+</Menu>;
+```
+
+Actions are the default option type. Use `type: 'submenu'`, `type: 'section'`,
+or `type: 'divider'` for structural entries; nested entries use their own
+`options` array. SF Symbols are passed with `systemImage`; missing symbols
+simply render no image.
+
+Action options support `subtitle`, `state`, `destructive`, `disabled`, `hidden`,
+and `keepOpen`. Use `titleColor` to customize the title, or `icon` to load an
+image from the containing app's asset catalog; `iconColor` tints either an asset
+image or an SF Symbol. These colors accept React Native `ColorValue`s, including
+dynamic and semantic iOS colors. Submenus support the same label fields plus
+`destructive`, `disabled`, `hidden`, and `displayInline`.
+
+## Popover
+
+`Popover` supports standard controlled and uncontrolled React state. Its content
+remains a normal interactive React Native view tree hosted by a real
+`UIPopoverPresentationController`.
+
+```tsx
+import { Popover, PopoverClose } from 'react-native-tinyui';
+
+<Popover
+  defaultOpen={false}
+  attachmentAnchor="bottom"
+  arrowEdge="top"
+  contentSize={{ width: 320, height: 220 }}
+  onOpenChange={(open) => console.log({ open })}
+  content={({ close }) => (
+    <View style={styles.content}>
+      <Text>Any React Native content can be rendered here.</Text>
+      <PopoverClose close={close} style={styles.doneButton}>
+        <Text>Done</Text>
+      </PopoverClose>
+    </View>
+  )}
+>
+  <View style={styles.button}>
+    <Text>Show details</Text>
+  </View>
+</Popover>;
+```
+
+The trigger is `children` — tapping it opens the popover. The popover body is
+the `content` prop, which can be a node or a render function receiving
+`{ close }` to dismiss the popover from within. `PopoverClose` (also available
+as `Popover.Close`) renders a `Pressable` that calls `close` when pressed.
+
+Use `open` with `onOpenChange` for a controlled popover, or `defaultOpen` for an
+uncontrolled one. `contentSize` defaults to 320 × 240 points and can be updated
+while the popover is visible.
+
+## Contributing
+
+- [Development workflow](CONTRIBUTING.md#development-workflow)
+- [Sending a pull request](CONTRIBUTING.md#sending-a-pull-request)
+- [Code of conduct](CODE_OF_CONDUCT.md)
+
+## License
+
+MIT

package/Tinyui.podspec

@@ -0,0 +1,85 @@
+require "json"
+require "pathname"
+
+package = JSON.parse(File.read(File.join(__dir__, "package.json")))
+
+components = {
+  "Menu" => {
+    :source_files => "ios/Menu/**/*.{h,m,mm,swift,cpp}",
+    :definition => "TINYUI_FEATURE_MENU=1",
+    :frameworks => ["UIKit"],
+  },
+  "Popover" => {
+    :source_files => "ios/Popover/**/*.{h,m,mm,swift,cpp}",
+    :definition => "TINYUI_FEATURE_POPOVER=1",
+    :frameworks => ["UIKit"],
+  },
+}
+
+configured_components = nil
+app_path = ENV["APP_PATH"]
+
+unless app_path.nil? || app_path.empty?
+  app_root = Pathname.new(app_path)
+  unless app_root.absolute?
+    app_root = Pod::Config.instance.installation_root.join(app_root)
+  end
+
+  app_package_path = app_root.join("package.json").cleanpath
+  if app_package_path.file?
+    app_package = JSON.parse(File.read(app_package_path))
+    tinyui_config = app_package["react-native-tinyui"]
+
+    unless tinyui_config.nil?
+      unless tinyui_config.is_a?(Hash)
+        raise "react-native-tinyui in #{app_package_path} must be an object"
+      end
+
+      configured_components = tinyui_config["components"]
+      unless configured_components.is_a?(Array) && configured_components.all? { |component| component.is_a?(String) }
+        raise "react-native-tinyui.components in #{app_package_path} must be an array of strings"
+      end
+    end
+  end
+end
+
+selected_component_names = configured_components.nil? ? components.keys : configured_components.uniq
+
+unknown_components = selected_component_names - components.keys
+unless unknown_components.empty?
+  raise "Unknown react-native-tinyui components: #{unknown_components.join(', ')}. " \
+    "Available components: #{components.keys.join(', ')}"
+end
+
+if defined?(Pod::UI)
+  selection = selected_component_names.empty? ? "Core only" : selected_component_names.join(", ")
+  source = configured_components.nil? ? "defaults" : "package.json"
+  Pod::UI.puts "[TinyUI] Enabled components from #{source}: #{selection}"
+end
+
+selected_components = selected_component_names.map { |name| components.fetch(name) }
+source_files = ["ios/Core/**/*.{h,m,mm,swift,cpp}"] + selected_components.map { |component| component[:source_files] }
+definitions = selected_components.map { |component| component[:definition] }
+frameworks = selected_components.flat_map { |component| component.fetch(:frameworks, []) }.uniq
+
+Pod::Spec.new do |s|
+  s.name         = "Tinyui"
+  s.version      = package["version"]
+  s.summary      = package["description"]
+  s.homepage     = package["homepage"]
+  s.license      = package["license"]
+  s.authors      = package["author"]
+
+  s.platforms    = { :ios => "17.0" }
+  s.source       = { :git => "https://github.com/luoxuhai/react-native-tinyui.git", :tag => "#{s.version}" }
+
+  s.source_files = source_files
+  s.private_header_files = ["ios/Core/**/*.h", "ios/Menu/**/*.h", "ios/Popover/**/*.h"]
+  s.swift_version = "5.0"
+  s.frameworks = frameworks unless frameworks.empty?
+  s.pod_target_xcconfig = {
+    "GCC_PREPROCESSOR_DEFINITIONS" => "$(inherited) #{definitions.join(' ')}",
+  }
+
+  install_modules_dependencies(s)
+end

package/ios/Core/Tinyui.h

@@ -0,0 +1,8 @@
+#import <TinyuiSpec/TinyuiSpec.h>
+
+NS_ASSUME_NONNULL_BEGIN
+
+@interface Tinyui : NativeTinyuiSpecBase <NativeTinyuiSpec>
+@end
+
+NS_ASSUME_NONNULL_END

package/ios/Core/Tinyui.mm

@@ -0,0 +1,30 @@
+#import "Tinyui.h"
+
+@implementation Tinyui
+
+- (NSArray<NSString *> *)getEnabledComponents
+{
+  NSMutableArray<NSString *> *components = [NSMutableArray array];
+
+#if TINYUI_FEATURE_MENU
+  [components addObject:@"Menu"];
+#endif
+#if TINYUI_FEATURE_POPOVER
+  [components addObject:@"Popover"];
+#endif
+
+  return components;
+}
+
+- (std::shared_ptr<facebook::react::TurboModule>)getTurboModule:
+    (const facebook::react::ObjCTurboModule::InitParams &)params
+{
+  return std::make_shared<facebook::react::NativeTinyuiSpecJSI>(params);
+}
+
++ (NSString *)moduleName
+{
+  return @"Tinyui";
+}
+
+@end

package/ios/Core/TinyuiComponentClasses.mm

@@ -0,0 +1,27 @@
+#import <React/RCTComponentViewProtocol.h>
+
+#if TINYUI_FEATURE_MENU
+#import "TinyuiMenuView.h"
+#endif
+
+#if TINYUI_FEATURE_POPOVER
+#import "TinyuiPopoverView.h"
+#endif
+
+Class<RCTComponentViewProtocol> TinyuiMenuViewCls(void)
+{
+#if TINYUI_FEATURE_MENU
+  return TinyuiMenuView.class;
+#else
+  return nil;
+#endif
+}
+
+Class<RCTComponentViewProtocol> TinyuiPopoverViewCls(void)
+{
+#if TINYUI_FEATURE_POPOVER
+  return TinyuiPopoverView.class;
+#else
+  return nil;
+#endif
+}

package/ios/Core/TinyuiHostingHelpers.swift

@@ -0,0 +1,74 @@
+import SwiftUI
+import UIKit
+
+/**
+ * Identifiable wrapper used to render React Native views (UIView) inside
+ * SwiftUI. Modeled after react-native-pager-view's bridge.
+ */
+struct IdentifiablePlatformView: Identifiable, Equatable {
+  let id = UUID()
+  let view: UIView
+
+  init(_ view: UIView) {
+    self.view = view
+  }
+}
+
+/**
+ * Renders a UIView inside SwiftUI. Uses UIViewControllerRepresentable so the
+ * hosted React view keeps a valid view-controller hierarchy.
+ */
+struct RepresentableView: UIViewControllerRepresentable {
+  var view: UIView
+
+  func makeUIViewController(context: Context) -> PlatformChildViewController {
+    let viewController = PlatformChildViewController()
+    viewController.wrappedView = view
+    return viewController
+  }
+
+  func updateUIViewController(
+    _ uiViewController: PlatformChildViewController,
+    context: Context
+  ) {
+    if uiViewController.wrappedView !== view {
+      uiViewController.wrappedView = view
+    }
+  }
+}
+
+class PlatformChildViewController: UIViewController {
+  var wrappedView: UIView? {
+    didSet {
+      guard oldValue !== wrappedView else { return }
+      oldValue?.removeFromSuperview()
+      if isViewLoaded {
+        mountWrappedView()
+      }
+    }
+  }
+
+  override func viewDidLoad() {
+    super.viewDidLoad()
+    view.backgroundColor = .clear
+    mountWrappedView()
+  }
+
+  private func mountWrappedView() {
+    guard let wrappedView else { return }
+    view.addSubview(wrappedView)
+    wrappedView.translatesAutoresizingMaskIntoConstraints = false
+    wrappedView.pinEdges(to: view)
+  }
+}
+
+extension UIView {
+  func pinEdges(to other: UIView) {
+    NSLayoutConstraint.activate([
+      leadingAnchor.constraint(equalTo: other.leadingAnchor),
+      trailingAnchor.constraint(equalTo: other.trailingAnchor),
+      topAnchor.constraint(equalTo: other.topAnchor),
+      bottomAnchor.constraint(equalTo: other.bottomAnchor),
+    ])
+  }
+}

package/ios/Menu/TinyuiMenuProvider.swift

@@ -0,0 +1,110 @@
+import SwiftUI
+import UIKit
+
+/**
+ * UIKit bridge between the Fabric `TinyuiMenuView` component and the SwiftUI
+ * `TinyuiMenuSwiftUIView`. Hosts the SwiftUI view through a
+ * `UIHostingController`, mirroring react-native-pager-view's `PagerViewProvider`.
+ *
+ * The presenting view controller is supplied by the Objective-C++ component
+ * view so this file does not depend on React.
+ */
+@objc public class TinyuiMenuProvider: UIView {
+  private weak var delegate: TinyuiMenuViewDelegate?
+  private var hostingController: UIHostingController<TinyuiMenuSwiftUIView>?
+  private var props = TinyuiMenuProps()
+
+  /// Presenting view controller, resolved by the component view from its
+  /// React view controller hierarchy.
+  @objc public weak var parentViewController: UIViewController? {
+    didSet {
+      if window != nil {
+        setupView()
+      }
+    }
+  }
+
+  /// The React Native trigger view rendered as the menu's label.
+  @objc public var triggerView: UIView? {
+    didSet {
+      props.triggerView = triggerView
+    }
+  }
+
+  /// JSON menu configuration passed to the SwiftUI view.
+  @objc public var menuConfig: String = "{}" {
+    didSet {
+      props.menuConfig = menuConfig
+    }
+  }
+
+  @objc public var disabled: Bool = false {
+    didSet {
+      props.disabled = disabled
+    }
+  }
+
+  @objc public var hasPrimaryAction: Bool = false {
+    didSet {
+      props.hasPrimaryAction = hasPrimaryAction
+    }
+  }
+
+  @objc public convenience init(delegate: TinyuiMenuViewDelegate) {
+    self.init()
+    self.delegate = delegate
+  }
+
+  override public func didMoveToWindow() {
+    super.didMoveToWindow()
+    if window != nil {
+      setupView()
+    }
+  }
+
+  override public func layoutSubviews() {
+    super.layoutSubviews()
+    if window != nil {
+      setupView()
+    }
+  }
+
+  private func setupView() {
+    if hostingController != nil {
+      syncParentViewController()
+      return
+    }
+
+    guard let parentViewController else {
+      return
+    }
+
+    let hostingController = UIHostingController(
+      rootView: TinyuiMenuSwiftUIView(props: props, delegate: delegate)
+    )
+    self.hostingController = hostingController
+
+    parentViewController.addChild(hostingController)
+    hostingController.view.backgroundColor = .clear
+    addSubview(hostingController.view)
+    hostingController.view.translatesAutoresizingMaskIntoConstraints = false
+    hostingController.view.pinEdges(to: self)
+    hostingController.didMove(toParent: parentViewController)
+  }
+
+  /// Keeps the hosting controller attached to the current view controller.
+  private func syncParentViewController(to parentViewController: UIViewController? = nil) {
+    guard
+      let hostingController,
+      let parentViewController = parentViewController ?? self.parentViewController,
+      hostingController.parent !== parentViewController
+    else {
+      return
+    }
+
+    hostingController.willMove(toParent: nil)
+    hostingController.removeFromParent()
+    parentViewController.addChild(hostingController)
+    hostingController.didMove(toParent: parentViewController)
+  }
+}

package/ios/Menu/TinyuiMenuView.h

@@ -0,0 +1,14 @@
+#if TINYUI_FEATURE_MENU
+
+#import <React/RCTViewComponentView.h>
+#import <UIKit/UIKit.h>
+
+NS_ASSUME_NONNULL_BEGIN
+
+@interface TinyuiMenuView : RCTViewComponentView
+@end
+
+NS_ASSUME_NONNULL_END
+
+#endif // TINYUI_FEATURE_MENU
+

package/ios/Menu/TinyuiMenuView.mm

@@ -0,0 +1,120 @@
+#if TINYUI_FEATURE_MENU
+
+#import "TinyuiMenuView.h"
+
+#import <React/RCTConversions.h>
+#import <React/UIView+React.h>
+
+#import <react/renderer/components/TinyuiSpec/ComponentDescriptors.h>
+#import <react/renderer/components/TinyuiSpec/EventEmitters.h>
+#import <react/renderer/components/TinyuiSpec/Props.h>
+#import <react/renderer/components/TinyuiSpec/RCTComponentViewHelpers.h>
+
+#import "RCTFabricComponentsPlugins.h"
+
+#if __has_include("Tinyui-Swift.h")
+#import "Tinyui-Swift.h"
+#endif
+
+using namespace facebook::react;
+
+@interface TinyuiMenuView () <RCTTinyuiMenuViewViewProtocol, TinyuiMenuViewDelegate>
+@end
+
+@implementation TinyuiMenuView {
+  TinyuiMenuProvider *_menuProvider;
+  UIView *_triggerView;
+}
+
++ (ComponentDescriptorProvider)componentDescriptorProvider
+{
+  return concreteComponentDescriptorProvider<TinyuiMenuViewComponentDescriptor>();
+}
+
+- (instancetype)initWithFrame:(CGRect)frame
+{
+  if (self = [super initWithFrame:frame]) {
+    static const auto defaultProps = std::make_shared<const TinyuiMenuViewProps>();
+    _props = defaultProps;
+
+    _menuProvider = [[TinyuiMenuProvider alloc] initWithDelegate:self];
+    self.contentView = _menuProvider;
+  }
+  return self;
+}
+
+- (void)didMoveToWindow
+{
+  [super didMoveToWindow];
+  if (self.window != nil) {
+    _menuProvider.parentViewController = [self reactViewController];
+  }
+}
+
+#pragma mark - React lifecycle
+
+- (void)mountChildComponentView:(UIView<RCTComponentViewProtocol> *)childComponentView
+                          index:(NSInteger)index
+{
+  // TinyuiMenuView renders its trigger as a child; we hand it to the
+  // provider, which uses it as the SwiftUI `Menu` label.
+  _triggerView = childComponentView;
+  _menuProvider.triggerView = childComponentView;
+  [_menuProvider addSubview:childComponentView];
+}
+
+- (void)unmountChildComponentView:(UIView<RCTComponentViewProtocol> *)childComponentView
+                            index:(NSInteger)index
+{
+  [childComponentView removeFromSuperview];
+  if (_triggerView == childComponentView) {
+    _triggerView = nil;
+    _menuProvider.triggerView = nil;
+  }
+}
+
+#pragma mark - Props
+
+- (void)updateProps:(Props::Shared const &)props
+           oldProps:(Props::Shared const &)oldProps
+{
+  const auto &oldMenuProps = *std::static_pointer_cast<TinyuiMenuViewProps const>(_props);
+  const auto &newMenuProps = *std::static_pointer_cast<TinyuiMenuViewProps const>(props);
+
+  if (oldMenuProps.menuConfig != newMenuProps.menuConfig) {
+    _menuProvider.menuConfig = RCTNSStringFromString(newMenuProps.menuConfig);
+  }
+  if (oldMenuProps.hasPrimaryAction != newMenuProps.hasPrimaryAction) {
+    _menuProvider.hasPrimaryAction = newMenuProps.hasPrimaryAction;
+  }
+  if (oldMenuProps.disabled != newMenuProps.disabled) {
+    _menuProvider.disabled = newMenuProps.disabled;
+  }
+
+  [super updateProps:props oldProps:oldProps];
+}
+
+#pragma mark - TinyuiMenuViewDelegate
+
+- (void)onItemPressWithId:(NSString *)identifier
+{
+  if (_eventEmitter == nullptr) {
+    return;
+  }
+  std::static_pointer_cast<const TinyuiMenuViewEventEmitter>(_eventEmitter)
+      ->onItemPress(TinyuiMenuViewEventEmitter::OnItemPress{
+          .id = std::string(identifier.UTF8String ?: "")});
+}
+
+- (void)onPrimaryAction
+{
+  if (_eventEmitter == nullptr) {
+    return;
+  }
+  std::static_pointer_cast<const TinyuiMenuViewEventEmitter>(_eventEmitter)
+      ->onPrimaryAction(TinyuiMenuViewEventEmitter::OnPrimaryAction{});
+}
+
+@end
+
+#endif // TINYUI_FEATURE_MENU