Does not work with Rotation: Axis point gets lost on rotation update

[facuescobar]

Hi!

The axis gets lost after rotation

My app is locked on portrait, but I have an image slider component where images can go to landscape. I've added PhotoView to my project, and everything goes well if the orientation doesn't change but when I change the orientation, the photo view component gets a wrong axis.

Initial load looks good, I can zoom in/out

But, if the image scale is different than 1 and orientation change, the next render will look like this, on portrait or landscape.

   //Returns screen bounds based on orientation 
   // switch width and height values if orientation===landscape) if not, returns bounds width and height as it is
    const screenBounds = getImageBounds(
      orientation, bounds.width, bounds.height
    );

    //Returns scaled image size 
    const imageScale = scaleImage(
      screenBounds.width, screenBounds.height,
      image.width, image.height
    );

    //Degrees to rotate
    const rotation = this.animation.interpolate({
      inputRange: [0, 360],
      outputRange: ['0deg', '360deg'],
    });

    const viewStyles = {
      width: screenBounds.width,
      height: screenBounds.height,
      transform: [
        {
          rotate: rotation,
        },
      ],
    };

    const imageStyles = {
      width: imageScale.width,
      height: imageScale.height,
    };

    return (
      <Animated.View
        style={viewStyles}
      >
        <PhotoView
          source={{
            uri: this.props.image.url,
          }}
          minimumZoomScale={1}
          maximumZoomScale={3}
          androidScaleType='fitCenter'
          style={imageStyles}
        />
      </Animated.View>
    );

[stevenleeg]

Has anyone found a workaround for this issue? I'm also running into it and am not entirely sure how to fix it.

[filipmadej]

+1

[vbanurag]

+1