This section lists information about the Display property


This property defines how this component displays. It allows a container to be flexible or blocked according to the value defined. Display also provides a flexible context for all of its direct child elements.

In this property, there are two attributes:

When this value is set it allows the elements to be flexible.When this value is set, the elements won’t be shown on the screen, thus having their height and width 0.
  • The code below shows a display none example:
private fun screen() :Widget{
        return Container(
            children = listOf(
                createText(backgroundText = "#142850", text = "1"),
                  createText(backgroundText = "#dd7631", text = "2")
                      .setStyle {
                          display = Bind.value(Display.NONE)
                  createText(backgroundText = "#649d66", text = "3")
          ).setFlex {
              flexDirection = FlexDirection.ROW
              alignItems = AlignItems.CENTER
              justifyContent = JustifyContent.CENTER
              grow = 1.0
private func screen() -> Screen {
                navigationBar: NavigationBar(title: "Flex"),
                Container(children: [
                    createText(backgroundColor: "#142850",text: "1"),
                    createText(backgroundColor: "#dd7631",text: "2").applyFlex(
                    createText(backgroundColor: "#649d66",text: "3")
                    ],widgetProperties: WidgetProperties(
                        flex: Flex()

For more information about Display, check out the Yoga Layout documentation.