Unmount images while loading

[sospedra]

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 [[]]

[cornedor]

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.

[iegik]

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 (Suggestion: passing a customised ActivityIndicator or SpinnerComponent kfiroo/react-native-cached-image#25) (Suggestion: Progressive image loading algorithm by Medium kfiroo/react-native-cached-image#55)
• Cache image request, save on device`s temporary folder
• Cache with expiration policy (Is there any way to set expiration policy for cache? kfiroo/react-native-cached-image#40)
• Support 304 Not modified (304 Not modified and Cache-Control kfiroo/react-native-cached-image#56)
• Responsive image (https://github.com/expo/react-native-responsive-image)

[sospedra]

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

[shergin]

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

[sospedra]

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 ;)

[shergin]

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.

[sercanov]

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

[noumantahir]

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

[nickyhajal]

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

[Malagasy]

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?

[Malagasy]

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

[winterbe]

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

[jose920405]

+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

[AishwaryaSurana]

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

[timwangdev]

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

@AishwaryaSurana , try this to ignore yellow box warnings.

[AishwaryaSurana]

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

[adcuz]

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

[timwangdev]

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

[brunolemos]

@brunolemos have you had any issues as of late?

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

[Sangrene]

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.

[hpmax00]

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

[jeffreyrajanofficial]

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

[rayj10]

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...

[Sangrene]

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

[tonmanayo]

any fixes for this yet??

[MuhamedAhmed24]

the same here :S

[connect-dev]

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

[csotiriou]

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.

[tkserver]

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

[yuezonglun]

Encountered the same problem

[santiph]

Same problem. Any updates from RN team?

[cglacet]

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.

[michalchudziak]

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 🤗

[bondparkerbond]

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.

[xaphod]

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 }

[anhnh27]

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?

[Elias-Graf]

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 :(

[FrancisAiknow]

Sill facing this issue for ios.

[shivam4ukhandelwal]

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