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.