react-native-view-transformer - npm Package Compare versions

Comparing version 0.0.9 to 0.0.10

package.json

		{
		"name": "react-native-view-transformer",
		"version": "0.0.9",
		"version": "0.0.10",
		"description": "`react-native-view-transformer` is a pure JavaScript RN component that makes ANY views transformable using gestures like pinch, double tap or pull, as below shows:",
		@@ -5,0 +5,0 @@ "main": "index.js",

README.md

		@@ -29,37 +29,11 @@ # react-native-view-transformer

		## ViewTransformer.Image

		The most common case is to transform an image, or a photo, which is famous as a *PhotoView, or ImageViewer, so we provide a similar component ViewTransformer.Image, which is much like the official Image component, but transformable*!

		Just use it like the official Image component:
		## Transformable Image

		```
		<ViewTransformer.Image
		style={{width: width, height: height}}
		source={{uri: 'xxx'}}
		pixels={{width: 1920, height: 1080}} //Be careful with this prop
		/>
		```
		The most common case is to transform an image, or a photo, which is famous as a *PhotoView, or ImageViewer, so we provide a dedicated component [react-native-transformable-image*](https://github.com/yoaicom/react-native-transformable-image)

		The additional prop pixels tells image size in pixels. (This prop is used to align the edge of the image content with the view's boundry when scaled up and to determine the max scale)

		#### Good news: with react native v0.28 and above, we can use *Image.getSize* to get pixels info using image url both on iOS and Android, so the pixels prop is optional for remote images.

		Bad news: with react native v0.27 and below, we can only use *Image.getSize* to get pixels info on iOS, but [NOT on Android](https://github.com/facebook/react-native/issues/5838), so the pixels prop is needed. You can ask your app's API server to provide the pixels info of remote images. For example, the API server may return a json like

		```
		image: {
		url: 'xxx',
		width: 1920,
		height: 1080
		}
		```

		###### demo

		![](https://raw.githubusercontent.com/yoaicom/react-native-demo/react-native-view-transformer/resources/2.gif)

ViewTransformer.js

		@@ -83,2 +83,8 @@ 'use strict';

		componentDidUpdate(prevProps, prevState) {
		this.props.onViewTransformed && this.props.onViewTransformed(
		this.state.scale, this.state.translateX, this.state.translateY
		);
		}

		render() {
		@@ -325,3 +331,2 @@ let gestureResponder = this.gestureResponder;
		let transform = getTransform(this.contentRect(), new Rect(left, top, right, bottom));
		//this.setState(transform);

		@@ -399,4 +404,6 @@ this.updateTransform(transform);
		*/
		enableResistance: React.PropTypes.bool
		enableResistance: React.PropTypes.bool,

		onViewTransformed: React.Properties.func

		};
		@@ -403,0 +410,0 @@ ViewTransformer.defaultProps = {

react-native-view-transformer - npm Package Compare versions

Improved metrics

Worsened metrics