@symbiote-native/react 3.1.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/create-event-value-hook.d.ts

@@ -0,0 +1,2 @@
+import type { IEventValueSource } from '@symbiote-native/engine';
+export declare function createEventValueHook<TSource extends IEventValueSource<TValue, TEvent>, TValue, TEvent extends string = string>(event: TEvent, getValue: (source: TSource) => TValue): (source: TSource) => TValue;

package/build/hooks/create-event-value-hook.js

@@ -0,0 +1,14 @@
+// Every `useXStatus`-style hook (`useAudioPlayerStatus`, `useAudioPlaylistStatus`, ...) binds
+// this to its own event name + initial-value getter instead of repeating the subscribe wiring
+import { useEffect, useState } from 'react';
+export function createEventValueHook(event, getValue) {
+    return function useEventValue(source) {
+        const [value, setValue] = useState(() => getValue(source));
+        useEffect(() => {
+            setValue(getValue(source));
+            const subscription = source.addListener(event, setValue);
+            return () => subscription.remove();
+        }, [source]);
+        return value;
+    };
+}

package/build/hooks/create-permission-hook.d.ts

@@ -0,0 +1,2 @@
+import { type IPermissionHookBehavior, type IPermissionHookMethods, type IPermissionHookResult } from '@symbiote-native/engine';
+export declare function createPermissionHook<TPermission, TOptions extends object>(methods: IPermissionHookMethods<TPermission, TOptions>): (behavior?: IPermissionHookBehavior, methodOptions?: TOptions) => IPermissionHookResult<TPermission>;

package/build/hooks/create-permission-hook.js

@@ -0,0 +1,34 @@
+// Every Expo-wrapper package's own permission hook (`useCameraPermissions`,
+// `useCalendarPermissions`, `useRemindersPermissions`, ...) binds this factory to its `methods`
+import { useEffect, useRef, useState } from 'react';
+import { createPermissionApi, fetchInitialPermission, } from '@symbiote-native/engine';
+export function createPermissionHook(methods) {
+    return function usePermission(behavior, methodOptions) {
+        const [status, setStatus] = useState(null);
+        const isMountedRef = useRef(true);
+        const get = behavior?.get ?? true;
+        const request = behavior?.request ?? false;
+        const apiRef = useRef(createPermissionApi(methods, value => {
+            if (isMountedRef.current)
+                setStatus(value);
+        }));
+        useEffect(() => {
+            isMountedRef.current = true;
+            return () => {
+                isMountedRef.current = false;
+            };
+        }, []);
+        useEffect(() => {
+            fetchInitialPermission(methods, { get, request }, methodOptions, response => {
+                if (isMountedRef.current)
+                    setStatus(response);
+            });
+            // eslint-disable-next-line react-hooks/exhaustive-deps
+        }, [get, request]);
+        return [
+            status,
+            () => apiRef.current.request(methodOptions),
+            () => apiRef.current.get(methodOptions),
+        ];
+    };
+}

package/build/hooks/create-resource-hook.d.ts

@@ -0,0 +1,6 @@
+export type IResourceHookController<TArgs extends unknown[], TResource> = {
+    resolve: (...args: TArgs) => TResource;
+    flushDispose: () => void;
+    dispose: () => void;
+};
+export declare function createResourceHook<TArgs extends unknown[], TResource>(createController: () => IResourceHookController<TArgs, TResource>): (...args: TArgs) => TResource;

package/build/hooks/create-resource-hook.js

@@ -0,0 +1,18 @@
+// Every `useReleasingSharedObject`-style hook (`useAudioPlayer`, `useImageManipulator`, ...)
+// binds this to its own `createXController()` instead of repeating the ref/effect wiring
+import { useEffect, useRef } from 'react';
+export function createResourceHook(createController) {
+    return function useResource(...args) {
+        const controllerRef = useRef(null);
+        if (!controllerRef.current)
+            controllerRef.current = createController();
+        const resource = controllerRef.current.resolve(...args);
+        useEffect(() => {
+            controllerRef.current?.flushDispose();
+        }, [resource]);
+        useEffect(() => {
+            return () => controllerRef.current?.dispose();
+        }, []);
+        return resource;
+    };
+}

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';
@@ -56,6 +58,11 @@ export { Alert, Share, ActionSheetIOS, Linking, Vibration, ToastAndroid, Setting
 export type { IAlertType, IAlertButtonStyle, IAlertButton, IAlertButtons, IAlertOptions, IShareContent, IShareOptions, IShareAction, IActionSheetIOSOptions, IShareActionSheetIOSOptions, IShareActionSheetError, IUrlEvent, II18nManagerConstants, IDisplayMetrics, IDisplayMetricsAndroid, IDimensionsPayload, IDimensionsSet, IDimensionsKey, IDimensionsChangeListener, IDimensionsStatic, IColorSchemeName, IColorSchemePreference, IAppStateStatus, IAppStateEvent, IKeyboardEventName, IKeyboardEvent, IKeyboardMetrics, IBackPressEventName, IBackPressHandler, IPermission, IPermissionStatus, IRationale, ILayoutAnimationType, ILayoutAnimationProperty, ILayoutAnimationConfig, ILayoutAnimationAnim, IPixelRatioStatic, } from '@symbiote-native/engine';
 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.
@@ -62,6 +63,11 @@ export { Alert, Share, ActionSheetIOS, Linking, Vibration, ToastAndroid, Setting
 // React lifecycle over those core device-state modules.
 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.1.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.3",
-    "@symbiote-native/css-parser": "0.5.2"
+    "@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.4.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.4.0",
-    "@symbiote-native/test-utils": "0.4.5"
+    "@symbiote-native/engine": "1.6.0",
+    "@symbiote-native/test-utils": "0.4.7"
   },
   "scripts": {
     "typecheck": "tsc --build",