fakeheal/react-native-pan-pinch-view

How to set initial translate values so the content fits in the container

80prozent opened this issue · 2 comments

80prozent commented

Thanks for this package.

For the most part it works great for me!

My only question is how it is supposed to initially show the content so that it nicly is centered and fully visible in the container.

I am trying to set it up something like this:

<PanPinchView
	ref={panPinchViewRef}
	minScale={0.1}
	initialScale={Dimensions.get('window').width / contentWidth}
	containerDimensions={{
		width: Dimensions.get('window').width,
		height: Dimensions.get('window').height,
	}}
	contentDimensions={{ width: contentWidth, height: contentHeight }}>

This seems to work ok for the inital size.

I try to use the translateTo function to move the content so it sits centered in the container, but apparently it does not work as i expect it.

I tried to use values like translateTo(contentWidth/2, contentHeight/2), but not getting anywhere close to a centered content.

This seem to work ok for centering the content vertically: translateTo(-contentWidth/2, -contentHeight/2), but horizontally its not centered.

Any advice on this issue ?

fakeheal commented

Hey, I am glad you're finding the library helpful! I am closing this issue, if you're having any other problems you can reopen it.