react-native-image-zoom
react-native-image-zoom copied to clipboard
Add `initialScale` property
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,
},
};

thanks a lot, I really needed this change!