Overview

Introduction

Beagle will use a dependency called Yoga Layout to position components on your application screen. To do this, Yoga calculates the position the elements are, and after that, it does its rendering.

About Yoga Layout

Yoga is framework developed by Facebook to position views using the Flexbox concept in Android and iOS applications.

Flexbox is a CSS concept that organizes elements in containers dynamically so that, regardless of your application dimensions, you can maintain a flexible layout.

Here follows some key concepts about Flexbox:

• Main Axis
• Cross Axis
• Main Size

For Main Size, it is possible to set 3 types of dimensions:

1. Cross Size: The size of a cross axis.
2. Main Start and Main The Start and End point in a main axis.
3. Cross Start and Cross End: Start and end in a cross axis.

‌These axis values will depend on what is defined at the Flex-direction property.

If it is defined as:

• row ou row-reverse: The main axis will be horizontal and the cross axis will be vertical.

• column ou column-reverse: The main axis will be vertical and the cross axis will be horizontal.

Properties

You can use the following properties that Yoga Layout uses to insert, alter or delete screen’s components.

UnitValue

The Basis, Size, Margin, Padding and Position attributes described above receive a UnitValue that expects a Double value and a UnitType, which is an enum with the following options:

For the attributes listed below, on the Web, the default isUnitType.AUTO.

The UnitType.AUTO can be used on iOS, Android and Web fronts according to the table below:

Attributes	iOS	Android	Web
Basis	✔	✔	✔
Size			✔
Margin			✔
Padding			✔
Position			✔

Feedback

Was this page helpful?

Glad to hear it! Please tell us how we can improve.

Sorry to hear that. Please tell us how we can improve.