croppedArea and croppedAreaPixels is returned as NaN on ios portrait

[devnostic]

Describe the bug
When I am in portrait mode on an iPhone, the cropped pixels come back NaN. I have to turn my phone to landscape mode to get the crop area to show and pixels to generate.

How can I use it in portrait mode?

 <img width="359" alt="Screen Shot 2023-04-12 at 8 42 04 AM" src="https://user-images.githubusercontent.com/55760611/231510376-53a97d46-de58-47ca-975c-d06c7e36ec66.png">

[devnostic]

So, after some additional testing, the crop box isn't showing on mobile at the beginning. I have to rotate my phone and then rotate it back in order to get the crop box to work.

Any ideas?

RPReplay_Final1681314715.MP4

[ValentinH]

The issue doesn't come from the iphone or the portrait mode. It comes from the modal. When the modal is closed and the cropper is rendered, it's not able to compute it's available size.
You should check the existing closed issues with the "modal" keyword.

[Mustafa-Aswadi]

Hi @ValentinH
Have same issue but not in iphone or in portrait mode.
cropArea returns NaN instead of percentages.
when I open the modal the handleCropComplete calls and after multiple times that I open the modal I get {x: NaN, y: NaN, width:NaN, height: NaN } so the cropArea does not apears. and I should close the modal then open it again for appearing the cropArea.

here is my component for cropping.

const CropImage = () => {
const [crop, setCrop] = useState({ x: 0, y: 0 });
const [zoom, setZoom] = useState(1);
const [media, setMedia] = useState(null);
const [croppedArea, setCroppedArea] = useState(null);

const handleCropComplete = useCallback((croppedArea, _) => {
console.log('croppedArea', croppedArea);
setCroppedArea(croppedArea);
}, []);

const _handleSetMedia = useCallback((data) => {
setMedia(data);
}, []);

const _handleZoomChange = useCallback((value) => {
setZoom(value);
}, []);

return (
<Modal
closeButtonId="crop-image-modal-close-btn"
onCancel={onCancel}
visible={visible}
footer={[

{t('form.save')}
,
]}
bodyStyle={styles.modal}>

<Title level={5} className="ml-1">
{t('tagPages.zoom')}
</Title>

);
};

interface StylesProps {
trackStyle: CSSProperties;
modal: CSSProperties;
cropper: any;
}

const styles: StylesProps = {
trackStyle: {
backgroundColor: '#685BC7',
},
modal: {
padding: '0px',
},
cropper: {
cropAreaStyle: {
borderRadius: '6%',
border: 'none',
},
},
};

export default CropImage;

[ValentinH]

You should check the existing closed issues with the "modal" keyword.

[Mustafa-Aswadi]

I checked #428, but it does not seems to match my issue.
my modal does not have any animation.
@ValentinH

[ValentinH]

If you can share a codesandbox showing the issue, I'd be happy to help. 🙂

[Mustafa-Aswadi]

I am reading the #409 it seems to match my problem.
If I couldn't find answer I will share codesanbox code for you.
@ValentinH

[Mustafa-Aswadi]

@ValentinH why I face with the above issue when I pass initialCroppedAreaPercentages props

[ValentinH]

You are probably passing a different reference at every render. Again, with a codesandbox, I can help.

[Mustafa-Aswadi]

@ValentinH I created an issue for this. #461

[ValentinH]

Closing as there was no answer for a while. Comment to re-open 😉