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!