---
name: "CoverView"
mode: "component"
versionRequirements:
  - { name: "@ray-js/ray", version: "0.5.10" }
title: "CoverView - Text view overlaid on native components"
---

## CoverView

> [VERSION] @ray-js/ray >= 0.5.10

### Description

A view container that overlays native components, such as Map and Video.


### Examples

#### Basic usage

```tsx
import React from 'react';
import { CoverView, Map, Text } from '@ray-js/ray';

export default function BasicCoverView() {
  return (
    <Map
      longitude={120.15}
      latitude={30.28}
      scale={14}
      style={{ width: '100%', height: '400rpx' }}
    >
      <CoverView
        style={{
          position: 'absolute',
          bottom: '20rpx',
          left: '20rpx',
          right: '20rpx',
          padding: '20rpx',
          backgroundColor: 'rgba(0,0,0,0.6)',
          borderRadius: '8rpx',
        }}
      >
         Text overlay on the map
      </CoverView>
    </Map>
  );
}
```