https://github.com/Tinysymphony/react-native-zoom-image

Image Viewer Component For React Native (like twitter)
https://github.com/Tinysymphony/react-native-zoom-image

Last synced: 5 days ago
JSON representation

Image Viewer Component For React Native (like twitter)

• Host: GitHub
• URL: https://github.com/Tinysymphony/react-native-zoom-image
• Owner: Tinysymphony
• License: mit
• Created: 2017-03-31T08:41:19.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2017-12-09T09:08:04.000Z (about 7 years ago)
• Last Synced: 2024-10-29T21:21:51.360Z (about 1 month ago)
• Language: JavaScript
• Size: 5.78 MB
• Stars: 113
• Watchers: 4
• Forks: 10
• Open Issues: 5
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-react-native - react-native-zoom-image ★75 - An image viewer component for react-native, like twitter's image viewer. (Components / UI)
• awesome-react-native - react-native-zoom-image ★75 - An image viewer component for react-native, like twitter's image viewer. (Components / UI)
• awesome-reactnative-ui - react-native-zoom-image - native-zoom-image/master/./GIF/android.gif)| (Others)
• awesome-reactnative-ui - react-native-zoom-image - native-zoom-image/master/./GIF/android.gif)| (Others)
• awesome-react-native - react-native-zoom-image - An image viewer component for react-native, like twitter's image viewer.  (Components / Viewer/Swiper/Carousel)
• awesome-react-native - react-native-zoom-image ★75 - An image viewer component for react-native, like twitter's image viewer. (Components / UI)
• awesome-react-native - react-native-zoom-image ★75 - An image viewer component for react-native, like twitter's image viewer. (Components / UI)

README

        
## react-native-zoom-image

ZoomImage component for React Native Application (ios / android)

> **Only works with https network images** [With the limitation of the current react-native, we can't get original size of required images. This component just zooms them with given size (provided by `imgStyle` prop)]

> If you need to support http network images, modify info.plist please :)

### Examples





### Usage

**install from npm**

``` shell

npm install --save react-native-zoom-image

```

**import in project**

``` js

import ZoomImage from 'react-native-zoom-image';

import {Easing} from 'react-native'; // import Easing if you want to customize easing function

```

```js

let styles = {

  img: {} // custom styles of original image component

};

// in render function

```

## Properties

| Prop | Type | Default | Description |

| --- | --- | --- | --- |

| disabled | bool | false | Whether to disable the component or not. |

| startCapture | bool | false | Whether to capture start touch event or not. |

| moveCapture | bool | false | Whether to capture move event or not. |

| responderNegotiate | function | - | Use custom conditions to enable or disable gesture over image modal. |

| easingFunc | function | Easing.linear | The easing function of animation. |

| showDuration | number | 100 | The duration of showing the image modal. |

| closeDuration | number | 140 | The duration of closing the image modal. |

| rebounceDuration | number | 800 | The total duration of resetting the position of image. The actual duration changes by the displacement of the image in Y-axis. If the displacement equals to the height of screen, the duration shall be 800ms. |

| enableScaling | bool | false | Whether to scale the image when it is polled. |

### Instance methods

| Method | Params | Description |

| --- | --- | --- |

| openModal | - | Open image modal |

| closeModal | - | Close image modal. |

LICENSE MIT