react-native-image-zoom icon indicating copy to clipboard operation
react-native-image-zoom copied to clipboard

Huge image cannot be reduced

Open dhcmega opened this issue 7 years ago • 11 comments

Hi Image shows up huge and cannot be zoomed out. The image's size is 3300x1800 Screen is 1242x2208 (iphone 7plus)

      <View style={{ flex: 1 }}>
        {!loadimage && (
          <Spinner />
        )}
        {loadimage && (
          <ImageZoom
            cropWidth={Dimensions.get('window').width}
            cropHeight={Dimensions.get('window').height - 50}
            imageWidth={width}
            imageHeight={height}
          >
            <Image
              style={{ width, height }}
              source={{
                uri: urlImage,
              }}
            />
          </ImageZoom>
        )}
      </View>

What am I doing wrong? Thanks!

dhcmega avatar Jan 17 '18 14:01 dhcmega

Can you give me a example image?

ascoders avatar Jan 23 '18 02:01 ascoders

Sorry, what do you mean with an example? The code I pasted is what I have. Isn't it an example? Do you want the whole render() method? Thanks!!

EDIT: My problem might be related to the problem of not knowing the size of the image, as this screen is used for different, changing, images.

dhcmega avatar Mar 16 '18 22:03 dhcmega

Image is 4 o 5 times bigger than screen and cannot be reduced.

@connect(mapStateToProps)
export default class ImageView extends Component {
  render() {
    const { url, use } = this.props;
    const source = {
      uri: `${url}`,
      headers:
        {
          Authorization: `Bearer ${use.token}`,
        },
    }
    return (
      <ImageZoom
        cropWidth={Dimensions.get('window').width}
        cropHeight={Dimensions.get('window').height}
        imageWidth={3300}
        imageHeight={1800}
      >
        <Image
          style={{ width: 3300, height: 1800 }}
          resizeMode="contain"
          source={source}
        />
      </ImageZoom>
    );
  }
}

dhcmega avatar Apr 01 '18 13:04 dhcmega

@ascoders if I set imageWidth={400}, imageHeight={400}, style={{ width: 400, height: 400 }} it more or less work, but image is not centered, depends on the size of the screen.

dhcmega avatar Apr 01 '18 13:04 dhcmega

@dhcmega imageWidth and imageHeight should be the image's original size.

ascoders avatar Apr 01 '18 14:04 ascoders

@ascoders yes, I know, these are the real values: imageWidth={3300} and imageHeight={1800} with these values, image doesn't show up.

dhcmega avatar Apr 01 '18 14:04 dhcmega

This is a real bug.

ascoders avatar Apr 01 '18 15:04 ascoders

Any updates on that?

Dalamar avatar Jun 16 '18 20:06 Dalamar

any update on this, im facing a similar issue. It only manifests itsself in release builds on iOS

LukeDefeo avatar Nov 19 '18 19:11 LukeDefeo

+1 having issues on this

Salil999 avatar Aug 26 '19 06:08 Salil999

Were you able to solve this?

roxxid avatar Dec 10 '19 19:12 roxxid