@symbiote-native/react 3.2.0 → 3.3.0

package/build/components/checkbox-props.d.ts

@@ -0,0 +1,5 @@
+import type { ICheckboxProps as ICheckboxBaseProps } from '@symbiote-native/components';
+import type { IViewProps } from '../components';
+export type ICheckboxProps = ICheckboxBaseProps & Omit<IViewProps, keyof ICheckboxBaseProps | 'children'> & {
+    className?: string;
+};

package/build/components/checkbox-props.js

@@ -0,0 +1 @@
+export {};

package/build/descriptor-to-react/with-children.d.ts

@@ -0,0 +1,4 @@
+import type { ReactElement, ReactNode } from 'react';
+import type { IDescriptor } from '@symbiote-native/components';
+/** The element of a descriptor with the app children after its own, for wrappers */
+export declare function descriptorToReactWithChildren(node: IDescriptor, children: ReactNode): ReactElement;

package/build/descriptor-to-react/with-children.js

@@ -0,0 +1,6 @@
+import { createElement } from 'react';
+import { descriptorToReact } from './index.js';
+/** The element of a descriptor with the app children after its own, for wrappers */
+export function descriptorToReactWithChildren(node, children) {
+    return createElement(node.type, node.props, ...node.children.map(child => typeof child === 'string' ? child : descriptorToReact(child)), children);
+}

package/build/hooks/use-event.d.ts

@@ -0,0 +1,6 @@
+import type { IEventEmitterOf, IEventName, IEventPayload, IEventsMap } from '@symbiote-native/engine';
+/** Calls the listener for each event, the latest one, and stops when the component unmounts */
+export declare function useEventListener<TEventsMap extends IEventsMap, TName extends IEventName<TEventsMap>>(emitter: IEventEmitterOf<TEventsMap>, eventName: TName, listener: TEventsMap[TName]): void;
+/** The payload of the last event, `initialValue` (or `null`) until the first one */
+export declare function useEvent<TEventsMap extends IEventsMap, TName extends IEventName<TEventsMap>>(emitter: IEventEmitterOf<TEventsMap>, eventName: TName, initialValue: IEventPayload<TEventsMap, TName>): IEventPayload<TEventsMap, TName>;
+export declare function useEvent<TEventsMap extends IEventsMap, TName extends IEventName<TEventsMap>>(emitter: IEventEmitterOf<TEventsMap>, eventName: TName): IEventPayload<TEventsMap, TName> | null;

package/build/hooks/use-event.js

@@ -0,0 +1,15 @@
+// React twins of `useEvent` and `useEventListener` of the `expo` package, for any emitter
+import { useEffect, useRef, useState } from 'react';
+import { bindEventListener } from '@symbiote-native/engine';
+/** Calls the listener for each event, the latest one, and stops when the component unmounts */
+export function useEventListener(emitter, eventName, listener) {
+    // Read at each event, so a listener that changes with every render is not a new subscription
+    const latest = useRef(listener);
+    latest.current = listener;
+    useEffect(() => bindEventListener(emitter, eventName, () => latest.current), [emitter, eventName]);
+}
+export function useEvent(emitter, eventName, initialValue = null) {
+    const [event, setEvent] = useState(initialValue);
+    useEffect(() => bindEventListener(emitter, eventName, () => setEvent), [emitter, eventName]);
+    return event;
+}

package/build/hooks/use-native-view-controller.d.ts

@@ -0,0 +1,3 @@
+import type { ReactElement, Ref } from 'react';
+import type { ICreateNativeViewController } from '@symbiote-native/components';
+export declare function useNativeViewController<THandle>(ref: Ref<THandle> | undefined, createController: ICreateNativeViewController<THandle>, props: object): ReactElement | null;

package/build/hooks/use-native-view-controller.js

@@ -0,0 +1,15 @@
+import { useEffect, useImperativeHandle, useState } from 'react';
+import { createHostNodeHolder } from '@symbiote-native/components';
+import { descriptorToReact } from '../descriptor-to-react/index.js';
+// The body of a React component over a package's native view: one controller per mounted view,
+// its handle goes to the `ref` and its descriptor is bridged to an element
+export function useNativeViewController(ref, createController, props) {
+    const [{ host, controller }] = useState(() => {
+        const holder = createHostNodeHolder();
+        return { host: holder, controller: createController(holder.getNode) };
+    });
+    useImperativeHandle(ref, () => controller.handle, [controller]);
+    useEffect(() => () => controller.dispose?.(), [controller]);
+    const descriptor = controller.render(props);
+    return descriptor ? descriptorToReact(host.capture(descriptor)) : null;
+}

package/build/index.d.ts

@@ -27,6 +27,7 @@ export type { IPressableProps, IPressState, } from './components/pressable/press
 export type { ITouchableOpacityProps, ITouchableHighlightProps, } from './components/touchable/touchable-props';
 export type { ITouchableWithoutFeedbackProps } from './components/touchable-without-feedback/touchable-without-feedback-props';
 export type { IButtonProps } from './components/button-props';
