Conditional Display

All of Draftbit's available components have Conditional Display Data props that let you pass in a value that evaluates to true or false (boolean). You can use the Conditional Display feature to hide or show a component when a certain condition is met. When a component is hidden, that component and all of its child (nested) components will not be rendered on the Screen.

Combining this with Variables or data from an API Endpoint can be a useful way to show the component in certain conditions. If the condition evaluates to a truthy value, the component will be shown.

For example, you might have a List and want to have separate layouts for the rendered items based on a certain condition. In this case, you could create two different sets of components, and then conditionally display each parent component as needed. This could be using a value from the data associated with the List item, or a variable that you've set.