NativeUIManager class
Manages native UI elements such as Buttons and RecordButtons.
Signature:
export declare class NativeUIManager extends ExternalObject
Extends: ExternalObject
Remarks
Use Runtime.getNativeUIManager() to get an instance of this class.
The constructor for this class is marked as internal. Third-party code should not call the constructor directly or create subclasses that extend the NativeUIManager class.
Methods
| Method | Modifiers | Description |
|---|---|---|
| createNativeRecordButton(xPositionAsFractionOfScreenWidth, yPositionAsFractionOfScreenHeight, diameterAsFractionOfScreenHeight) | Creates a new NativeRecordButton | |
| getBackButtonArea() | Returns a Rect that represents the area of the back button on the screen. This is where your module should render a back button to align with the native close button. | |
| getCloseButtonArea() | Returns a Rect that represents the area of the close button on the screen. | |
| getScreenSafeArea() | Returns a Rect that represents the safe area of the screen. | |
| isStyleThemeLight() | Returns a subject that indicates whether the current UI style theme in the app is light or dark. |
NativeUIManager.createNativeRecordButton() method
Creates a new NativeRecordButton
Signature:
createNativeRecordButton(xPositionAsFractionOfScreenWidth: number, yPositionAsFractionOfScreenHeight: number, diameterAsFractionOfScreenHeight: number): Promise<NativeRecordButton>;
Parameters
| Parameter | Type | Description |
|---|---|---|
| xPositionAsFractionOfScreenWidth | number | Fraction of the screen width from the left: 0 to 1 |
| yPositionAsFractionOfScreenHeight | number | Fraction of the screen height from the top: 0 to 1 |
| diameterAsFractionOfScreenHeight | number | Diameter of the button as a fraction of the screen height |
Returns:
Promise<NativeRecordButton>
A promise that resolves to the new native record button.
Remarks
Use Runtime.getNativeUIManager() to get an instance of this class.
NativeUIManager.getBackButtonArea() method
Returns a Rect that represents the area of the back button on the screen. This is where your module should render a back button to align with the native close button.
Signature:
getBackButtonArea(): Promise<Rect>;
Returns:
Promise<Rect>
Remarks
The back button area will be calculated using the viewport size at the time this function is called. If you change it using Runtime.adjustViewport(), you must call this function in a resize event listener on window to get the updated back button area.
The back button coordinates are also available as CSS properties var(--o3h-back-button-position-left), var(--o3h-back-button-position-top), var(--o3h-back-button-width) and var(--o3h-back-button-height).
NativeUIManager.getCloseButtonArea() method
Returns a Rect that represents the area of the close button on the screen.
Signature:
getCloseButtonArea(): Promise<Rect>;
Returns:
Promise<Rect>
Remarks
The close button area will be calculated using the viewport size at the time this function is called. If you change it using Runtime.adjustViewport(), you must call this function in a resize event listener on window to get the updated close button area.
The close button coordinates are also available as CSS properties var(--o3h-close-button-position-left), var(--o3h-close-button-position-top), var(--o3h-close-button-width) and var(--o3h-close-button-height).
NativeUIManager.getScreenSafeArea() method
Returns a Rect that represents the safe area of the screen.
Signature:
getScreenSafeArea(): Promise<Rect>;
Returns:
Promise<Rect>
Remarks
You should display your module's UI elements within the safe area so that they are not covered by notches or camera cutouts or in areas reserved for system swipe gestures (e.g. to close the app on an iPhone without a home button)
The safe area will be calculated using the viewport size at the time this function is called. If you change it using Runtime.adjustViewport(), you must call this function in a resize event listener on window to get the updated safe area.
The safe area coordinates are also available as CSS properties var(--o3h-safe-area-inset-top), var(--o3h-safe-area-inset-bottom), var(--o3h-safe-area-inset-left) and var(--o3h-safe-area-inset-right).
You should not use the CSS env(safe-area-inset-*) properties in Oooh modules, for the following reasons:
- They will not work on Android (those values are always zero because of this Chromium bug).
- They have incorrect values when you set the viewport size (using Runtime.adjustViewport()) to anything other than
'device-width'and'device-height', or don't set it at all.
NativeUIManager.isStyleThemeLight() method
Returns a subject that indicates whether the current UI style theme in the app is light or dark.
Signature:
isStyleThemeLight(): Subject<boolean>;
Returns:
Subject<boolean>
A subject that emits true if the current theme is light, and false if it is dark.
Remarks
You can use this to change the color of UI elements in your module to match the style theme. If your module responds to style theme changes, usesStyleThemes should be set to true in the manifest.
Updated 7 months ago