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 code. In other words, the app will act as if the component doesn't exist.

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

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

Here is an example of the View component that wraps three Text components. Hiding the View component from the Components tree also hides the visibility of all three Text components.

❗️

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.

Did this page help you?