Hidden Components

Hidden Components enable the ability to hide a component from the Components tree.

To hide a component, hover over the component in the Components tree to hide a component, and click on the eye 👁️ icon.

For example, when building complex UIs, it's common to hide components on a screen temporarily.

After hiding a component, the toggle to make the component visible again is available. Simply hover click to make the component visible.


What happens when you hide a component

Toggling to invisible will remove the component entirely from the code. In other words, the app will act as if the component doesn't exist.

Here is an example of a Fetch component that initially exists on the screen. After hiding it, the code generated for the screen does not contain the Fetch component.


Toggling a parent component's visibility will hide all children.


Hiding Custom Code components might result in red screens, so be careful!

When do you need to use Hidden Components

You may want to hide a component in the following scenarios:

  • You have a few different versions of a UI that you want to test individually.
  • You perceive a bug in your build, but you're not sure where exactly.
  • You have a "work in progress" part of your app that you don't want to expose to testers yet.