react-native-transformable-image

react-native-transformable-image

A transformable image component, as the known PhotoView or ImageViewer, supports gestures like pan, pinch, double tab and fling, is written in pure JavaScript, supports both iOS and Android.

Install

npm install --save react-native-transformable-image@latest

Usage

Quite same as the official Image, as below shows:

import Image from 'react-native-transformable-image';
...
render() {
    return (
      ...
        <Image
          style={{width: width, height: height}}
          source={{uri: 'https://raw.githubusercontent.com/yoaicom/resources/master/images/game_of_thrones_1.jpg'}}
          //pixels={{width: 3607, height: 2400}}
        />
      ...
    );
  }

Attention

The pixels prop is used to align the edge of the image content with the view's boundry and to determine the max scale.

This prop is optional if the image is remote (like source={{uri: 'http://remoteurl'}}) AND you are using react-native 0.28+. (Image.getSize(available since release v0.28-rc) is used to get pixels info both on iOS and Android when no pixels prop provided.

If your image is local (like source={require('...')}) or you are using react-native v0.27 and below, you should provide the pixels prop, wraping the image's width and height. (You can ask your API server to provide image pixels info).