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

Add `initialScale` property

Open jakub-gonet opened this issue 4 years ago • 1 comments

Motivation

Frequently when user zooms too much the contents are pixelated. One way to fix is to use a much bigger image/SVG/etc and set the initial scale to some small value. This PR allows doing that by adding the option to set initialScale.

Changes

Added initialScale prop with types and updated README

Example code and GIF

import React from 'react';
import {SafeAreaView, View, Dimensions, Animated} from 'react-native';
import ImageZoom from 'react-native-image-pan-zoom';
import {Svg, Circle} from 'react-native-svg';

const AnimSvg = Animated.createAnimatedComponent(Svg);
export default () => {
  return (
    <SafeAreaView style={[{flex: 1}, styles.container]}>
      <ImageZoom
        cropWidth={Dimensions.get('window').width}
        cropHeight={Dimensions.get('window').height}
        imageWidth={150}
        imageHeight={150}
        minScale={0.3}
        maxScale={25}
        initialScale={2}
        useNativeDriver={true}>
        <AnimSvg
          viewBox={`0 0 150 ${150}`}
          height="300"
          width="300"
          style={{backgroundColor: 'pink'}}>
          <Circle cx="50" cy="50" r="50" stroke={'black'} />
        </AnimSvg>
      </ImageZoom>
      <View>
        <Svg height="150" width="150" style={{backgroundColor: 'lightblue'}}>
          <Circle cx="50" cy="50" r="50" stroke={'black'} />
        </Svg>
      </View>
    </SafeAreaView>
  );
};
const styles = {
  container: {justifyContent: 'center', alignItems: 'center'},
  rectangle: {
    backgroundColor: 'pink',
    width: 100,
    height: 100,
  },
};

Screen Recording 2020-09-06 at 19 12 39

jakub-gonet avatar Sep 06 '20 17:09 jakub-gonet

thanks a lot, I really needed this change!

obsidianart avatar Nov 26 '20 21:11 obsidianart