# react-native-pinch-zoom-view

> A pinch-to-zoom view for React Native.

Latest version **0.2.0** (published 2018-08-04) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-native-pinch-zoom-view
pnpm add react-native-pinch-zoom-view
yarn add react-native-pinch-zoom-view
bun add react-native-pinch-zoom-view
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.0 |
| Published | 2018-08-04 |
| First published | 2017-03-28 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 6.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 102 |
| Author | Chen Guo |
| Maintainers | gcwhurs |
| Keywords | pinch, zoom, view, react-native |

## Links

- npm: https://www.npmjs.com/package/react-native-pinch-zoom-view
- Repository: https://github.com/GuoChen-WHU/react-native-pinch-zoom-view
- Homepage: https://github.com/GuoChen-WHU/react-native-pinch-zoom-view#readme
- Issues: https://github.com/GuoChen-WHU/react-native-pinch-zoom-view/issues
- npm.io page: https://npm.io/package/react-native-pinch-zoom-view

## Dependencies (1)

- [prop-types](https://npm.io/package/prop-types.md) ^15.6.0

## Recent versions

- 0.2.0 (latest) — 2018-08-04
- 0.1.7 — 2018-06-26
- 0.1.6 — 2018-04-10
- 0.1.5 — 2018-04-05
- 0.1.4 — 2018-02-25
- 0.1.3 — 2017-11-27
- 0.1.2 — 2017-05-04
- 0.1.1 — 2017-04-16
- 0.1.0 — 2017-03-28

## README

# react-native-pinch-zoom-view

A pinch-to-zoom view for React Native. All the components wrapped in the view is scalable while still be able to respond to touch events.

## Install

`npm install react-native-pinch-zoom-view --save`

## Usage

`require` the `react-native-pinch-zoom-view` module and then use the `<PinchZoomView>` tag to wrap your content instead of `<View>`.

```javascript
'use strict';
import React, { Component } from 'react';
import {
  AppRegistry,
  TextInput
} from 'react-native';
import PinchZoomView from 'react-native-pinch-zoom-view';

class APP extends Component {
  render() {
    return (
      <PinchZoomView>
        <TextInput style={{width: 100}}></TextInput>
      </PinchZoomView>
    );
  }
}

AppRegistry.registerComponent('APP', () => APP);
```

## Properties

#### `scalable`

Values: `true` or `false`
Default: `true`

In some cases, you may want to disable the pinch-zoom behaviour, just set `scalable={false}` on the component.

### `minScale`

Type: `Number`
Default: `0.5`

Minimum scaling.

### `maxScale`

Type: `Number`
Default: `2`

Maximum scaling.

## Example

Check out a simple example in [Example](https://github.com/GuoChen-WHU/react-native-pinch-zoom-view/tree/master/Example).

---
_Source: https://npm.io/package/react-native-pinch-zoom-view · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._