[ListView & Image] Loading 100 big images into a ListView not only crashes the app, but also crashes the os

[liangfenxiaodao]

I have a list of 100 image URLs and seeded them into the datasource of the ListView.

then I used this one for renderRow:

<Image source={{uri: imageUri}} style={styles.image} />

and it worked fine when I was scrolling the top 40~50 images, but when I scrolled to the end of the list, then the app crashed and I saw the white apple on the screen.

And there is no stacktrace in crash report.

[Iragne]

it's cleary an issue with the size of the images.
It's a memory warning

[tadeuzagallo]

Can you reproduce that constantly?

[Iragne]

As soon as you load big image in a list you get this problem i will investigate more.
I solve in a way this issue on Library Asset #1406

[astrotars]

You could use preprocessing like http://6px.io
On Tue, May 26, 2015 at 8:52 AM Iragne notifications@github.com wrote:

As soon as you load big image in a list you get this problem i will
investigate more.
I solve in a way this issue on Library Asset #1406
#1406

—
Reply to this email directly or view it on GitHub
#1360 (comment)
.

[Iragne]

yes if you want it will work.
But i think we should implement it in react

[astrotars]

Totally agree. I have an application that will be loading several hundred.
Would love to see a fix for this. +1.
On Tue, May 26, 2015 at 8:59 AM Iragne notifications@github.com wrote:

yes if you want it will work.
But i think we should implement it in react

—
Reply to this email directly or view it on GitHub
#1360 (comment)
.

[Iragne]

+1

[Iragne]

https://github.com/Iragne/UIImage-ResizeMagick ;) it's a good start !!!

[liangfenxiaodao]

@tadeuzagallo Yes, I can reproduce it constantly

[KJlmfe]

I also have this problem.

I implement this page http://www.tmall.com/wh/tmall/act/14242/jfbybk with react-native ListView component, when I run in IPad air(not Simulator), it crash when I scroll fast or scroll to the bottom.

[brentvatne]

@xiaodao @KJlmfe - can you link us to a public repo where we can see the bug in action? Thanks!

cc @tadeuzagallo

[sahrens]

I think the general fix is view recycling, but we might need to do Image caching differently as well.

[osdio]

@sahrens How about the tabView?

[fishedee]

I hava a demo which has 100 rows in listview and about 5 big image(1024x768) in single row.when i scroll,it crash.hope you can help us , thank you very much

[udfalkso]

@nparsons08 Stop that.

[mkonicek]

Hi there! This issue is being closed because it has been inactive for a while.

But don't worry, it will live on with ProductPains! Check out its new home: https://productpains.com/post/react-native/listview-image-loading-100-big-images-into-a-listview-not-only-crashes-the-app-but-also-crashes-the-os

ProductPains helps the community prioritize the most important issues thanks to its voting feature.
It is easy to use - just login with GitHub. GitHub issues have voting too, nevertheless
Product Pains has been very useful in highlighting the top bugs and feature requests:
https://productpains.com/product/react-native?tab=top

Also, if this issue is a bug, please consider sending a pull request with a fix.
We're a small team and rely on the community for bug fixes of issues that don't affect fb apps.