React-native-image-crop-picker: Simulator freezes after selecting and posting image - react native 0.63.1

[jamesshaw49]

Version

Tell us which versions you are using:

• react-native-image-crop-picker v^0.31.1
• react-native v0.63.1

Platform

Tell us to which platform this issue is related

• iOS
• Android

Expected behaviour

On the simulator, after selecting image from library, we should be able to process the image (in my case I am posting it to the server).

Actual behaviour

After selecting an image/images OR just closing the image selecting modal, the simulator freezes (this occurring before posting or any processing). Initially, I thought it was a bug in my code, but traced the error all the way back to the openPicker method. In addition, when trying to send the image returned (an image is still returned even though the simulator freezes), I get the errors shown below in Chrome console.

This does not happen on an actual device. I wonder if it is related to this issue: https://github.com/facebook/react-native/issues/29364

Also important to note is that I only started to receive this error after updating to the latest version of react-native (0.63.1). I did not have any of these issues in RN 0.62.

My Thoughts

I am wondering if there are two issues at play here;

1. One issue could be related to animation/gestures and

2. Another related to actually sending the image to the server.

The reason I think the issues are separate, is because regardless of whether I select an image or not, the simulator freezes. However, if I open the modal to select an image the simulator freezes AND I receive the errors shown below in the Chrome console.

I receive the following errors in Chrome console

