search

fakeheal / react-native-pan-pinch-view

🔍 A view component for React Native with pinch to zoom and drag to pan functionality.
MIT License
77 stars 13 forks source link

Not rendering when using 100% as width #2

Closed carestad closed 2 years ago

carestad commented 2 years ago

Hi

I've been trying to use this component instead of https://github.com/likashefqet/react-native-image-zoom due to the reason that the zoom does not snap back when releasing the pinch move. But it seems I can not use 100% as a width for the content dimension and/or container dimension property. It just leads to the <Image /> not loading.

Example code:

<PanPinchView
  minScale={1}
  maxScale={3}
  contentDimensions={{width: '100%', height: 500}} // <-- 100% here does not work
  containerDimensions={{width: '100%', height: calculatedHeight}} // <-- 100% here does not work either
>
      <Image
        borderRadius={5}
        source={{uri: imageUrl}}
        resizeMode="contain"
        style={{width: '100%', height: imageScaledHeight}}
      />
</PanPinchView>
fakeheal commented 2 years ago

Hi!

Thanks for submitting the issue (and the previous one). I am just getting back from a short Covid "vacation" and I am catching up on work.

Unfortunately, due to how all calculations are done, the contentDimensions and containerDimensions must be fixed values. I decided to let users of the package determine the dimensions, instead of trying to figure out where the component is placed and trying to measure its surroundings.

You might use useWindowDimensions() to get the width of the screen (mimicing 100% width). If that doesn't work for you, post your code and we could think of a solution together!

Best, Iv

fakeheal commented 2 years ago

I will close this issue due to inactivity. Feel free to reopen it if you're still experiencing issues.