Lynx UI logo
Lynx UI

Overlay

An Overlay component for ReactLynx. It renders content in a native overlay layer above the main view tree.

OverlayView is a drop-in replacement for <overlay>. Prefer using it over raw <overlay> to reduce setup work and avoid platform quirks and mistakes.

It can render either a plain view (when container is not provided) or an <overlay> (when container is provided). Prefer using OverlayView over raw <overlay>.

Basic Usage

import { OverlayView } from '@lynx-js/lynx-ui';

export function Example() {
  return (
    <OverlayView container="default">
      <view className="panel">
        <text>Overlay content</text>
      </view>
    </OverlayView>
  );
}

Structure

<OverlayView>
  <view />
</OverlayView>

OverlayViewProps

children
iOS
Android
Harmony
TypeReactNode
children
className
iOS
Android
Harmony
Typestring
className
container
iOS
Android
Harmony
Typestring
It is recommended to use a full-screen transparent container for the popup, as it offers better performance. Alternatively, you can also choose to use the popup through an overlay
debugLog
iOS
Android
Harmony
Typeboolean
Display debug logs. Open it when you find a bug.
id
iOS
Android
Harmony
Typestring
id
overlayLevel
iOS
Android
Harmony
Type1 | 2 | 3 | 4
Only works when the container is set to a native container name. Adjust the display level of nearby elements. Manual changes to overlayLevel are not supported after rendering.
overlayViewProps
iOS
Android
Harmony
TypeOverlayViewProps | ViewProps
Additional props that will be spread to the underlying element
style
iOS
Android
Harmony
TypeCSSProperties
style

OverlayViewRef

getRect
Type(handleLayoutUpdate: (e: unknown) => void) => void
Except as otherwise noted, this work is licensed under a Creative Commons Attribution 4.0 International License, and code samples are licensed under the Apache License 2.0.