Android doesn't propagate the CSS Styles properly from parent to each collectionView item

[NathanaelA]

Which platform(s) does your issue occur on?

Android

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

• CLI: 8.4.0
• Cross-platform modules: 8.4.x
• UI-CollectionView: 4.0.70

Please, tell us how to recreate the issue in as much detail as possible.

I discovered this when switching from RLV to this component for a client's project. In normal JS mode templates, the CSS styles are not propagated to any of the child cell views since the child views are not linked to the style/styleview during creation.

Code:

In iOS (which works) you call the normal view _addView here https://github.com/nativescript-community/ui-collectionview/blob/master/src/collectionview/index.ios.ts#L642

On Android (which doesn't work) you instead call _setupRootView here instead of calling an _addView https://github.com/nativescript-community/ui-collectionview/blob/master/src/collectionview/index.android.ts#L1077

Unfortunately _setupRootView only calls _SetupUI (which _addView also does) https://github.com/NativeScript/NativeScript/blob/main/packages/core/ui/core/view-base/index.ts#L800

However, this means that based on what _addView does you miss the following normal behavior on android that you get on iOS (and every other component that does this properly on both platforms): https://github.com/NativeScript/NativeScript/blob/6779cdcb554f4374536a930563a7242d3364726a/packages/core/ui/core/view-base/index.ts#L676-L712

• _addViewCore (see: https://github.com/NativeScript/NativeScript/blob/main/packages/core/ui/core/view-base/index.ts#L700 )
• _parentChanged (see: https://github.com/NativeScript/NativeScript/blob/main/packages/core/ui/core/view-base/index.ts#L1038 )
• this.domNode.onChildAdded call (see: https://github.com/NativeScript/NativeScript/blob/main/packages/core/debugger/dom-node.ts#L117 )

The most important of this bunch for setting up and propagating the css style system is the calls inside the _addViewCore function here https://github.com/NativeScript/NativeScript/blob/main/packages/core/ui/core/view-base/index.ts#L700-L712

To fix this, all I had to do is replace the following code in the android code base from https://github.com/nativescript-community/ui-collectionview/blob/2ad773a3376cf88d89d6d95590ed3bb537a4f691/src/collectionview/index.android.ts#L1077-L1081

to just a single line of code

  this._addView(view);

This seems to fix the entire issue and fixes the issues and function calls that are missing... I've been testing this fix in my code and haven't seen any bad behavior even though I do a lot of tricky things during rotation to the css and styles...

Notes:

• the _addView will trigger the callLoaded function for you and setup the parent and isAddedToNativeVisualTree which is why you can replace all that code with a simple this._addView(view);
• RLV also uses _addView for its cells on both iOS and Android.

[farfromrefug]

@NathanaelA sorry for the late answer. I need to remember why i did not use _addView directly. I know there was a reason. Will take a look

[NathanaelA]

@farfromrefug - Not a big issue, I've widely deployed on Android with this fix myself and no issues that I've seen from it.

[farfromrefug]

this should be fixed