Visibility is a property inside all Thunkable components. As expected, it will determine whether that component is visible or not.

This is useful when you want different components on one screen but only want some of them displaying at a time!

Copy this project from the following link as we will be referring to this project throughout this lesson.

https://x.thunkable.com/projectPage/5f0fb7a44dfb420ed1f20cc0

On our screen there are currently 3 labels and a switch. Currently, the app doesn’t do anything! We want one of the labels to disappear when the switch is activated. To do this, we will make one of the labels visibility property become False!

Navigate inside the blocks tab and find the block that detects when the switch changes.

The newValue variable will either be True or False based on the state of the switch. That means when the switch is on and to the right, it will be True. Similarly, when the switch is off and to the left it will be False.

We can use this to our advantage by simply setting the labels visibility to this newValue variable.

Set the LabelOn visibility to newValue, as we want this label to show when newValue is True.

Because we want LabelOff visibility to be false when the switch is on, set it to be the opposite of newValue with the Not block like below.

Now when the application is tested it will start with both labels showing, but as soon as the switch is changed it will only show 1 label based on the switch’s state.

Try it out for yourself!

Have a play around with turning the visibility off manually in the design tab and how this affects the application when it runs.

Once you are comfortable with using visibility, you can move on to the next lesson.