Unmount images while loading

Question

Unmount images while loading

Closed this issue 5 years ago · 46 comments

I'm loading few images per scene but they take a few seconds to load.
That means that in the meantime the user can navigate to another scene.
Causing the images to unmount before they finish loading.
Which triggers the following warning:
Task orphaned for request <NSMutableURLRequest: [[SOME_HEX_CODE]]> { URL: [[IMG_URL]] }

It's not crashing. I just want to know if relying the loading cancellation to React unmounting is ok? Having these warning all around is safe?

Note variables wrapped in [[]]

Answer 1 · 2017-04-21T12:56:12.000Z

This is also an issue when using FlatList with a list of items that contains images. Because the View gets unloaded all the time when scrolling, you will get a lot of these warnings.

Answer 2 · 2017-07-16T11:12:11.000Z

This will help: https://github.com/kfiroo/react-native-cached-image
It inserts View first, before image loading is complete.
I forked repository (https://github.com/iegik/react-native-cached-image) and try to reach following goals:

Customizable image loader (kfiroo/react-native-cached-image#25) (kfiroo/react-native-cached-image#55)
Cache image request, save on device`s temporary folder
Cache with expiration policy (kfiroo/react-native-cached-image#40)
Support 304 Not modified (kfiroo/react-native-cached-image#56)
Responsive image (https://github.com/expo/react-native-responsive-image)

Answer 3 · 2017-08-28T07:24:33.000Z

Any news from the RN team? :) It's been a loooong time

Answer 4 · 2017-08-29T05:14:13.000Z

It is community driven project, so PRs are always welcome!

Answer 5 · 2017-09-06T07:48:13.000Z

Before make any PR I usually wait until one collaborator tell me that's something needed. I'll take your comment @shergin as a call ;)

Answer 6 · 2017-09-07T03:59:12.000Z

Well, honestly I have no any idea why this happening. But... usually code is worth a thousand words.
Is this expected behavior? Probably not. Someone just have to investigate this.

Answer 7 · 2017-09-28T10:35:28.000Z

I had the same issue with FlatList with images on rows. Not only warning but also there are serious performance problems too. I convert it to ListView, its all works great now. There is definitely something going on with FlatList

Answer 8 · 2017-12-03T09:44:05.000Z

Having same issues, I am rendering 3 images in a view using images uploaded on cloudinary

Answer 9 · 2017-12-17T17:00:05.000Z

I'm also experiencing this while loading images into a flatlist

Answer 10 · 2018-01-03T23:19:24.000Z

having a similar issue

it works well on android 6 but ios 11.0
actually images called with remote uri aren't displaying at all

has someone found a workaround?

Answer 11 · 2018-01-04T19:31:39.000Z

ok my bad, images were called with http
switching to https worked for me

Answer 12 · 2018-01-09T12:38:13.000Z

I'm encountering the same problem after switching from RN 0.48.4 to 0.52.0.

Answer 13 · 2018-02-22T16:23:51.000Z

+1

I get the impression that this is not just a warning. I think that somehow this problem combined with the flat list may be causing some sporadic crashes in my application.

I am using the appsee service and I have noticed that many crashes that are not a JS exception happen to many users when they enter the section of my application where the image list is built.

This is the list of crashes that I have not yet been able to solve, but thanks to appsee I was able to realize that 90% of the time it happens loading theflatist rendering image in each row.

- SIGTRAP
- SIGABRT
- abort_with_payload_wrapper_internal
- pthread_kill$VARIANT$mp

The statistics collected tell me that these crashes happen around 1 per week. As you can see, it's something super sporadic.

Maybe related to this topic

Answer 14 · 2018-03-13T12:33:16.000Z

@sospedra How were you able to remove this warning? I am facing the same

Answer 15 · 2018-03-14T02:21:32.000Z

YellowBox.ignoreWarnings(['Task orphaned']);

@AishwaryaSurana , try this to ignore yellow box warnings.

Answer 16 · 2018-03-14T19:04:36.000Z

Well @timwangdev this will only hide the warnings, they won't be completely removed

Answer 17 · 2018-05-02T13:59:50.000Z

PLEASE use the +1 react feature, it is not necessary to post "+1" and notify everyone who is following the issue.

Answer 18 · 2018-05-02T15:12:39.000Z

I will clean all the “+1” comments, to make this thread more readable.

Answer 19 · 2018-05-18T14:14:31.000Z

Is this a problem that can't be solved?

Answer 20 · 2018-07-07T19:18:44.000Z

@huitsing @gabegreenberg Are you guys seeing this issue?

Answer 21 · 2018-07-13T19:19:52.000Z

This issue wasn't appearing for me with RN 0.51.0, but now after upgrading to RN 0.55.4 I am seeing these warnings. No flatlist, but I iterate over a list of images and render them one by one, with each image wrapped in a view.

Answer 22 · 2018-07-16T03:49:09.000Z

i have the same problem, anybody solve this?

Answer 23 · 2018-07-16T13:21:18.000Z

It's weird that this issue is still happening to us after all this time, RN 0.55.4 here.

Answer 24 · 2018-07-16T14:52:39.000Z

@Sangrene same here.

Answer 25 · 2018-07-16T17:51:54.000Z

@CrazyPython not sure if it is still happening, I haven't been following the project where we noticed this originally, so I'm unsure. @brunolemos have you had any issues as of late?

Answer 26 · 2018-07-16T18:27:13.000Z

@brunolemos have you had any issues as of late?

@gabegreenberg I don't recall seeing this in the past few months

Answer 27 · 2018-07-17T12:37:42.000Z

Well actually it's causing HEAVY performances drop on large lists.

In my case it happens on a flatlist displaying items with images. When I try to move to another page using react-navigation whereas all images didn't load, the memory usage goes over 700+MB.

Answer 28 · 2018-08-30T01:21:22.000Z

@timwangdev
If you fix this as quickly as you clean +1, that would be nice .
Encounter the same problem.
RN 0.55,

Answer 29 · 2018-08-30T10:16:43.000Z

Same issue happens after upgrading the RN from 0.47 to 0.56 Any solution to solve this?

Answer 30 · 2018-08-31T04:18:42.000Z

I'm on RN 55.4 and having this issue, anyone have any workaround other than just ignoring the yellowbox?

I've tried loading the image from parent component and passing it in as props to the child but still giving me task orphaned error, though I'm not sure why since the image component instantiation is only done once in the parent and used multiple times by the children so popping the children of the nav stack shouldn't cause this error...

Answer 31 · 2018-08-31T09:03:25.000Z

@rayj10 I switched to https://github.com/Flipkart/recyclerlistview/ as it has better performance overall.

Answer 32 · 2018-09-12T10:42:47.000Z

any fixes for this yet??

Answer 33 · 2018-09-22T22:50:22.000Z

the same here :S

Answer 34 · 2018-10-13T13:07:57.000Z

If instagram, snapchat, gmail were all developed using react native, how they are addressing this task without any issue?

Answer 35 · 2018-10-14T09:29:36.000Z

Actually, I am using FastImage to render cells with images (approx 500-600) using a FlatList. I strongly recommend using that instead of RN's image

It helps if "removeClippedSubviews" is true.

Answer 36 · 2018-12-19T04:16:46.000Z

@connect-dev I bet server side rendering helps a lot.

Answer 37 · 2019-01-16T11:45:08.000Z

Encountered the same problem

Answer 38 · 2019-01-17T09:33:06.000Z

Same problem. Any updates from RN team?

Answer 39 · 2019-02-08T08:15:32.000Z

I have also have the warning, but the image displays normally. Maybe the warning shouldn't be there? I had the same code for a while and this is the first time I get this warning.

Answer 40 · 2019-03-19T12:28:10.000Z

Hello there 👋 this issue doesn't have a repro (which means, a react-native init-ed project with the minimal changes that leads to creating the same issue you are reporting). Unfortunately, we have no way of helping you in a meaningful way – there is no easy way for us to recreate the situation and check that the issue reported is still there when changing the code.

Because of this, we are going to close this issue - but if a repro is shared, we are happy to reopen it 🤗

Answer 41 · 2019-04-25T21:07:40.000Z

I encountered a similar YellowBox warning that was unrelated to loading images in my App. Instead, in dev mode on react-native 0.59, I had some console.warn statements that have a spinner while the Source Map loads that is replaced with a Check Mark. As far as I can tell, even though the check mark always appears, it sometimes triggers the Task orphaned for request YellowBox when the transition between spinner and check mark occurs and may be related to communication delays/timeouts on the bridge between the physical device(in this case iPhone SE) and the react-native packager running on your computer. In my case it is not related to any in app image loading or network calls, as I was using a hard coded object and some console warning to validate some sanitization I was doing to make sure I was getting the correct info from an expected API call without needing to worry about actually hitting the API. It also usually only appeared after several occurrences of making changes, shaking my device, clicking Reload, and running the changes before the YellowBox with:

Task orphaned for request: <NSMutableURLRequest: 0x1c001c650> { URL: data:image/png;base64, ...
... rAndOmAlphaNuM3rics ... RK5CYII== }
appeared. I also seemed to need to have the YellowBox expanded when the spinner changed to a check mark for it to appear. Restarting the packager and the app seemed to fix my issue for a while, although I am unsure if this is the same issue others are seeing or related to some other issue.

Answer 42 · 2019-06-06T14:57:59.000Z

I am seeing this in RN 0.59.8 with an Image trying to load from a file:// URI (on disk) shortly after startup. The image does not load, which means I cannot ignore the warning. The file is fine.
This is on an iPhone XS with iOS 12.3.1. The XS is fast enough that it exposes race conditions in unusual places (from my experience as a native iOS dev)

YellowBox.js:67 Task orphaned for request <NSMutableURLRequest: 0x2835edb50> { URL: file:///var/mobile/Containers/Data/Application/1AD76457-FB51-49B3-9965-92E555C8EA7E/Documents/photo.jpg }

Answer 43 · 2019-11-27T10:01:54.000Z

I am seeing this in RN 0.59.8 with an Image trying to load from a file:// URI (on disk) shortly after startup. The image does not load, which means I cannot ignore the warning. The file is fine.
This is on an iPhone XS with iOS 12.3.1. The XS is fast enough that it exposes race conditions in unusual places (from my experience as a native iOS dev)

YellowBox.js:67 Task orphaned for request <NSMutableURLRequest: 0x2835edb50> { URL: file:///var/mobile/Containers/Data/Application/1AD76457-FB51-49B3-9965-92E555C8EA7E/Documents/photo.jpg }

@xaphod Did u find any solution?

Answer 44 · 2020-01-10T14:39:54.000Z

Still an issue for me on react-native: 0.61.5 anyone else?

I really hope this is a different issue or I'm doing something wrong because this has been open since somewhere in 2017 :(

Answer 45 · 2020-01-20T08:17:47.000Z

Sill facing this issue for ios.

Answer 46 · 2020-01-21T05:12:02.000Z

Hi,
is there anybody is going to solve this ???
cause, I think it makes an effect on the performance of flatlist.