Screen Variables

A Screen Variable holds data like App Variables and Device Variables, however each Screen Variable is scoped to the Screen on which it was created and can only be directly used on that Screen. They can be set to any valid JSON.

Like App Variables, Screen Variables will reset to their default value when your app is closed in addition to when the Screen is removed from the navigation stack.

For example, if you have a Screen which contains a form composed of Text Input components, you would assign each input its own Screen Variable. Then you could pass those variables into an API Request Action.

⚠️

Republish after updating default values

If you need to change the default value of an Screen 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 Screen Variables are stored in your app's source code and bundle making it possible for bad actors to access and abuse the data. You should usually never store private data such as API keys as default values in Screen Variables.

Creating a Screen Variable

To create variables, open the Variables modal from the left menu bar of the Builder.

Configuration

📘

What type of value can you store in a Screen Variable?

All JSON primitive value types can be stored inside a Screen Variable. Learn more here.

Using a Screen Variable

Set Variable Action

To update the value of an Screen Variable, you will use the Set Variable Action from a Trigger in the Interactions tab from the right panel of the Builder.

In Components

You can use a screen variable to assign a value to the variable on of the Data-Enabled Components.

• Once you've defined a screen variable, select the component in the Components tree you want to use it with.
• Next, go to the Component's Data tab (third tab) in the Properties panel.
• Define a custom variable name under Input Text in curly braces {{}} (this may vary depending on the component).
• Find Variables property. Assign the screen variable you want to assign from the dropdown to custom variable name defined in previous step in curly braces.

In Custom Functions

You can also use Screen variables in Screen Functions . When you create a Screen variable, behind the scenes we setup React’s useState(). So if you have a variable named myVar, the following screen code is generated which you can use to get and set your Screen variable:

const [myVar, setMyVar] = React.useState('');

Getting the value is simple, you just reference the variable directly. So in the case above, you’d simply use:

myVar

And, to set the value is just as easy, using the variable’s set method like this:

setMyVar(YOUR_NEW_VALUE)

For more info on using Screen Variables in Custom Code read the docs on Variables with Custom Code

In Custom Files

That's not all - you can use them in your Files as well. Just pass them in as props in your JSX. For instance, given a File named 'MyFile' that exports a component named MyComponent:

export const MyComponent = ({variable, setVariable}) => {
    if (variable === value) {
        setVariable(new_value);
    }
    return (<Text>{variable}</Text>);
}

And a Screen Variable named email, we can pass it into our component on a Screen with the Custom Code component:

<MyFile.MyComponent variable={email} setVariable={setEmail} />

For more info on using Screen Variables in Custom Code read the docs on Variables with Custom Code