@ng-native/expo 0.14.0 → 0.15.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

@@ -730,13 +730,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 +888,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 +941,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 +992,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 {};

package/dist/expo-ui-components.js

@@ -1454,7 +1454,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImpor
                     host: { '[modifiers]': 'modifiers()' },
                 }]
         }], propDecorators: { modifiers: [{ type: i0.Input, args: [{ isSignal: true, alias: "modifiers", required: false }] }] } });
-/** 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 class UiSection {
     nativeView = nativeView();
     title = input(/* @ts-ignore */
@@ -1462,14 +1468,18 @@ export class UiSection {
     modifiers = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "modifiers" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: UiSection, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.2.0", type: UiSection, isStandalone: true, selector: "ui-section", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, modifiers: { classPropertyName: "modifiers", publicName: "modifiers", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "title": "title()", "modifiers": "modifiers()" } }, ngImport: i0, template: '<ui-slot name="content"><ng-content /></ui-slot>', isInline: true, dependencies: [{ kind: "component", type: UiSlot, selector: "ui-slot", inputs: ["name", "extraProps"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.2.0", type: UiSection, isStandalone: true, selector: "ui-section", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, modifiers: { classPropertyName: "modifiers", publicName: "modifiers", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "title": "title()", "modifiers": "modifiers()" } }, ngImport: i0, template: `<ng-content select="ui-slot[name=header]" />
+    <ui-slot name="content"><ng-content /></ui-slot>
+    <ng-content select="ui-slot[name=footer]" />`, isInline: true, dependencies: [{ kind: "component", type: UiSlot, selector: "ui-slot", inputs: ["name", "extraProps"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: UiSection, decorators: [{
             type: Component,
             args: [{
                     selector: 'ui-section',
                     imports: [UiSlot],
-                    template: '<ui-slot name="content"><ng-content /></ui-slot>',
+                    template: `<ng-content select="ui-slot[name=header]" />
+    <ui-slot name="content"><ng-content /></ui-slot>
+    <ng-content select="ui-slot[name=footer]" />`,
                     host: { '[title]': 'title()', '[modifiers]': 'modifiers()' },
                 }]
         }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], modifiers: [{ type: i0.Input, args: [{ isSignal: true, alias: "modifiers", required: false }] }] } });
@@ -1667,6 +1677,14 @@ export class UiBottomSheet {
     ...(ngDevMode ? [undefined, { debugName: "detents" }] : /* istanbul ignore next */ []));
     /** Whether the grabber shows at the top of the sheet. */
     showDragIndicator = input(true, { ...(ngDevMode ? { debugName: "showDragIndicator" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * 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.
+     */
+    backgroundColor = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "backgroundColor" }] : /* istanbul ignore next */ []));
     /**
      * 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.
@@ -1734,8 +1752,28 @@ export class UiBottomSheet {
             $type: 'presentationDragIndicator',
             visibility: this.showDragIndicator() ? 'visible' : 'hidden',
         },
+        ...this.background(),
     ], /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "presentation" }] : /* istanbul ignore next */ []));
