justhive / react-native-view-editor

A simple wrapper for being able to rotate, pan, and resize a child view or image with animations.
https://medium.com/@sscaff1/react-native-image-panning-zooming-832aef361c87#.dyvem0jr4
29 stars 16 forks source link

Question about image sizes #5

Open DroneKid opened 7 years ago

DroneKid commented 7 years ago

Hi!

I'm trying to pan and zoom big image (1000x1000). So I set imageWidth & imageHeight to 1000 and imageContainer sizes to the Dimensions values. It pans ok, but pinch-zooming is funky. on iOs it just pans and does not zoom, on Android it crops the image to the container size.

Could you please advise if I'm doing anything wrong?

Thanks, A.

superandrew213 commented 7 years ago

Post your code so we can see

DroneKid commented 7 years ago
import React, { Component } from 'react';
import {
  View,
  Text,
  Image,
  Dimensions,
} from 'react-native';
import ViewEditor from 'react-native-view-editor';
const { width, height } = Dimensions.get('window');

const uri = 'https://res.cloudinary.com/dtihkk6cr/image/upload/'
  + 'v1481234249/permission_form_page_1_hqx6to.png';

const imgWidth = 773;
const imgHeight = 1000;

console.log(width, height);

export default class App extends Component {
  render() {
    return (
      <ViewEditor
        imageWidth={imgWidth}
        imageHeight={imgHeight}
        imageContainerWidth={width}
        imageContainerHeight={height}
      >
        {() => (
          <Image
            style={{ position: 'relative', width: imgWidth, height: imgHeight }}
            source={{ uri }}
          >
          </Image>
        )}
      </ViewEditor>
    );
  }
}