search

nativescript-community / ui-collectionview

Allows you to easily add a collection view (grid list view) to your projects. Supports vertical and horizontal modes, templating, and more.
Apache License 2.0
59 stars 18 forks source link

Layout issues on iOS with 4.0.60 due to autoReloadItemOnLayout #42

Closed hendrickson-tyler closed 8 months ago

hendrickson-tyler commented 1 year ago

Updated to the latest 4.0.60 and it seems that the new autoReloadItemOnLayout is causing layout issues on iOS (at least for my app). This happens in both the simulator as well as an actual device. Android seems unaffected.

The following screenshot is what the CollectionView looks like when the autoReloadItemOnLayout property is not set or is set to true. Curiously, this issue corrects itself after rotating the device twice (I'm assuming because it triggers an auto reload). Rotating again after this causes the issue to re-emerge, which requires another two rotations to fix.

image

This is what it looks like with autoReloadItemOnLayout="false". Rotating the device doesn't produce any issues.

image

Easy fix is just to keep it false for now, but is there a reason that this experimental feature is enabled by default?

Please, provide the following version numbers that your issue occurs with:

farfromrefug commented 1 year ago

@hendrickson-tyler thanks for the report. can you share a repro simple. it was on by default cause it should work :) but i ll disable it by default.

farfromrefug commented 1 year ago

@hendrickson-tyler default value changed in new release. By any chance could you still try to reproduce this in a simple example so that i can fix it for good?

hendrickson-tyler commented 1 year ago

@farfromrefug Sorry for the late response. Yeah, I'll try to come up with something tonight and share that with you.

hendrickson-tyler commented 1 year ago

@farfromrefug I think I've narrowed down the issue a bit. From what I can tell, it seems to be caused by having an *ngFor nested inside the CollectionView (like what I'm doing for the specific events above). Something about that is causing it to behave a little weird.

Here's a simple project where you can see the issue: https://github.com/hendrickson-tyler/collectionview-repro

Hopefully that helps!

farfromrefug commented 1 year ago

@hendrickson-tyler awesome! thank you so much for taking the time to prepare that! I ll look at it

farfromrefug commented 1 year ago

@hendrickson-tyler sorry for answering late about this. I ran your code but i dont see anything wrong there. Anyway you should never use a ngFor in a template if it depends on the items props. What you should do is do the ngFor for a fixed length and set the visibility of each one depending on the item. Does that make sense? The layout is normal in a sense that collectionview does not support that. Let me know if that makes sense for you or if i am wrong and you still see an issue

hendrickson-tyler commented 1 year ago

@farfromrefug Now I'm sorry for my late response 🙂 Sorry, I'm not sure I follow. Could you give an example, maybe? I think no matter what, I have to depend on the items props because I need to know what sub-items (specific events) I need to display for that item. I'm probably misunderstanding though.

I just tested again with autoReloadItemOnLayout="true" after a good while (now on v5.1.7) and it looks like there are some different problems. I get multiple errors saying ERROR TypeError: Cannot read properties of null (reading 'destroyed') and the view looks like this after rotating:

image

It's working perfectly for me with autoReloadItemOnLayout="false", so I'll probably just stick with that for now. But I'm interested to hear if it's just me doing something stupid haha