From e84e255b35522c9f9d4a2c9e655e00d21f8f673f Mon Sep 17 00:00:00 2001 From: Almir Filho Date: Tue, 10 Oct 2017 14:25:30 -1000 Subject: [PATCH 1/9] Update prop types with prop-types package (react 16 compatible) --- library/TransformableImage.js | 3 ++- package.json | 5 +++++ 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/library/TransformableImage.js b/library/TransformableImage.js index 17dd7d3..dbfdc9a 100644 --- a/library/TransformableImage.js +++ b/library/TransformableImage.js @@ -1,6 +1,7 @@ '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'; diff --git a/package.json b/package.json index 264332f..f54ad5a 100644 --- a/package.json +++ b/package.json @@ -16,6 +16,11 @@ "url": "https://github.com/ldn0x7dc/react-native-transformable-image/issues" }, "homepage": "https://github.com/ldn0x7dc/react-native-transformable-image#readme", + "peerDependencies": { + "react": "*", + "react-native": "*", + "prop-types": "*" + }, "dependencies": { "react-native-view-transformer": "0.0.28" } From cbb13ea20c981d1296a1d7fb81354a864a747126 Mon Sep 17 00:00:00 2001 From: Almir Filho Date: Tue, 10 Oct 2017 14:31:13 -1000 Subject: [PATCH 2/9] Bump version 0.1.0 --- README.md | 9 +++++++-- package.json | 12 ++++++------ 2 files changed, 13 insertions(+), 8 deletions(-) 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/package.json b/package.json index f54ad5a..b1702c7 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.0", "description": "", "main": "library/TransformableImage.js", "scripts": { @@ -8,20 +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/ldn0x7dc/react-native-transformable-image#readme", + "homepage": "https://github.com/realgeeks/react-native-transformable-image#readme", "peerDependencies": { "react": "*", "react-native": "*", "prop-types": "*" }, "dependencies": { - "react-native-view-transformer": "0.0.28" + "@realgeeks/react-native-view-transformer": "0.1.0" } } From abc24729048c5fe2e7bee3ca5ea4801349c6214b Mon Sep 17 00:00:00 2001 From: Almir Filho Date: Tue, 10 Oct 2017 15:05:45 -1000 Subject: [PATCH 3/9] Fix import --- library/TransformableImage.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/library/TransformableImage.js b/library/TransformableImage.js index dbfdc9a..a149032 100644 --- a/library/TransformableImage.js +++ b/library/TransformableImage.js @@ -4,7 +4,7 @@ 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 '@realgeeks/react-native-view-transformer'; let DEV = false; From 12afadccc85ff8f257a28dd630408924c11c188a Mon Sep 17 00:00:00 2001 From: Almir Filho Date: Tue, 10 Oct 2017 15:06:00 -1000 Subject: [PATCH 4/9] Bump version 0.1.1 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index b1702c7..83df604 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@realgeeks/react-native-transformable-image", - "version": "0.1.0", + "version": "0.1.1", "description": "", "main": "library/TransformableImage.js", "scripts": { From b1f5a7098c9c4c4d21e964cb94348416c4bfbe01 Mon Sep 17 00:00:00 2001 From: Daniel Fernando Lourusso Date: Thu, 8 Mar 2018 14:30:14 -0300 Subject: [PATCH 5/9] fix ref and PropTypes --- library/TransformableImage.js | 125 ++++++++++++++++++++-------------- 1 file changed, 74 insertions(+), 51 deletions(-) diff --git a/library/TransformableImage.js b/library/TransformableImage.js index 17dd7d3..f9cd53f 100644 --- a/library/TransformableImage.js +++ b/library/TransformableImage.js @@ -1,22 +1,22 @@ -'use strict'; +'use strict' -import React, { Component, PropTypes } from 'react'; -import { Image } from 'react-native'; +import React, { Component } from 'react' +import { Image } from 'react-native' +import PropTypes from 'prop-types' -import ViewTransformer from 'react-native-view-transformer'; +import ViewTransformer from 'react-native-view-transformer' -let DEV = false; +let DEV = false export default class TransformableImage extends Component { - static enableDebug() { - DEV = true; + DEV = true } static propTypes = { pixels: PropTypes.shape({ width: PropTypes.number, - height: PropTypes.number, + height: PropTypes.number }), enableTransform: PropTypes.bool, @@ -25,16 +25,16 @@ export default class TransformableImage extends Component { onSingleTapConfirmed: PropTypes.func, onTransformGestureReleased: PropTypes.func, onViewTransformed: PropTypes.func - }; + } static defaultProps = { enableTransform: true, enableScale: true, enableTranslate: true - }; + } constructor(props) { - super(props); + super(props) this.state = { width: 0, @@ -43,50 +43,55 @@ export default class TransformableImage extends Component { imageLoaded: false, pixels: undefined, keyAcumulator: 1 - }; + } } componentWillMount() { if (!this.props.pixels) { - this.getImageSize(this.props.source); + this.getImageSize(this.props.source) } } componentWillReceiveProps(nextProps) { if (!sameSource(this.props.source, nextProps.source)) { //image source changed, clear last image's pixels info if any - this.setState({pixels: undefined, keyAcumulator: this.state.keyAcumulator + 1}) - this.getImageSize(nextProps.source); + this.setState({ + pixels: undefined, + keyAcumulator: this.state.keyAcumulator + 1 + }) + this.getImageSize(nextProps.source) } } render() { - let maxScale = 1; - let contentAspectRatio = undefined; - let width, height; //pixels + let maxScale = 1 + let contentAspectRatio = undefined + let width, height //pixels if (this.props.pixels) { //if provided via props - width = this.props.pixels.width; - height = this.props.pixels.height; + width = this.props.pixels.width + height = this.props.pixels.height } else if (this.state.pixels) { //if got using Image.getSize() - width = this.state.pixels.width; - height = this.state.pixels.height; + width = this.state.pixels.width + height = this.state.pixels.height } if (width && height) { - contentAspectRatio = width / height; + contentAspectRatio = width / height if (this.state.width && this.state.height) { - maxScale = Math.max(width / this.state.width, height / this.state.height); - maxScale = Math.max(1, maxScale); + maxScale = Math.max( + width / this.state.width, + height / this.state.height + ) + maxScale = Math.max(1, maxScale) } } - 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,86 +103,104 @@ export default class TransformableImage extends Component { maxScale={maxScale} contentAspectRatio={contentAspectRatio} onLayout={this.onLayout.bind(this)} - style={this.props.style}> + style={this.props.style} + > - ); + ) } onLoadStart(e) { - this.props.onLoadStart && this.props.onLoadStart(e); + this.props.onLoadStart && this.props.onLoadStart(e) this.setState({ imageLoaded: false - }); + }) } onLoad(e) { - this.props.onLoad && this.props.onLoad(e); + this.props.onLoad && this.props.onLoad(e) this.setState({ imageLoaded: true - }); + }) } onLayout(e) { - let {width, height} = e.nativeEvent.layout; + let { width, height } = e.nativeEvent.layout if (this.state.width !== width || this.state.height !== height) { this.setState({ width: width, height: height - }); + }) } } getImageSize(source) { - if(!source) return; + if (!source) return - DEV && console.log('getImageSize...' + JSON.stringify(source)); + DEV && console.log('getImageSize...' + JSON.stringify(source)) if (typeof Image.getSize === 'function') { if (source && source.uri) { Image.getSize( source.uri, (width, height) => { - DEV && console.log('getImageSize...width=' + width + ', height=' + height); + DEV && + console.log( + 'getImageSize...width=' + width + ', height=' + height + ) if (width && height) { - if(this.state.pixels && this.state.pixels.width === width && this.state.pixels.height === height) { + if ( + this.state.pixels && + this.state.pixels.width === width && + this.state.pixels.height === height + ) { //no need to update state } else { - this.setState({pixels: {width, height}}); + this.setState({ pixels: { width, height } }) } } }, - (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'); + console.warn( + 'getImageSize...please provide pixels prop for local images' + ) } } else { - console.warn('getImageSize...Image.getSize function not available before react-native v0.28'); + console.warn( + 'getImageSize...Image.getSize function not available before react-native v0.28' + ) } } getViewTransformerInstance() { - return this.refs['viewTransformer']; + return this.viewTransformer } } function sameSource(source, nextSource) { if (source === nextSource) { - return true; + return true } if (source && nextSource) { if (source.uri && nextSource.uri) { - return source.uri === nextSource.uri; + return source.uri === nextSource.uri } } - return false; + return false } From 283d0b0585bbfb1aa9c4b73affa5fd167d6202bb Mon Sep 17 00:00:00 2001 From: Daniel Fernando Lourusso Date: Thu, 8 Mar 2018 14:36:39 -0300 Subject: [PATCH 6/9] update dependencies --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 264332f..3f66a90 100644 --- a/package.json +++ b/package.json @@ -17,6 +17,6 @@ }, "homepage": "https://github.com/ldn0x7dc/react-native-transformable-image#readme", "dependencies": { - "react-native-view-transformer": "0.0.28" + "react-native-view-transformer": "https://github.com/dflourusso/react-native-view-transformer" } } From ffd77f250bc452c485bdd9ebe82ba1020bd04024 Mon Sep 17 00:00:00 2001 From: Daniel Fernando Lourusso Date: Thu, 8 Mar 2018 14:54:16 -0300 Subject: [PATCH 7/9] add prop-types dependency --- package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/package.json b/package.json index 3f66a90..1c56ad0 100644 --- a/package.json +++ b/package.json @@ -17,6 +17,7 @@ }, "homepage": "https://github.com/ldn0x7dc/react-native-transformable-image#readme", "dependencies": { + "prop-types": "^15.6.1", "react-native-view-transformer": "https://github.com/dflourusso/react-native-view-transformer" } } From ec277dda4b7565e2f70abc58a6ee19b186f9537b Mon Sep 17 00:00:00 2001 From: Samuel Suther Date: Mon, 11 Mar 2019 09:15:49 +0100 Subject: [PATCH 8/9] Fix wrong import Statement for transformableImage.js --- library/TransformableImage.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/library/TransformableImage.js b/library/TransformableImage.js index 342df4c..d6bc99d 100644 --- a/library/TransformableImage.js +++ b/library/TransformableImage.js @@ -4,7 +4,7 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; import { Image } from 'react-native'; -import ViewTransformer from '@realgeeks/react-native-view-transformer'; +import ViewTransformer from 'react-native-view-transformer'; let DEV = false; From 5f8e8bfee7a7e5379df73e665d1212bfa2ddfa58 Mon Sep 17 00:00:00 2001 From: Samuel Suther Date: Tue, 24 Sep 2019 16:50:02 +0200 Subject: [PATCH 9/9] Change Dependency for "view-transformer-next" --- library/TransformableImage.js | 2 +- package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/library/TransformableImage.js b/library/TransformableImage.js index d6bc99d..1092c1a 100644 --- a/library/TransformableImage.js +++ b/library/TransformableImage.js @@ -4,7 +4,7 @@ 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; diff --git a/package.json b/package.json index 83df604..c7d2055 100644 --- a/package.json +++ b/package.json @@ -22,6 +22,6 @@ "prop-types": "*" }, "dependencies": { - "@realgeeks/react-native-view-transformer": "0.1.0" + "react-native-view-transformer-next": "0.0.30" } }