+export type { ICheckboxProps } from './components/checkbox-props';
 export { FlatList } from './components/flat-list';
 export type { IFlatListProps, IFlatListHandle } from './components/flat-list';
 export { SectionList } from './components/section-list';
@@ -40,6 +41,7 @@ export { mount, unmount } from './render';
 export { createPortal, type IPortalContainer } from './create-portal';
 export { createTunnel, type ITunnel } from './create-tunnel';
 export { descriptorToReact } from './descriptor-to-react';
+export { descriptorToReactWithChildren } from './descriptor-to-react/with-children';
 export { findNodeHandle } from './host-instance';
 export type { IHostInstance } from './host-instance';
 export { AppRegistry, setHostRegistrar } from './modules/app-registry';
@@ -58,7 +60,9 @@ export { useWindowDimensions } from './hooks/use-window-dimensions';
 export { useColorScheme } from './hooks/use-color-scheme';
 export { createPermissionHook } from './hooks/create-permission-hook';
 export { createResourceHook } from './hooks/create-resource-hook';
+export { useNativeViewController } from './hooks/use-native-view-controller';
 export { createEventValueHook } from './hooks/create-event-value-hook';
+export { useEvent, useEventListener } from './hooks/use-event';
 export { AccessibilityInfo } from './modules/accessibility-info';
 export type { IAccessibilityChangeEvent, IAccessibilityChangeEventName, IAccessibilityChangeEventHandler, IAccessibilityAnnouncementFinishedEvent, IAnnounceForAccessibilityOptions, IAccessibilityEventType, } from './modules/accessibility-info';
 export { PanResponder } from '@symbiote-native/engine';

package/build/index.js

@@ -32,6 +32,7 @@ export { createTunnel } from './create-tunnel/index.js';
 // an external wrapper package (e.g. @symbiote-native/slider/react over a third-party native view) can map
 // a shared render fn's Descriptor onto React elements through the SAME bridge the adapter uses.
 export { descriptorToReact } from './descriptor-to-react/index.js';
+export { descriptorToReactWithChildren } from './descriptor-to-react/with-children.js';
 export { findNodeHandle } from './host-instance.js';
 // AppRegistry: RN's app entry point over `mount`. setHostRegistrar wires RN's own
 // registrar so the native Fabric host finds our runnable by app key.
@@ -64,7 +65,9 @@ export { useWindowDimensions } from './hooks/use-window-dimensions.js';
 export { useColorScheme } from './hooks/use-color-scheme.js';
 export { createPermissionHook } from './hooks/create-permission-hook.js';
 export { createResourceHook } from './hooks/create-resource-hook.js';
+export { useNativeViewController } from './hooks/use-native-view-controller.js';
 export { createEventValueHook } from './hooks/create-event-value-hook.js';
+export { useEvent, useEventListener } from './hooks/use-event.js';
 export { AccessibilityInfo } from './modules/accessibility-info';
 // Interaction subsystems: gestures, deferred work, and layout transitions.
 export { PanResponder } from '@symbiote-native/engine';

package/build/jsx-runtime.d.ts

@@ -3,6 +3,7 @@ import type { Key } from 'react';
 import type { IViewProps, ITextProps } from './components';
 import type { IPressableProps } from './components/pressable/pressable-props';
 import type { IButtonProps } from './components/button-props';
+import type { ICheckboxProps } from './components/checkbox-props';
 import type { IImageProps } from './components/image/image-props';
 import type { IImageBackgroundProps } from './components/image-background-props';
 import type { IInputAccessoryViewProps } from './components/input-accessory-view-props';
@@ -27,6 +28,7 @@ export interface ICrossedPrimitiveProps {
     text: ITextProps;
     pressable: IPressableProps;
     button: IButtonProps;
+    checkbox: ICheckboxProps;
     image: IImageProps;
     'image-background': IImageBackgroundProps;
     'input-accessory-view': IInputAccessoryViewProps;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@symbiote-native/react",
-  "version": "3.2.0",
+  "version": "3.3.0",
   "description": "SymbioteNative's React adapter — a react-reconciler host config (mutation mode) driving real native iOS/Android views through stock React Native Fabric.",
   "license": "MIT",
   "repository": {
@@ -57,21 +57,21 @@
   },
   "dependencies": {
     "react-reconciler": "^0.33.0",
-    "@symbiote-native/components": "3.1.4",
-    "@symbiote-native/css-parser": "0.5.3"
+    "@symbiote-native/components": "3.2.0",
+    "@symbiote-native/css-parser": "0.5.4"
   },
   "peerDependencies": {
     "react": ">=19.0.0",
     "react-native": ">=0.86",
-    "@symbiote-native/engine": "^1.5.0"
+    "@symbiote-native/engine": "^1.6.0"
   },
   "devDependencies": {
     "@types/node": "^26.0.0",
     "@types/react": "^19.2.0",
     "@types/react-reconciler": "^0.32.2",
     "react": "19.2.3",
-    "@symbiote-native/engine": "1.5.0",
-    "@symbiote-native/test-utils": "0.4.6"
+    "@symbiote-native/engine": "1.6.0",
+    "@symbiote-native/test-utils": "0.4.7"
   },
   "scripts": {
     "typecheck": "tsc --build",