+    /** The `background-color` the element has from CSS, which the sheet draws rather than it. */
+    painted = signal(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "painted" }] : /* istanbul ignore next */ []));
+    /** The sheet's colour: the input's, or else the element's from CSS. */
+    color = computed(() => this.backgroundColor() || this.painted() || undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+    /**
+     * 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.
+     */
+    background = computed(() => {
+        const given = this.color();
+        if (given === undefined)
+            return [];
+        const color = this.engine?.color(given) ?? given;
+        return [{ $type: 'presentationBackground', style: { type: 'color', color }, color }];
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "background" }] : /* istanbul ignore next */ []));
     /**
      * 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.
@@ -1751,6 +1789,10 @@ export class UiBottomSheet {
             if (!this.open())
                 untracked(() => this.close());
         });
+        const host = inject(ElementRef).nativeElement;
+        const stop = this.engine?.takePaint?.(host, (color) => this.painted.set(color));
+        if (stop)
+            inject(DestroyRef).onDestroy(stop);
         if (this.swiftUI && !this.toolbarInBuild) {
             const warned = effect(() => {
                 if (!this.toolbarItems().length)
@@ -1842,7 +1884,7 @@ export class UiBottomSheet {
         afterNextRender(() => this.mounted.set(this.open()), { injector: this.injector });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: UiBottomSheet, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.0", type: UiBottomSheet, isStandalone: true, selector: "ui-bottom-sheet", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, fitToContents: { classPropertyName: "fitToContents", publicName: "fitToContents", isSignal: true, isRequired: false, transformFunction: null }, detents: { classPropertyName: "detents", publicName: "detents", isSignal: true, isRequired: false, transformFunction: null }, showDragIndicator: { classPropertyName: "showDragIndicator", publicName: "showDragIndicator", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", dismissed: "dismissed" }, host: { properties: { "style.position": "\"absolute\"" } }, queries: [{ propertyName: "toolbarItems", predicate: UiToolbarItem, isSignal: true }], viewQueries: [{ propertyName: "sheet", first: true, predicate: ["sheet"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.0", type: UiBottomSheet, isStandalone: true, selector: "ui-bottom-sheet", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, fitToContents: { classPropertyName: "fitToContents", publicName: "fitToContents", isSignal: true, isRequired: false, transformFunction: null }, detents: { classPropertyName: "detents", publicName: "detents", isSignal: true, isRequired: false, transformFunction: null }, showDragIndicator: { classPropertyName: "showDragIndicator", publicName: "showDragIndicator", isSignal: true, isRequired: false, transformFunction: null }, backgroundColor: { classPropertyName: "backgroundColor", publicName: "backgroundColor", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", dismissed: "dismissed" }, host: { properties: { "style.position": "\"absolute\"" } }, queries: [{ propertyName: "toolbarItems", predicate: UiToolbarItem, isSignal: true }], viewQueries: [{ propertyName: "sheet", first: true, predicate: ["sheet"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: `
     <ng-template #content><ng-content /></ng-template>
     @if (swiftUI) {
       <ui-host style="position: absolute" pointerEvents="none" [style.width.px]="width()">
@@ -1881,6 +1923,7 @@ export class UiBottomSheet {
         <ui-bottom-sheet-view
           #sheet
           [showDragHandle]="showDragIndicator()"
+          [containerColor]="color()"
           [skipPartiallyExpanded]="fits()"
           (dismissRequest)="dismissRequested($event)"
         >
@@ -1890,7 +1933,7 @@ export class UiBottomSheet {
         </ui-bottom-sheet-view>
       </ui-host>
     }
-  `, isInline: true, dependencies: [{ kind: "component", type: UiBottomSheetContent, selector: "ui-bottom-sheet-content", inputs: ["content"] }, { kind: "component", type: UiBottomSheetView, selector: "ui-bottom-sheet-view", inputs: ["isPresented", "fitToContents", "showDragHandle", "skipPartiallyExpanded"], outputs: ["isPresentedChange", "dismiss", "dismissRequest"] }, { kind: "component", type: UiGroup, selector: "ui-group", inputs: ["modifiers"] }, { kind: "component", type: UiHost, selector: "ui-host", inputs: ["matchContents", "ignoreSafeArea", "useViewportSizeMeasurement"] }, { kind: "component", type: UiNavigationStack, selector: "ui-navigation-stack", inputs: ["modifiers"] }, { kind: "component", type: UiSlot, selector: "ui-slot", inputs: ["name", "extraProps"] }, { kind: "component", type: UiSpacer, selector: "ui-spacer", inputs: ["modifiers"] }, { kind: "component", type: UiToolbar, selector: "ui-toolbar", inputs: ["modifiers"] }, { kind: "component", type: UiViewHost, selector: "ui-view-host", inputs: ["matchContents", "layoutRoot", "modifiers"] }, { kind: "component", type: UiZStack, selector: "ui-zstack", inputs: ["alignment", "modifiers"] }] });
+  `, isInline: true, dependencies: [{ kind: "component", type: UiBottomSheetContent, selector: "ui-bottom-sheet-content", inputs: ["content"] }, { kind: "component", type: UiBottomSheetView, selector: "ui-bottom-sheet-view", inputs: ["isPresented", "fitToContents", "showDragHandle", "containerColor", "skipPartiallyExpanded"], outputs: ["isPresentedChange", "dismiss", "dismissRequest"] }, { kind: "component", type: UiGroup, selector: "ui-group", inputs: ["modifiers"] }, { kind: "component", type: UiHost, selector: "ui-host", inputs: ["matchContents", "ignoreSafeArea", "useViewportSizeMeasurement"] }, { kind: "component", type: UiNavigationStack, selector: "ui-navigation-stack", inputs: ["modifiers"] }, { kind: "component", type: UiSlot, selector: "ui-slot", inputs: ["name", "extraProps"] }, { kind: "component", type: UiSpacer, selector: "ui-spacer", inputs: ["modifiers"] }, { kind: "component", type: UiToolbar, selector: "ui-toolbar", inputs: ["modifiers"] }, { kind: "component", type: UiViewHost, selector: "ui-view-host", inputs: ["matchContents", "layoutRoot", "modifiers"] }, { kind: "component", type: UiZStack, selector: "ui-zstack", inputs: ["alignment", "modifiers"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: UiBottomSheet, decorators: [{
             type: Component,
@@ -1947,6 +1990,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImpor
         <ui-bottom-sheet-view
           #sheet
           [showDragHandle]="showDragIndicator()"
+          [containerColor]="color()"
           [skipPartiallyExpanded]="fits()"
           (dismissRequest)="dismissRequested($event)"
         >
@@ -1961,5 +2005,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImpor
                 }]
         }], ctorParameters: () => [], propDecorators: { sheet: [{ type: i0.ViewChild, args: ['sheet', { ...{
                             read: ElementRef,
-                        }, isSignal: true }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], fitToContents: [{ type: i0.Input, args: [{ isSignal: true, alias: "fitToContents", required: false }] }], detents: [{ type: i0.Input, args: [{ isSignal: true, alias: "detents", required: false }] }], showDragIndicator: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDragIndicator", required: false }] }], dismissed: [{ type: i0.Output, args: ["dismissed"] }], toolbarItems: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => UiToolbarItem), { isSignal: true }] }] } });
+                        }, isSignal: true }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], fitToContents: [{ type: i0.Input, args: [{ isSignal: true, alias: "fitToContents", required: false }] }], detents: [{ type: i0.Input, args: [{ isSignal: true, alias: "detents", required: false }] }], showDragIndicator: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDragIndicator", required: false }] }], backgroundColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "backgroundColor", required: false }] }], dismissed: [{ type: i0.Output, args: ["dismissed"] }], toolbarItems: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => UiToolbarItem), { isSignal: true }] }] } });
 //# sourceMappingURL=expo-ui-components.js.map