Skip to main content
Version: 7.2.1

FlexLayout

FlexLayout is a view group which has the same behavior with Flexbox on CSS, but for native iOS and Android apps with a fully native implementation.

Its purpose is to provide an easy way to scale, align and distribute space among items in a container, even when their size is unknown and/or dynamic.

FlexLayout has the ability to alter the width/height of its items to fill the available space.

Smartface Native Framework uses Yoga library to implement FlexBox on native applications.

When to use FlexLayout

When you need to distribute space among items in a container, but the size of the items is unknown and/or dynamic.

When you need to scale and align items in a container, but the size of the items is unknown and/or dynamic.

When you create a new reuseable component which needs to be scaled and aligned.

Reusable Components

We recommend using the FlexLayout wrapper for the reusable components due to its flexibility in page layout.

ShimmerFlexLayout

We have a ShimmerFlexLayout component which can be used to show shimmer effect on the items in a FlexLayout.

It's basically a FlexLayout component with a shimmer effect.

Main difference between ShimmerFlexLayout and FlexLayout is that ShimmerFlexLayout is a wrapper component for the FlexLayout component.

ShimmerFlexLayout

Useful Resources

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout

https://flexboxfroggy.com

https://css-tricks.com/snippets/css/a-guide-to-flexbox/