search

hhunaid / react-native-image-crop-tools

Native-ish Image Crop Tools for react native
172 stars 57 forks source link

Cannot get it image displayed on iOS #18

Open Sanglepp opened 3 years ago

Sanglepp commented 3 years ago

On Android everything works well and is a lifesaver.

On iOS i get the cropper screen displayed but no image is visible. I have tried with multiple uri formats, but no luck.

Is there a specific uri format that is needed for iOS?

I have tried these examples assets-library://asset/asset.JPG?id=B3413BF7-5F75-448F-81AB-2D1164A0C286&ext=JPG ph://B3413BF7-5F75-448F-81AB-2D1164A0C286/L0/001 B3413BF7-5F75-448F-81AB-2D1164A0C286/L0/001

None of these are shown in the cropper. Tried on the simulator and also on iOS device.

hhunaid commented 3 years ago

Only filesystem paths are supported. i.e. file:///var/containers/3123123/something.jpg You will need to get the file from PHAsset before you can pass it on to the cropper. Which library are you using to pick image from iOS?

Sanglepp commented 3 years ago

Thanks for a quick reply.

I'm have tried with @react-native-community/cameraroll and also with expo-media-library.

One gives me ph:// path and other one gives assets-library://.

hhunaid commented 3 years ago

You can use this

Sanglepp commented 3 years ago

I cannot use that one as I have custom image gallery and react-native-image-picker is opening native image picker.

I will try to find a workaround for the image paths or use different cropper. But thanks anyway.

Sanglepp commented 3 years ago

Tried it out actually with react-native-image-picker and filesystem paths and doesn't work for me also. Both in device and in simulator.

iOS version is 14.0. React-Native version is 0.63.3

Screenshot 2020-11-12 at 16 34 15
Sanglepp commented 3 years ago

Alright. Figured it out. The native component doesn't update the content if uri changes. So it only renders image if the uri is provided when rendering the component and it's not updated while component is mounted.

@hhunaid can you tell if this is doable on the iOS native side that the component updates when uri changes? Not that familiar with the TOCropViewController.

hhunaid commented 3 years ago

Changing the image on the fly doesn't make much sense. And I don't think there is a way to do it without internally destroying and recreating the cropview. What you can do however is conditionally render this component only when the url is ready

ScreamZ commented 3 years ago

Hello @hhunaid ,

I'm using https://github.com/HarvestProfit/react-native-rectangle-scanner

I get such a path : "initialImage": "/var/mobile/Containers/Data/Application/0540A66A-1D7E-48E8-9D80-B766534AD5FB/Library/Caches/RNRectangleScanner/O1606745009.jpeg"

But with InitialImage Get black screen just like @Sanglepp

mohamed2m2018 commented 3 years ago

@ScreamZ you need to add file:// in the beginning of the initial image path

MkNiloufar commented 3 years ago

Any solution here?

hhunaid commented 3 years ago

Can you try @mohamed2m2018's answer?

RupakKarki-Outcode commented 10 months ago

I was also stuck on this issue for a while, adding a key prop with the image's uri to the CropView seems to solve the problem for me on iOS,

MariyaAntonenko commented 9 months ago

downgrading "react-native-image-picker" from "7.0.1" => "^3.6.0" due to following issue finally helped me to get image in render. Not perfect solution, but mb it will fit someone. https://github.com/react-native-image-picker/react-native-image-picker/issues/2119#issuecomment-1528008388