For AI agents: the complete documentation index is available at /next/llms.txt, the full documentation bundle is available at /next/llms-full.txt, and this page is available as Markdown at /next/ui/components/overlay.md.
lynx-ui logo
lynx-ui
  • English
  • 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.