diff --git a/README.md b/README.md index 2adfaea..effacda 100644 --- a/README.md +++ b/README.md @@ -1,12 +1,17 @@ # react-native-transformable-image +> This package is a fork of react-native-transformable-image that just have some +> react updates. + +- Original package: [react-native-transformable-image](https://github.com/ldn0x7dc/react-native-transformable-image) + A pure JavaScript written transformable image component, like PhotoView or ImageViewer, supports gestures like pan, pinch, double tab and fling, works with both iOS and Android. ![](Demo/demo.gif) -Written in pure JS, this component should be one of the most easy to use component among all the zoomable, scrollable PhotoView alike views on react-native. +Written in pure JS, this component should be one of the most easy to use component among all the zoomable, scrollable PhotoView alike views on react-native. ## Install @@ -38,7 +43,7 @@ You can provide `enableTransform`, `enableScale` and `enableTranslate` props to #### Other props -* `onTransformGestureReleased` and `onViewTransformed`: +* `onTransformGestureReleased` and `onViewTransformed`: ​ inherited from [react-native-view-transformer](https://github.com/ldn0x7dc/react-native-view-transformer) diff --git a/library/TransformableImage.js b/library/TransformableImage.js index 17dd7d3..1092c1a 100644 --- a/library/TransformableImage.js +++ b/library/TransformableImage.js @@ -1,9 +1,10 @@ 'use strict'; -import React, { Component, PropTypes } from 'react'; +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; import { Image } from 'react-native'; -import ViewTransformer from 'react-native-view-transformer'; +import ViewTransformer from 'react-native-view-transformer-next'; let DEV = false; @@ -83,10 +84,9 @@ export default class TransformableImage extends Component { } } - return ( (this.viewTransformer = ref)} key={'viewTransformer#' + this.state.keyAccumulator} //when image source changes, we should use a different node to avoid reusing previous transform state enableTransform={this.props.enableTransform && this.state.imageLoaded} //disable transform until image is loaded enableScale={this.props.enableScale} @@ -98,14 +98,15 @@ export default class TransformableImage extends Component { maxScale={maxScale} contentAspectRatio={contentAspectRatio} onLayout={this.onLayout.bind(this)} - style={this.props.style}> + style={this.props.style} + > ); @@ -154,9 +155,15 @@ export default class TransformableImage extends Component { } } }, - (error) => { - console.error('getImageSize...error=' + JSON.stringify(error) + ', source=' + JSON.stringify(source)); - }) + error => { + console.error( + 'getImageSize...error=' + + JSON.stringify(error) + + ', source=' + + JSON.stringify(source) + ) + } + ) } else { console.warn('getImageSize...please provide pixels prop for local images'); } diff --git a/package.json b/package.json index 264332f..c7d2055 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { - "name": "react-native-transformable-image", - "version": "0.0.18", + "name": "@realgeeks/react-native-transformable-image", + "version": "0.1.1", "description": "", "main": "library/TransformableImage.js", "scripts": { @@ -8,15 +8,20 @@ }, "repository": { "type": "git", - "url": "git+https://github.com/ldn0x7dc/react-native-transformable-image.git" + "url": "git+https://github.com/realgeeks/react-native-transformable-image.git" }, "author": "", "license": "ISC", "bugs": { - "url": "https://github.com/ldn0x7dc/react-native-transformable-image/issues" + "url": "https://github.com/realgeeks/react-native-transformable-image/issues" + }, + "homepage": "https://github.com/realgeeks/react-native-transformable-image#readme", + "peerDependencies": { + "react": "*", + "react-native": "*", + "prop-types": "*" }, - "homepage": "https://github.com/ldn0x7dc/react-native-transformable-image#readme", "dependencies": { - "react-native-view-transformer": "0.0.28" + "react-native-view-transformer-next": "0.0.30" } }