ascoders / react-native-image-zoom

react native image pan and zoom
MIT License
637 stars 282 forks source link

Add `initialScale` property #151

Open jakub-gonet opened 4 years ago

jakub-gonet commented 4 years ago

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

obsidianart commented 3 years ago

thanks a lot, I really needed this change!