@ng-native/expo 0.14.0 → 0.16.0

package/android/build.gradle

@@ -19,4 +19,6 @@ dependencies {
   implementation 'androidx.core:core:1.17.0'
   // `<search-field>`'s SearchView. React Native depends on AppCompat already.
   implementation 'androidx.appcompat:appcompat:1.7.0'
+  // ReactTypefaceUtils, which finds a face expo-font registered for `<search-field>` as a text's.
+  implementation 'com.facebook.react:react-android'
 }

package/android/src/main/java/dev/ngnative/expo/SearchFieldModule.kt

@@ -1,11 +1,15 @@
 package dev.ngnative.expo
 
 import android.content.Context
+import android.util.TypedValue
 import android.view.inputmethod.InputMethodManager
+import android.widget.TextView
 import androidx.appcompat.widget.SearchView
+import com.facebook.react.views.text.ReactTypefaceUtils
 import expo.modules.kotlin.AppContext
 import expo.modules.kotlin.modules.Module
 import expo.modules.kotlin.modules.ModuleDefinition
+import expo.modules.kotlin.types.Either
 import expo.modules.kotlin.viewevent.EventDispatcher
 import expo.modules.kotlin.views.ExpoView
 
@@ -29,6 +33,19 @@ class SearchFieldModule : Module() {
       Prop("placeholder") { view: SearchFieldView, placeholder: String? ->
         view.search.queryHint = placeholder
       }
+      // The face and size the field's CSS resolves to, as a text's: the face by the name expo-font
+      // registers it under.
+      Prop("fontFamily") { view: SearchFieldView, family: String? -> view.fontFamily = family }
+      Prop("fontSize") { view: SearchFieldView, size: Double? -> view.fontSize = size?.toFloat() }
+      // A weight and a slant no matched face already draws: a number, or `normal` and `bold`.
+      Prop("fontWeight") { view: SearchFieldView, weight: Either<Double, String>? ->
+        view.fontWeight = when {
+          weight == null -> null
+          weight.`is`(Double::class) -> weight.get(Double::class).toInt().toString()
+          else -> weight.get(String::class)
+        }
+      }
+      Prop("fontStyle") { view: SearchFieldView, style: String? -> view.fontStyle = style }
 
       AsyncFunction("focus") { view: SearchFieldView -> view.focus() }.runOnQueue(expo.modules.kotlin.functions.Queues.MAIN)
       AsyncFunction("blur") { view: SearchFieldView -> view.search.clearFocus() }.runOnQueue(expo.modules.kotlin.functions.Queues.MAIN)
@@ -85,6 +102,50 @@ class SearchFieldView(context: Context, appContext: AppContext) : ExpoView(conte
     addView(search, LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT))
   }
 
