---
name: "MovableArea"
mode: "component"
versionRequirements:
  - { name: "@ray-js/ray", version: "0.5.10" }
title: "MovableArea - Movable area for MovableView"
---

## MovableArea

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

### Description

MovableView’s movable-area container; must wrap MovableView, which must be a direct child.

### Props

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `scaleArea` | `boolean` | No | `false` | When the nested movable-view enables pinch-to-zoom, set this to make the gesture effective over the entire movable-area |

### Examples

#### Basic usage

```tsx
import React from 'react';
import { MovableArea, MovableView, View, Text } from '@ray-js/ray';

export default function BasicMovableArea() {
  return (
    <MovableArea
      style={{
        width: '300rpx',
        height: '300rpx',
        backgroundColor: '#f0f0f0',
        overflow: 'hidden',
      }}
    >
      <MovableView direction="all" x={0} y={0}>
        <View
          style={{
            width: '100rpx',
            height: '100rpx',
            backgroundColor: '#1890ff',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
          }}
        >
          <Text style={{ color: '#fff' }}>Drag me</Text>
        </View>
      </MovableView>
    </MovableArea>
  );
}
```

#### Expand the zoomable area

```tsx
import React from 'react';
import { MovableArea, MovableView, View, Text } from '@ray-js/ray';

export default function ScaleAreaDemo() {
  return (
    <MovableArea
      scaleArea
      style={{
        width: '400rpx',
        height: '400rpx',
        backgroundColor: '#f5f5f5',
        overflow: 'hidden',
      }}
    >
      <MovableView
        direction="all"
        scale
        scaleMin={0.5}
        scaleMax={3}
        scaleValue={1}
      >
        <View
          style={{
            width: '150rpx',
            height: '150rpx',
            backgroundColor: '#722ed1',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
          }}
        >
          <Text style={{ color: '#fff' }}>The entire area can be scaled</Text>
        </View>
      </MovableView>
    </MovableArea>
  );
}
```