Kodeco Forums

Yoga Tutorial: Using a Cross-Platform Layout Engine

🎓 Courses & Articles
1

Learn about Yoga, Facebook's cross-platform layout engine that helps developers write more layout code in style akin to Flexbox

This is a companion discussion topic for the original entry at https://www.raywenderlich.com/530-yoga-tutorial-using-a-cross-platform-layout-engine
2

Great tutorial! As I was reading, I kept wondering how YogaKit handles scrolling when the content extends beyond the end of the device’s screen. I looked at the Facebook Yoga site and can’t find information there about scrolling behavior if any. Can you comment on what, if any, scroll behavior happens when the content extends too far to the right or off the bottom of the screen?

3

Good question. YogaKit handles laying out your subviews. To handle content that may extend beyond the bounds, you have to set the scroll view’s content size. Right now, I believe that YogaKit doesn’t automatically do this for you. The way I handled it in the sample app was by setting the content size after the layout was completed by YogaKit:

override func viewDidLayoutSubviews() {
  super.viewDidLayoutSubviews()
  // Calculate and set the content size for the scroll view
  var contentViewRect: CGRect = .zero
  for view in contentView.subviews {
    contentViewRect = contentViewRect.union(view.frame)
  }
  contentView.contentSize = contentViewRect.size
}

Let me know if that doesn’t answer your question.

4

Great! That’s perfect. Thank you!

5

Hi @cabernathy, I’ve developed a Swift interface for Yoga called FlexLayout (GitHub - layoutBox/FlexLayout: FlexLayout adds a nice Swift interface to the highly optimized facebook/yoga flexbox implementation. Concise, intuitive & chainable syntax.). It gently wraps the yoga flexbox implementation in a concise syntax, intuitive & chainable.

I’ve even re-implemented your nice Yoga tutorial using FlexLayout. You can see it here in the FlexLayout’s documentation (GitHub - layoutBox/FlexLayout: FlexLayout adds a nice Swift interface to the highly optimized facebook/yoga flexbox implementation. Concise, intuitive & chainable syntax.) and also you can have access to the full sample source code in the project’s Example app.

From my point of view, it makes the layout source code cleaner and easier to understand.
Thanks for your nice work :+1:

6

Nice work @lucdion. I like how the code layout reads.

7

Very cool tutorial. Thanks @lucdion! Interesting to use Flexbox for layout. I like it!
Any idea how to animate the layout properties? I tried changing a layout property (of let’s say a topBar) in an animation block on button click, tried setting the marginTop or height. But it didn’t work. I also tried calling view.layoutIfNeeded() after setting the new value, like you do when animating constraints. Also it didn’t animate.

8

@cabernathy Can you please help with this when you get a chance? Thank you - much appreciated! :]

9

Hi @benzai, could you open an issue in FlexLayout to ask your question.

But basically you need to do something like this:

 UIView.animate(withDuration: 0.5, animations: {
        // Change the width of one flex item
        self.myViewToAnimate.flex.width(100)
        // relayout the flex container
        self.relayoutFlexboxContainer()
})

override func layoutSubviews() {
        super.layoutSubviews()
        rootFlexContainer.pin.top().left().width(100%).marginTop(topLayoutGuide)
        relayoutFlexboxContainer() 
}
    
fileprivate func relayoutFlexboxContainer() {
     rootFlexContainer.flex.layout()
 }

Thanks!

10

Hi @lucdion thanks a lot for your tip. I will try it out soon. Haven’t tried FlexLayout yet because I wanted to learn the basics first, but will definitely try it soon. The chaining (I mean nesting) is something I miss in Swift, worked with React before.

11

This tutorial is more than six months old so questions are no longer supported at the moment for it. We will update it as soon as possible. Thank you! :]