+  /** The text box, and the face and size it starts with, put back when the CSS names none. */
+  private val input = search.findViewById<TextView>(androidx.appcompat.R.id.search_src_text)
+  private val systemTypeface = input?.typeface
+  private val systemTextSize = input?.textSize
+
+  var fontFamily: String? = null
+    set(value) {
+      field = value
+      applyFont()
+    }
+  var fontSize: Float? = null
+    set(value) {
+      field = value
+      applyFont()
+    }
+  var fontWeight: String? = null
+    set(value) {
+      field = value
+      applyFont()
+    }
+  var fontStyle: String? = null
+    set(value) {
+      field = value
+      applyFont()
+    }
+
+  /**
+   * The CSS's face, weight and slant, found as a text's is, at its size in sp, so it scales with the
+   * font size setting.
+   */
+  private fun applyFont() {
+    val input = input ?: return
+    input.typeface = ReactTypefaceUtils.applyStyles(
+      systemTypeface,
+      ReactTypefaceUtils.parseFontStyle(fontStyle),
+      ReactTypefaceUtils.parseFontWeight(fontWeight),
+      fontFamily,
+      context.assets,
+    )
+    val size = fontSize
+    if (size != null) input.setTextSize(TypedValue.COMPLEX_UNIT_SP, size)
+    else if (systemTextSize != null) input.setTextSize(TypedValue.COMPLEX_UNIT_PX, systemTextSize)
+  }
+
   /** Puts JavaScript's text in the field, unless it answers a keystroke older than the last one. */
   private fun applyText() {
     if (mostRecentEventCount < eventCount || search.query.toString() == text) return

package/dist/camera.d.ts

@@ -1,5 +1,5 @@
 /**
- * `Camera`: a picture taken from the `<expo-camera>` view on screen.
+ * `Camera`: a picture taken, or a video recorded, from the `<expo-camera>` view on screen.
  *
  * ```ts
  * registerExpoViews('expo-camera'); // once, at startup
@@ -14,11 +14,15 @@
  * }
  * ```
  *
+ * A video is `record()`, which resolves once it stops - `stopRecording()`, or a `maxDuration` or
+ * `maxFileSize` reached - on a view with `mode="video"`.
+ *
  * Importing it is all it takes: it applies to every `<expo-camera>` in the template. The view is
  * what takes the picture, so this is a directive on the view rather than a service.
  *
  * In React, `takePictureAsync` is a method on the component's ref. Underneath, it is one of the
- * functions Expo defines on the view (`AsyncFunction("takePicture")` in the module), which native
+ * functions Expo defines on the view (`AsyncFunction("takePicture")` in the module, and `record`
+ * and `stopRecording` beside it), which native
  * finds by reading `nativeTag` off whatever it is called on. So this calls the same function with
  * the tag the engine committed the view under, and no ref is needed.
  */
@@ -26,11 +30,23 @@ import { InjectionToken } from '@angular/core';
 import * as i0 from "@angular/core";
 export type PictureOptions = Omit<import('expo-camera').CameraPictureOptions, 'onPictureSaved' | 'pictureRef'>;
 export type CameraPicture = import('expo-camera').CameraCapturedPicture;
+/** `expo-camera`'s own, less `mirror`, which it has deprecated for the view's `mirror` prop. */
+export type RecordingOptions = Omit<import('expo-camera').CameraRecordingOptions, 'mirror'>;
+/** A recorded video: a file in the cache directory. */
+export interface CameraRecording {
+    readonly uri: string;
+}
 /** The functions `expo-camera` defines on its view, called with the view's tag as `this`. */
 export interface CameraViewFunctions {
     takePicture(this: {
         nativeTag: number;
     }, options: PictureOptions): Promise<CameraPicture>;
+    record(this: {
+        nativeTag: number;
+    }, options: RecordingOptions): Promise<CameraRecording>;
+    stopRecording(this: {
+        nativeTag: number;
+    }): Promise<void> | void;
 }
 export declare class Camera {
     /** Overridden in a test to take pictures without a camera. */
@@ -43,6 +59,16 @@ export declare class Camera {
      * no camera to take it with yet.
      */
     takePicture(options?: PictureOptions): Promise<CameraPicture | null>;
+    /**
+     * Record a video, resolving once the recording stops: `stopRecording()`, a `maxDuration` (in
+     * seconds) or `maxFileSize` (in bytes) reached, or the preview stopping. The view needs
+     * `mode="video"`, and the microphone permission unless it has `mute`: without it, Android rejects
+     * and iOS records without sound. Null without the module, or before the view has reached the
+     * screen.
+     */
+    record(options?: RecordingOptions): Promise<CameraRecording | null>;
+    /** Stop the recording in progress, if there is one: `record()` then resolves with the video. */
+    stopRecording(): Promise<void>;
     static ɵfac: i0.ɵɵFactoryDeclaration<Camera, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<Camera, "expo-camera", ["camera"], {}, {}, never, never, true, never>;
 }

package/dist/camera.js

@@ -1,5 +1,5 @@
 /**
- * `Camera`: a picture taken from the `<expo-camera>` view on screen.
+ * `Camera`: a picture taken, or a video recorded, from the `<expo-camera>` view on screen.
  *
  * ```ts
  * registerExpoViews('expo-camera'); // once, at startup
@@ -14,11 +14,15 @@
  * }
  * ```
  *
+ * A video is `record()`, which resolves once it stops - `stopRecording()`, or a `maxDuration` or
+ * `maxFileSize` reached - on a view with `mode="video"`.
+ *
  * Importing it is all it takes: it applies to every `<expo-camera>` in the template. The view is
  * what takes the picture, so this is a directive on the view rather than a service.
  *
  * In React, `takePictureAsync` is a method on the component's ref. Underneath, it is one of the
- * functions Expo defines on the view (`AsyncFunction("takePicture")` in the module), which native
+ * functions Expo defines on the view (`AsyncFunction("takePicture")` in the module, and `record`
+ * and `stopRecording` beside it), which native
  * finds by reading `nativeTag` off whatever it is called on. So this calls the same function with
  * the tag the engine committed the view under, and no ref is needed.
  */
@@ -52,6 +56,26 @@ export class Camera {
             return null;
         return this.functions.takePicture.call({ nativeTag }, options);
     }
+    /**
+     * Record a video, resolving once the recording stops: `stopRecording()`, a `maxDuration` (in
+     * seconds) or `maxFileSize` (in bytes) reached, or the preview stopping. The view needs
+     * `mode="video"`, and the microphone permission unless it has `mute`: without it, Android rejects
+     * and iOS records without sound. Null without the module, or before the view has reached the
+     * screen.
+     */
+    async record(options = {}) {
+        const nativeTag = this.engine.tagOf(this.node);
+        if (!this.functions || nativeTag === null)
+            return null;
+        return this.functions.record.call({ nativeTag }, options);
+    }
+    /** Stop the recording in progress, if there is one: `record()` then resolves with the video. */
+    async stopRecording() {
+        const nativeTag = this.engine.tagOf(this.node);
+        if (!this.functions || nativeTag === null)
+            return;
+        await this.functions.stopRecording.call({ nativeTag });
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: Camera, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.2.0", type: Camera, isStandalone: true, selector: "expo-camera", exportAs: ["camera"], ngImport: i0 });
 }

package/dist/camera.js.map

@@ -1 +1 @@
-{"version":3,"file":"camera.js","sourceRoot":"","sources":["../src/camera.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAC9E,OAAO,EAAE,MAAM,EAAmB,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;;AAc5D,MAAM,OAAO,MAAM;IACjB,8DAA8D;IAC9D,MAAM,CAAU,MAAM,GAAG,IAAI,cAAc,CACzC,6BAA6B,EAC7B;QACE,OAAO,EAAE,GAAG,EAAE;YACZ,MAAM,IAAI,GAAG,QAAQ,CACnB,GAAG,EAAE,CAAC,OAAO,CAAC,mBAAmB,CAAuC,CACzE,CAAC;YACF,MAAM,MAAM,GAAG,UAAU,CAAC,aAAa,EAAE,GAAG,EAAE,CAC5C,IAAI,EAAE,2BAA2B,CAE9B,YAAY,CAAC,CACjB,CAAC;YACF,iFAAiF;YACjF,IAAI,MAAM,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC;gBAAE,OAAO,MAAwC,CAAC;YAChF,uFAAuF;YACvF,OAAO,MAAM,EAAE,cAAc,EAAE,CAAC,YAAY,CAAC,IAAI,IAAI,CAAC;QACxD,CAAC;KACF,CACF,CAAC;IAEe,SAAS,GAAG,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;IAClC,MAAM,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC;IACxB,IAAI,GAAG,MAAM,CAAyB,UAAU,CAAC,CAAC,aAAa,CAAC;IAEjF;;;OAGG;IACH,KAAK,CAAC,WAAW,CAAC,UAA0B,EAAE;QAC5C,MAAM,SAAS,GAAG,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAC/C,IAAI,CAAC,IAAI,CAAC,SAAS,IAAI,SAAS,KAAK,IAAI;YAAE,OAAO,IAAI,CAAC;QACvD,OAAO,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,SAAS,EAAE,EAAE,OAAO,CAAC,CAAC;IACjE,CAAC;uGAlCU,MAAM;2FAAN,MAAM;;2FAAN,MAAM;kBADlB,SAAS;mBAAC,EAAE,QAAQ,EAAE,aAAa,EAAE,QAAQ,EAAE,QAAQ,EAAE","sourcesContent":["/**\n * `Camera`: a picture taken from the `<expo-camera>` view on screen.\n *\n * ```ts\n * registerExpoViews('expo-camera'); // once, at startup\n *\n * @Component({\n *   imports: [Camera],\n *   template: `<expo-camera facing=\"back\" class=\"flex-1\" />`,\n * })\n * export class Scanner {\n *   private readonly camera = viewChild.required(Camera);\n *   async shoot() { const picture = await this.camera().takePicture({ quality: 0.8 }); }\n * }\n * ```\n *\n * Importing it is all it takes: it applies to every `<expo-camera>` in the template. The view is\n * what takes the picture, so this is a directive on the view rather than a service.\n *\n * In React, `takePictureAsync` is a method on the component's ref. Underneath, it is one of the\n * functions Expo defines on the view (`AsyncFunction(\"takePicture\")` in the module), which native\n * finds by reading `nativeTag` off whatever it is called on. So this calls the same function with\n * the tag the engine committed the view under, and no ref is needed.\n */\nimport { Directive, ElementRef, InjectionToken, inject } from '@angular/core';\nimport { Engine, type EngineNode } from '@ng-native/fabric';\nimport { expoModule, optional, present } from './native.ts';\n\nexport type PictureOptions = Omit<\n  import('expo-camera').CameraPictureOptions,\n  'onPictureSaved' | 'pictureRef'\n>;\nexport type CameraPicture = import('expo-camera').CameraCapturedPicture;\n\n/** The functions `expo-camera` defines on its view, called with the view's tag as `this`. */\nexport interface CameraViewFunctions {\n  takePicture(this: { nativeTag: number }, options: PictureOptions): Promise<CameraPicture>;\n}\n\n@Directive({ selector: 'expo-camera', exportAs: 'camera' })\nexport class Camera {\n  /** Overridden in a test to take pictures without a camera. */\n  static readonly SOURCE = new InjectionToken<CameraViewFunctions | null>(\n    'angular-native.cameraSource',\n    {\n      factory: () => {\n        const core = optional(\n          () => require('expo-modules-core') as typeof import('expo-modules-core'),\n        );\n        const module = expoModule('expo-camera', () =>\n          core?.requireOptionalNativeModule<{\n            ViewPrototypes?: Record<string, CameraViewFunctions>;\n          }>('ExpoCamera'),\n        );\n        // Missing, the stand-in is the functions: taking a picture says what to install.\n        if (module && !present(module)) return module as unknown as CameraViewFunctions;\n        // The camera is the module's first view, so its functions are under the module's name.\n        return module?.ViewPrototypes?.['ExpoCamera'] ?? null;\n      },\n    },\n  );\n\n  private readonly functions = inject(Camera.SOURCE);\n  private readonly engine = inject(Engine);\n  private readonly node = inject<ElementRef<EngineNode>>(ElementRef).nativeElement;\n\n  /**\n   * Take a picture. Null without the module, or before the view has reached the screen - there is\n   * no camera to take it with yet.\n   */\n  async takePicture(options: PictureOptions = {}): Promise<CameraPicture | null> {\n    const nativeTag = this.engine.tagOf(this.node);\n    if (!this.functions || nativeTag === null) return null;\n    return this.functions.takePicture.call({ nativeTag }, options);\n  }\n}\n"]}
+{"version":3,"file":"camera.js","sourceRoot":"","sources":["../src/camera.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAC9E,OAAO,EAAE,MAAM,EAAmB,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;;AAsB5D,MAAM,OAAO,MAAM;IACjB,8DAA8D;IAC9D,MAAM,CAAU,MAAM,GAAG,IAAI,cAAc,CACzC,6BAA6B,EAC7B;QACE,OAAO,EAAE,GAAG,EAAE;YACZ,MAAM,IAAI,GAAG,QAAQ,CACnB,GAAG,EAAE,CAAC,OAAO,CAAC,mBAAmB,CAAuC,CACzE,CAAC;YACF,MAAM,MAAM,GAAG,UAAU,CAAC,aAAa,EAAE,GAAG,EAAE,CAC5C,IAAI,EAAE,2BAA2B,CAE9B,YAAY,CAAC,CACjB,CAAC;YACF,iFAAiF;YACjF,IAAI,MAAM,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC;gBAAE,OAAO,MAAwC,CAAC;YAChF,uFAAuF;YACvF,OAAO,MAAM,EAAE,cAAc,EAAE,CAAC,YAAY,CAAC,IAAI,IAAI,CAAC;QACxD,CAAC;KACF,CACF,CAAC;IAEe,SAAS,GAAG,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;IAClC,MAAM,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC;IACxB,IAAI,GAAG,MAAM,CAAyB,UAAU,CAAC,CAAC,aAAa,CAAC;IAEjF;;;OAGG;IACH,KAAK,CAAC,WAAW,CAAC,UAA0B,EAAE;QAC5C,MAAM,SAAS,GAAG,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAC/C,IAAI,CAAC,IAAI,CAAC,SAAS,IAAI,SAAS,KAAK,IAAI;YAAE,OAAO,IAAI,CAAC;QACvD,OAAO,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,SAAS,EAAE,EAAE,OAAO,CAAC,CAAC;IACjE,CAAC;IAED;;;;;;OAMG;IACH,KAAK,CAAC,MAAM,CAAC,UAA4B,EAAE;QACzC,MAAM,SAAS,GAAG,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAC/C,IAAI,CAAC,IAAI,CAAC,SAAS,IAAI,SAAS,KAAK,IAAI;YAAE,OAAO,IAAI,CAAC;QACvD,OAAO,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,SAAS,EAAE,EAAE,OAAO,CAAC,CAAC;IAC5D,CAAC;IAED,gGAAgG;IAChG,KAAK,CAAC,aAAa;QACjB,MAAM,SAAS,GAAG,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAC/C,IAAI,CAAC,IAAI,CAAC,SAAS,IAAI,SAAS,KAAK,IAAI;YAAE,OAAO;QAClD,MAAM,IAAI,CAAC,SAAS,CAAC,aAAa,CAAC,IAAI,CAAC,EAAE,SAAS,EAAE,CAAC,CAAC;IACzD,CAAC;uGAtDU,MAAM;2FAAN,MAAM;;2FAAN,MAAM;kBADlB,SAAS;mBAAC,EAAE,QAAQ,EAAE,aAAa,EAAE,QAAQ,EAAE,QAAQ,EAAE","sourcesContent":["/**\n * `Camera`: a picture taken, or a video recorded, from the `<expo-camera>` view on screen.\n *\n * ```ts\n * registerExpoViews('expo-camera'); // once, at startup\n *\n * @Component({\n *   imports: [Camera],\n *   template: `<expo-camera facing=\"back\" class=\"flex-1\" />`,\n * })\n * export class Scanner {\n *   private readonly camera = viewChild.required(Camera);\n *   async shoot() { const picture = await this.camera().takePicture({ quality: 0.8 }); }\n * }\n * ```\n *\n * A video is `record()`, which resolves once it stops - `stopRecording()`, or a `maxDuration` or\n * `maxFileSize` reached - on a view with `mode=\"video\"`.\n *\n * Importing it is all it takes: it applies to every `<expo-camera>` in the template. The view is\n * what takes the picture, so this is a directive on the view rather than a service.\n *\n * In React, `takePictureAsync` is a method on the component's ref. Underneath, it is one of the\n * functions Expo defines on the view (`AsyncFunction(\"takePicture\")` in the module, and `record`\n * and `stopRecording` beside it), which native\n * finds by reading `nativeTag` off whatever it is called on. So this calls the same function with\n * the tag the engine committed the view under, and no ref is needed.\n */\nimport { Directive, ElementRef, InjectionToken, inject } from '@angular/core';\nimport { Engine, type EngineNode } from '@ng-native/fabric';\nimport { expoModule, optional, present } from './native.ts';\n\nexport type PictureOptions = Omit<\n  import('expo-camera').CameraPictureOptions,\n  'onPictureSaved' | 'pictureRef'\n>;\nexport type CameraPicture = import('expo-camera').CameraCapturedPicture;\n/** `expo-camera`'s own, less `mirror`, which it has deprecated for the view's `mirror` prop. */\nexport type RecordingOptions = Omit<import('expo-camera').CameraRecordingOptions, 'mirror'>;\n/** A recorded video: a file in the cache directory. */\nexport interface CameraRecording {\n  readonly uri: string;\n}\n\n/** The functions `expo-camera` defines on its view, called with the view's tag as `this`. */\nexport interface CameraViewFunctions {\n  takePicture(this: { nativeTag: number }, options: PictureOptions): Promise<CameraPicture>;\n  record(this: { nativeTag: number }, options: RecordingOptions): Promise<CameraRecording>;\n  stopRecording(this: { nativeTag: number }): Promise<void> | void;\n}\n\n@Directive({ selector: 'expo-camera', exportAs: 'camera' })\nexport class Camera {\n  /** Overridden in a test to take pictures without a camera. */\n  static readonly SOURCE = new InjectionToken<CameraViewFunctions | null>(\n    'angular-native.cameraSource',\n    {\n      factory: () => {\n        const core = optional(\n          () => require('expo-modules-core') as typeof import('expo-modules-core'),\n        );\n        const module = expoModule('expo-camera', () =>\n          core?.requireOptionalNativeModule<{\n            ViewPrototypes?: Record<string, CameraViewFunctions>;\n          }>('ExpoCamera'),\n        );\n        // Missing, the stand-in is the functions: taking a picture says what to install.\n        if (module && !present(module)) return module as unknown as CameraViewFunctions;\n        // The camera is the module's first view, so its functions are under the module's name.\n        return module?.ViewPrototypes?.['ExpoCamera'] ?? null;\n      },\n    },\n  );\n\n  private readonly functions = inject(Camera.SOURCE);\n  private readonly engine = inject(Engine);\n  private readonly node = inject<ElementRef<EngineNode>>(ElementRef).nativeElement;\n\n  /**\n   * Take a picture. Null without the module, or before the view has reached the screen - there is\n   * no camera to take it with yet.\n   */\n  async takePicture(options: PictureOptions = {}): Promise<CameraPicture | null> {\n    const nativeTag = this.engine.tagOf(this.node);\n    if (!this.functions || nativeTag === null) return null;\n    return this.functions.takePicture.call({ nativeTag }, options);\n  }\n\n  /**\n   * Record a video, resolving once the recording stops: `stopRecording()`, a `maxDuration` (in\n   * seconds) or `maxFileSize` (in bytes) reached, or the preview stopping. The view needs\n   * `mode=\"video\"`, and the microphone permission unless it has `mute`: without it, Android rejects\n   * and iOS records without sound. Null without the module, or before the view has reached the\n   * screen.\n   */\n  async record(options: RecordingOptions = {}): Promise<CameraRecording | null> {\n    const nativeTag = this.engine.tagOf(this.node);\n    if (!this.functions || nativeTag === null) return null;\n    return this.functions.record.call({ nativeTag }, options);\n  }\n\n  /** Stop the recording in progress, if there is one: `record()` then resolves with the video. */\n  async stopRecording(): Promise<void> {\n    const nativeTag = this.engine.tagOf(this.node);\n    if (!this.functions || nativeTag === null) return;\n    await this.functions.stopRecording.call({ nativeTag });\n  }\n}\n"]}

package/dist/expo-ui-components.d.ts

@@ -42,12 +42,14 @@ export interface UiModifier {
  */
 export declare class UiHost {
     protected readonly nativeView: true;
+    protected readonly android: boolean;
     readonly matchContents: import("@angular/core").InputSignal<boolean | {
         readonly vertical?: boolean;
         readonly horizontal?: boolean;
     } | undefined>;
     protected readonly matchVertical: Signal<boolean | undefined>;
     protected readonly matchHorizontal: Signal<boolean | undefined>;
+    /** The safe area SwiftUI's host ignores, iOS only: Compose's host has no such prop. */
     readonly ignoreSafeArea: import("@angular/core").InputSignal<"all" | "keyboard" | "container" | undefined>;
     readonly useViewportSizeMeasurement: import("@angular/core").InputSignalWithTransform<boolean | undefined, unknown>;
     static ɵfac: i0.ɵɵFactoryDeclaration<UiHost, never>;
@@ -56,11 +58,14 @@ export declare class UiHost {
 /** A SwiftUI `Menu`. Its trigger is the `label` or a `<ui-slot name="label">`; its items are children. */
 export declare class UiMenu {
     protected readonly nativeView: true;
+    protected readonly android: boolean;
     readonly label: import("@angular/core").InputSignal<string | undefined>;
     /** An SF Symbol name. */
     readonly systemImage: import("@angular/core").InputSignal<string | undefined>;
+    /** What VoiceOver reads for the menu's trigger: SwiftUI's `accessibilityLabel` modifier. */
     readonly accessibilityLabel: import("@angular/core").InputSignal<string | undefined>;
     readonly modifiers: import("@angular/core").InputSignal<readonly UiModifier[] | undefined>;
+    protected readonly resolvedModifiers: Signal<readonly UiModifier[] | undefined>;
     static ɵfac: i0.ɵɵFactoryDeclaration<UiMenu, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<UiMenu, "ui-menu", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "systemImage": { "alias": "systemImage"; "required": false; "isSignal": true; }; "accessibilityLabel": { "alias": "accessibilityLabel"; "required": false; "isSignal": true; }; "modifiers": { "alias": "modifiers"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
@@ -75,6 +80,7 @@ export declare class UiMenu {
  * and no height.
  */
 export declare class UiViewHost {
+    protected readonly android: boolean;
     protected readonly nativeView: true;
     readonly matchContents: import("@angular/core").InputSignalWithTransform<boolean | undefined, unknown>;
     /**
@@ -82,6 +88,7 @@ export declare class UiViewHost {
      * delivers its touches: it then takes them itself, and is measured from itself.
      */
     readonly layoutRoot: import("@angular/core").InputSignalWithTransform<boolean | undefined, unknown>;
+    /** Compose's modifiers for the view host, Android only: SwiftUI's view host takes none. */
     readonly modifiers: import("@angular/core").InputSignal<readonly UiModifier[] | undefined>;
     static ɵfac: i0.ɵɵFactoryDeclaration<UiViewHost, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<UiViewHost, "ui-view-host", never, { "matchContents": { "alias": "matchContents"; "required": false; "isSignal": true; }; "layoutRoot": { "alias": "layoutRoot"; "required": false; "isSignal": true; }; "modifiers": { "alias": "modifiers"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
@@ -115,7 +122,8 @@ export declare class UiButton {
     readonly role: import("@angular/core").InputSignal<"default" | "cancel" | "destructive" | "close" | undefined>;
     /**
      * In a home-screen widget's or a Live Activity's layout, what a tap on it hands the app: see
-     * `@ng-native/expo/widget` and `@ng-native/expo/live-activity`.
+     * `@ng-native/expo/widget` and `@ng-native/expo/live-activity`. The layout's build reads it, so
+     * an app's own button is not sent it: `@expo/ui`'s button there has no target.
      */
     readonly target: import("@angular/core").InputSignal<string | undefined>;
     readonly modifiers: import("@angular/core").InputSignal<readonly UiModifier[] | undefined>;
@@ -139,6 +147,7 @@ export declare class UiSlot {
     protected readonly nativeView: true;
     protected readonly android: boolean;
     readonly name: import("@angular/core").InputSignal<string>;
+    /** What the slot tells its SwiftUI parent about itself, iOS only. */
     readonly extraProps: import("@angular/core").InputSignal<Readonly<Record<string, unknown>> | undefined>;
     static ɵfac: i0.ɵɵFactoryDeclaration<UiSlot, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<UiSlot, "ui-slot", never, { "name": { "alias": "name"; "required": true; "isSignal": true; }; "extraProps": { "alias": "extraProps"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
@@ -213,12 +222,22 @@ export declare class UiVStack {
  */
 export declare class UiImage {
     protected readonly nativeView: true;
+    /** Compose's image is another control, which takes a `source`: none of these are its. */
+    protected readonly android: boolean;
     readonly systemName: import("@angular/core").InputSignal<string | undefined>;
     readonly assetName: import("@angular/core").InputSignal<string | undefined>;
     readonly uiImage: import("@angular/core").InputSignal<string | undefined>;
+    /**
+     * A symbol's size in points, as a `font` modifier of that size, which does not scale with
+     * Dynamic Type. A `font` modifier in `modifiers` wins over it. Without either, the symbol is
+     * SwiftUI's default size, where `@expo/ui`'s own `Image` and a widget layout draw it at 24.
+     */
     readonly size: import("@angular/core").InputSignalWithTransform<number | undefined, unknown>;
+    /** A symbol's colour, as a `foregroundStyle` modifier. */
     readonly color: import("@angular/core").InputSignal<string | undefined>;
     readonly modifiers: import("@angular/core").InputSignal<readonly UiModifier[] | undefined>;
+    /** SwiftUI's image reads neither `size` nor `color`: `@expo/ui`'s `Image` makes them modifiers. */
+    protected readonly resolvedModifiers: Signal<readonly UiModifier[] | undefined>;
     static ɵfac: i0.ɵɵFactoryDeclaration<UiImage, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<UiImage, "ui-image", never, { "systemName": { "alias": "systemName"; "required": false; "isSignal": true; }; "assetName": { "alias": "assetName"; "required": false; "isSignal": true; }; "uiImage": { "alias": "uiImage"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "modifiers": { "alias": "modifiers"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
@@ -299,7 +318,16 @@ export declare class UiDatePicker {
     protected readonly resolvedSelection: Signal<string | undefined>;
     /** SwiftUI takes a list of what to show, and Compose one word for it. */
     protected readonly resolvedComponents: Signal<"date" | "hourAndMinute" | readonly ("date" | "hourAndMinute")[] | "dateAndTime" | undefined>;
-    protected readonly initialDate: Signal<number | null | undefined>;
+    protected readonly initialDate: Signal<number | null>;
+    /** Compose takes `range` as `selectableDates`, each end in milliseconds. */
+    protected readonly selectableDates: Signal<{
+        start: number | null;
+        end: number | null;
+    } | undefined>;
+    /**
+     * SwiftUI's picker reads `disabled` and `accessibilityLabel` as modifiers, and Compose's reads
+     * `accessibilityLabel` as the `semantics` modifier's `contentDescription`.
+     */
     protected readonly resolvedModifiers: Signal<readonly UiModifier[] | undefined>;
     /**
      * SwiftUI's picker cannot be empty: it shows today, and reports that as a change the moment it
@@ -397,6 +425,8 @@ export declare class UiPicker {
     /** Each option's `tag`, one array per value, so a pass hands native the same objects. */
     protected readonly tags: Signal<Map<string | number, readonly UiModifier[]>>;
     protected readonly android: boolean;
+    /** SwiftUI's picker view draws nothing without a label, and a segmented one never shows it. */
+    protected readonly shownLabel: Signal<string>;
     /** Whether Android's dropdown is open. */
     protected readonly open: import("@angular/core").WritableSignal<boolean>;
     /**
@@ -488,17 +518,25 @@ export declare class UiColorPicker {
     static ɵfac: i0.ɵɵFactoryDeclaration<UiColorPicker, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<UiColorPicker, "ui-color-picker", never, { "selection": { "alias": "selection"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "supportsOpacity": { "alias": "supportsOpacity"; "required": false; "isSignal": true; }; "modifiers": { "alias": "modifiers"; "required": false; "isSignal": true; }; }, { "selectionChange": "selectionChange"; }, never, never, true, never>;
 }
-/** A SwiftUI `Gauge`: `value` between `min` and `max`, drawn as `type` says. */
+/**
+ * A SwiftUI `Gauge`: `value` between `min` and `max`, drawn as `type` says, with its labels drawn as
+ * text in the slots SwiftUI reads them from, as `@expo/ui`'s `Gauge` draws them.
+ */
 export declare class UiGauge {
     protected readonly nativeView: true;
     readonly value: import("@angular/core").InputSignalWithTransform<number | undefined, unknown>;
     readonly min: import("@angular/core").InputSignalWithTransform<number | undefined, unknown>;
     readonly max: import("@angular/core").InputSignalWithTransform<number | undefined, unknown>;
+    /**
+     * How it is drawn, as the `gaugeStyle` modifier: `'automatic'`, `'circular'`,
+     * `'circularCapacity'`, `'linear'` or `'linearCapacity'`.
+     */
     readonly type: import("@angular/core").InputSignal<string | undefined>;
     readonly currentValueLabel: import("@angular/core").InputSignal<string | undefined>;
     readonly minimumValueLabel: import("@angular/core").InputSignal<string | undefined>;
     readonly maximumValueLabel: import("@angular/core").InputSignal<string | undefined>;
     readonly modifiers: import("@angular/core").InputSignal<readonly UiModifier[] | undefined>;
+    protected readonly resolvedModifiers: Signal<readonly UiModifier[] | undefined>;
     static ɵfac: i0.ɵɵFactoryDeclaration<UiGauge, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<UiGauge, "ui-gauge", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "currentValueLabel": { "alias": "currentValueLabel"; "required": false; "isSignal": true; }; "minimumValueLabel": { "alias": "minimumValueLabel"; "required": false; "isSignal": true; }; "maximumValueLabel": { "alias": "maximumValueLabel"; "required": false; "isSignal": true; }; "modifiers": { "alias": "modifiers"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
@@ -698,8 +736,14 @@ export declare class UiLabel {
     readonly title: import("@angular/core").InputSignal<string | undefined>;
     /** An SF Symbol name. */
     readonly systemImage: import("@angular/core").InputSignal<string | undefined>;
+    /**
+     * The colour of the symbol alone, drawn as the label's icon in that colour, since SwiftUI's
+     * label takes no colour. The `foregroundStyle` modifier colours the title too.
+     */
     readonly color: import("@angular/core").InputSignal<string | undefined>;
     readonly modifiers: import("@angular/core").InputSignal<readonly UiModifier[] | undefined>;
+    /** The icon's colour, when there is a symbol to draw in it. */
+    protected readonly iconColor: Signal<UiModifier | undefined>;
     static ɵfac: i0.ɵɵFactoryDeclaration<UiLabel, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<UiLabel, "ui-label", never, { "title": { "alias": "title"; "required": false; "isSignal": true; }; "systemImage": { "alias": "systemImage"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "modifiers": { "alias": "modifiers"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
@@ -730,13 +774,19 @@ export declare class UiForm {
     static ɵfac: i0.ɵɵFactoryDeclaration<UiForm, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<UiForm, "ui-form", never, { "modifiers": { "alias": "modifiers"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
-/** A SwiftUI `Section` of a form or a list, under `title`. */
+/**
+ * A SwiftUI `Section` of a form or a list, under `title`, iOS only. A `<ui-slot name="header">`
+ * is its header in place of a `title`, and a `<ui-slot name="footer">` is the note under its rows.
+ * When both a non-empty `title` and a header slot are set, `@expo/ui`'s `SectionView` draws the
+ * `title` and drops the slot; an empty `title` counts as unset. The slot's `name` is written as it is,
+ * not bound, as that is what picks it out of the rows.
+ */
 export declare class UiSection {
     protected readonly nativeView: true;
     readonly title: import("@angular/core").InputSignal<string | undefined>;
     readonly modifiers: import("@angular/core").InputSignal<readonly UiModifier[] | undefined>;
     static ɵfac: i0.ɵɵFactoryDeclaration<UiSection, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<UiSection, "ui-section", never, { "title": { "alias": "title"; "required": false; "isSignal": true; }; "modifiers": { "alias": "modifiers"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<UiSection, "ui-section", never, { "title": { "alias": "title"; "required": false; "isSignal": true; }; "modifiers": { "alias": "modifiers"; "required": false; "isSignal": true; }; }, {}, never, ["ui-slot[name=header]", "*", "ui-slot[name=footer]"], true, never>;
 }
 /**
  * A SwiftUI `Group`, iOS only: its children as they are, with no layout of its own. What it is for
@@ -882,6 +932,13 @@ export declare class UiBottomSheet {
     readonly detents: import("@angular/core").InputSignal<readonly UiPresentationDetent[] | undefined>;
     /** Whether the grabber shows at the top of the sheet. */
     readonly showDragIndicator: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    /**
+     * The colour of the sheet behind its content: SwiftUI's `presentationBackground` on iOS, where
+     * a sheet below its full height is otherwise drawn as glass, and Compose's `containerColor` on
+     * Android. Over a `background-color` the element has from CSS, which colours the sheet the same
+     * way. Neither is the sheet as the system draws it.
+     */
+    readonly backgroundColor: import("@angular/core").InputSignal<string | undefined>;
     /**
      * The sheet has finished closing, whether the user dismissed it or `open` was set false: the
      * moment another sheet or a dialog can be presented.
@@ -928,6 +985,16 @@ export declare class UiBottomSheet {
      * detents of a sheet not sized to its content are followed while it is open.
      */
     protected readonly presentation: Signal<readonly UiModifier[]>;
+    /** The `background-color` the element has from CSS, which the sheet draws rather than it. */
+    private readonly painted;
+    /** The sheet's colour: the input's, or else the element's from CSS. */
+    protected readonly color: Signal<{} | undefined>;
+    /**
+     * The sheet's own background, a colour converted as any colour is, where one is given. As a
+     * shape style for `@expo/ui` 57.0.17 and later, and as the plain colour the versions before it
+     * read, Expo Go's among them. Each ignores the other's field.
+     */
+    private readonly background;
     /**
      * The one view a view host holds. Sized to its content it needs a width of its own, the
      * window's; otherwise it fills the height the sheet gives it.
@@ -969,6 +1036,6 @@ export declare class UiBottomSheet {
     /** The sheet has gone: its content leaves the tree. */
     private finish;
     static ɵfac: i0.ɵɵFactoryDeclaration<UiBottomSheet, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<UiBottomSheet, "ui-bottom-sheet", never, { "open": { "alias": "open"; "required": false; "isSignal": true; }; "fitToContents": { "alias": "fitToContents"; "required": false; "isSignal": true; }; "detents": { "alias": "detents"; "required": false; "isSignal": true; }; "showDragIndicator": { "alias": "showDragIndicator"; "required": false; "isSignal": true; }; }, { "open": "openChange"; "dismissed": "dismissed"; }, ["toolbarItems"], ["*", "ui-toolbar-item"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<UiBottomSheet, "ui-bottom-sheet", never, { "open": { "alias": "open"; "required": false; "isSignal": true; }; "fitToContents": { "alias": "fitToContents"; "required": false; "isSignal": true; }; "detents": { "alias": "detents"; "required": false; "isSignal": true; }; "showDragIndicator": { "alias": "showDragIndicator"; "required": false; "isSignal": true; }; "backgroundColor": { "alias": "backgroundColor"; "required": false; "isSignal": true; }; }, { "open": "openChange"; "dismissed": "dismissed"; }, ["toolbarItems"], ["*", "ui-toolbar-item"], true, never>;
 }
 export {};