Missing request token for request: { URL: file:///Users/jamesshaw/Library/Developer/CoreSimulator/Devices/A62AF702-A4BD-4873-8586-1D573135E3A2/data/Containers/Data/Application/1517338F-68A0-45B9-8A18-1FD824C2DB88/tmp/react-native-image-crop-picker/2E5CC76E-3C7D-4475-8EC0-FA6B52FAA7D7.jpg }

Error processing request body: Error Domain=RCTErrorDomain Code=0 "Invalid request token." UserInfo={NSLocalizedDescription=Invalid request token.}

For all of you with iOS native dev experience, I receive the following errors in Xcode

2020-07-22 09:10:39.575509+1000 FitPlace[32558:801024] [native] [GESTURE HANDLER] Initialize gesture handler for root view ; layer = >
2020-07-22 09:11:09.014235+1000 FitPlace[32558:801240] [javascript]
2020-07-22 09:11:10.139509+1000 FitPlace[32558:801024] [core] "Error returned from daemon: Error Domain=com.apple.accounts Code=7 "(null)""
2020-07-22 09:11:14.190836+1000 FitPlace[32558:801240] [javascript]
2020-07-22 09:11:14.414287+1000 FitPlace[32558:801862] [native] Missing request token for request: { URL: file:///Users/jamesshaw/Library/Developer/CoreSimulator/Devices/9E56DCF3-43C2-4CFF-B6BE-1BA423D7E6C9/data/Containers/Data/Application/BB05A96E-3C98-47CB-AEF9-16CBE99759BC/tmp/react-native-image-crop-picker/86AFC5DF-F9A8-4AE4-B07B-A38D0C28CF60.jpg }
2020-07-22 09:11:14.431963+1000 FitPlace[32558:801862] [native] Missing request token for request: { URL: file:///Users/jamesshaw/Library/Developer/CoreSimulator/Devices/9E56DCF3-43C2-4CFF-B6BE-1BA423D7E6C9/data/Containers/Data/Application/BB05A96E-3C98-47CB-AEF9-16CBE99759BC/tmp/react-native-image-crop-picker/86AFC5DF-F9A8-4AE4-B07B-A38D0C28CF60.jpg }
2020-07-22 09:11:14.436436+1000 FitPlace[32558:801024] Warning: Attempt to present on which is already presenting
2020-07-22 09:11:14.443977+1000 FitPlace[32558:801862] [native] Missing request token for request: { URL: file:///Users/jamesshaw/Library/Developer/CoreSimulator/Devices/9E56DCF3-43C2-4CFF-B6BE-1BA423D7E6C9/data/Containers/Data/Application/BB05A96E-3C98-47CB-AEF9-16CBE99759BC/tmp/react-native-image-crop-picker/86AFC5DF-F9A8-4AE4-B07B-A38D0C28CF60.jpg }
2020-07-22 09:11:14.444786+1000 FitPlace[32558:801024] Warning: Attempt to present on which is already presenting
2020-07-22 09:11:14.456065+1000 FitPlace[32558:801862] [native] Error processing request body: Error Domain=RCTErrorDomain Code=0 "Invalid request token." UserInfo={NSLocalizedDescription=Invalid request token.}
2020-07-22 09:11:14.456921+1000 FitPlace[32558:801024] Warning: Attempt to present on which is already presenting
2020-07-22 09:11:14.460264+1000 FitPlace[32558:801024] Warning: Attempt to present on which is already presenting

Steps to reproduce

1. Trigger image selection modal with ImagePicker.openPicker with options: {multiple: true,
   mediaType: "photo"}

2. Click 'Cancel' on the modal -> the simulator will freeze

3. OR Select an image from the modal -> errors shown in Chrome console AND simulator will freeze

Love react-native-image-crop-picker? Please consider supporting our collective:
👉 https://opencollective.com/react-native-image-crop-picker/donate

[nguyenduy2392]

same issue

[luyouwei66]

me too

[codoffer]

Same issue.

[boorzhang]

@ivpusic have you fixed this issue? i saw you release 0.33.2 yesterday ... seems not work

[GreatAuk]

same issue
react-native-image-crop-picker: 0.33.2
react-native: 0.63.2

[roni-castro]

Ps: this solution is no more necessary if you update the react-native to 0.63.3, as mentioned below.

This problem is not related to this lib, but with the react-native one as reported here. The temporary solution that I am using is:
1 - Modify the function (id)sendRequest:(NSURLRequest *)request withDelegate: that exists in node_modules/react-native/Libraries/Image/RCTImageLoader.mm to this code here

2 -Install the libs responsible to generate patch-package

yarn add patch-package postinstall-postinstall
or
npm i patch-package

3 - Add a script to run the postinstall

  "scripts": {
     ...
    "postinstall": "patch-package"

4 - Create the patch that will override the node-modules with this fix

npx patch-package react-native

5 - Run the pod install and run your iOS app react-native run-ios

6 - The upload might work again.

PS: These are the changes I have done:

If this solutions does not fix the problem, please try to clear your iOS cache by removing the Pods (rm -rf Pods) and/or the DerivedData (rm -rf ~/Library/Developer/Xcode/DerivedData).

[prasanna-panneerselvam]

This problem is not related to this lib, but with the react-native one as reported here. The temporary solution that I am using is:
1 - Modify the function (id)sendRequest:(NSURLRequest *)request withDelegate: that exists in node_modules/react-native/Libraries/Image/RCTImageLoader.mm to this code here

2 -Install the libs responsible to generate patch-package

yarn add patch-package postinstall-postinstall
or
npm i patch-package

3 - Add a script to run the postinstall

  "scripts": {
     ...
    "postinstall": "patch-package"

4 - Create the patch that will override the node-modules with this fix

npx patch-package react-native

5 - Run the pod install and run your iOS app react-native run-ios

6 - The upload might work again.

PS: These are the changes I have done:

If this solutions does not fix the problem, please try to clear your iOS cache by removing the Pods (rm -rf Pods) and/or the DerivedData (rm -rf ~/Library/Developer/Xcode/DerivedData).

Thanks a lot!!!
I was struggled in last two days, I just followed your instruction, finally iOS image upload working fine for me

[morgane1806]

I just update react-native from 0.63.2 to 0.63.3, it fixed the issue for me 😉

[ivpusic]

upgrade react-native to version 0.63.3

[NoumanSakhawat]

Update node_modules/react-native/Libraries/Image/RCTImageLoader.mm.
https://github.com/facebook/react-native/pull/29595/files

[castalonirenz]

I just update react-native from 0.63.2 to 0.63.3, it fixed the issue for me 😉

this works for me too

[haryelramalho]

@roni-castro solution works for me.