App Variables

App Variables are shared pieces of data that live at the app-level and can be set and used across your entire app. They are useful for storing data that is common to all users or different parts of your UI. App Variables can be set to any valid JSON and you can access App Variables from anywhere in your app.

Each time your App restarts, the App Variable will reset to the default value. That means you shouldn't store information that needs to persist across app launches - use a Device Variable instead.

For example, you might have a variable named error_message that you can set and access across all Screens in your app to display an error message in a Text component. Or use it to store the state of a Modal.

⚠️

Republish after updating default values

If you need to change the default value of an App Variable for a published app, you'll need to update the value in the Builder and then republish your app.

❗️

Don't set sensitive data as default values

Default values that you set for App Variables are stored in your app's source code. You should usually never store private data such as API keys as default values in App Variables.

Creating an App Variable

To create variables, open the Variables modal from the top menu.

Configuration

📘

What type of value can you store in an App Variable?

All JSON primitive value types can be stored inside an App Variable. Learn more here.

Updating an App Variable

Set Variable Action

To update the value of an app Variable, you will use the Set Variable Action from the Properties Panel > Interactions tab.

For example, in the app below, we have already defined an App Variable:

There is a Text component that displays the current value from the App Variable on an example app screen. It uses the key of the App Variable you defined in the previous step to map and display the value.

In scenarios where you want to display the value of a App Variable, you can select its name and map it to the Input Text variable.

To update the value, on the Button below the Text component, add a new action called Set Variable. This action will update the value of the App Variable to the value of the New Variable property.

In the current example, we're setting the value of the New Variable property to the App Variable key and then using the Increment transform function that will increase the current value App Variable.

Here is the final output:

In Custom Code

You can also work with App Variables in Files and Functions. Learn how in the Variables with Custom Code doc.