Issue rendering layout with nested components at multiple depths

[msafder]

Hello,

First off thanks for the AWESOME library! So I recently updated my version of Render from 3.2 to 4.3 which wasn't too bad but now it seems like the Yoga values I set for "layout" seem to now be ignored for any of my nested "children" components! Is this a known issue? I saw that in the notes for the 4.3 release this exact issue may have been fixed but I don't see any relevant code for the fix included with the commit? Any ideas? Cheers! -mo

[jewilhel]

It seems this is happening to me too. I was using:

layout.alighSelf = .center

to center a card in the middle of the screen after setting its position property like this:

layout.position = .absolute

after the update the card sticks to the top of the screen instead of centered in the middle of the screen like before. The only thing that seems to work is to set a top margin on the card.

[alexdrone]

Thank you guys for the feedback - 4.0 went to a huge (but necessary) refactoring.
Could you attach some code that reproduce the issue? i'm an unable to reproduce it myself.

[jewilhel]

I'm setting up a simple app separate from my main project to see if I can reproduce the problems I'm having. The main project is getting to complicated to produce simple example code. I'll post code when I have something.

Thanks Alex!

[jewilhel]

I've created a sample project to demonstrate the issue I'm having with laying out a card that's been nested:

Sample Project

before the updates the card used to be centered in the screen. Please look at the Card in the Components folder.

the relevant code looks like this:

        // Creates a card wrapper with shadow
        let card = Node<UIView>(key: state.id) { (view, layout, size) in
            let componentSize = self.getSize()
            
            view.layer.shadowColor = UIColor.black.cgColor
            view.layer.shadowOpacity = 0.5
            view.layer.shadowOffset = CGSize.init(width: 2, height: 2)
            view.layer.shadowRadius = 2
            
            layout.width = componentSize.width
            layout.height = componentSize.width * CardSize.Proportion
            layout.position = .absolute  // This allows the card to be layered on top of the background
            layout.alignSelf = .center  // The card is not centering properly after the framework update
        }

I'm using layout.position = .absolute to create layered components.
the layout.alignSelf = .center is not working anymore. I can apply a top margin but this should be working.

[msafder]

I concur, my views now are getting stuck in the upper left hand corner instead of being centered. It's almost as if the Yoga formatting is being ignored if nested?

[alexdrone]

Thank you very much for the sample code!
So few observations:

• Children components should be added using the 'ComponentNode' function - that does more than just get the rendered node - especially if the component has a state - I will cover this in the new documentation!
• I think the issue might be related to poor yoga support of .absolute layouts. I will try to investigate this - for the time being the same effect can be created by having the card as subview of the background right?
  @msafder are you also using .absolute layouts?

[alexdrone]

Update: position .absolute seems to be working fine - will push the example soon in the repo.
@jewilhel I can fix the sample prj you provided by simply adding layout.justifyContent = .center in LayoutContainer.render

[jewilhel]

Ah, yes I see now. I was using layout.alignContent = .center instead of the correct layout.justifyContent = .center in my LayoutContainer Thanks for spotting the error.

[jewilhel]

As for your suggestion of using the ComponentNode function. I really wanted to do that, but in my larger project that I'm working on, I'm passing in a variety of component types into my card, not just the Feature and Titlebar components you saw in my example code. The problem is I have to explicitly define the ComponentViewType that will be used in the ComponentNode function, but In my case I don't know that until runtime. I was passing a pre-rendred node of type NodeType because I don't have to know anything about it up front.