A screen variable lets you hold information that changes over time. Each screen variable defined is unique to a Draftbit screen. The scope of a screen variable defined remains consistent with that screen and not the whole application.

It's helpful to use a Screen Variable in scenarios where only want to declare and use a variable with a component on a specific screen and do not want to declare app-wide variables.

For example, you may want to display error messages that are coming from the auth API service in your form screens. Using a screen variable for this purpose is a good use case since the error messages are local to the screen.

Defining a screen variable

You can add a screen variable by following the steps below:

• Open the Variables modal from the top panel.
• Under the Screen Variables > Variable section, click Add Variable.
• Under Configuration, add the name of the variable.
• Selecting the type of the variable is optional. Look here to learn more about the available types.
• To define an initial value for your screen variable, select the screen variable under Variable section and then under Configuration add the Initial Value.

Available Types on a screen variable

A screen variable has a type. You can define the type of a screen variable based on the data it holds as the value. The default type of a screen variable is String.

You do not have to define a data type. This is optional. In most cases, Draftbit will handle assigning a type based on the initial value of the Screen Variable.

For example, if the value of the screen variable is a string, you can add a String type.

Removing a screen variable

To remove a screen variable:

• Open the Variables modal from the top panel.
• Go to Screen Variables and select the variable you want to delete under Variables.
• Under Configuration > Delete, click the button Delete Variable to remove it.

Using a screen variable

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 Config 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.

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)

Example Tutorial

Custom Components

That's not all - you can use them in your Custom Components as well. Just pass them in as props in your Custom Code JSX. For instance, given a Screen variable named email:

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

And using it on a Screen with the Custom Code component...

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

When to use

App, Device variables and Screen variables are quite similar in that they can be initialized to some value and updated with new values. There are a few advantages to Screen Variables over App and Devices Variables however:

• Your variable is only visible to the screen that uses it, which prevents you from inadvertently updating it elsewhere, and keeps your data well organized.
• You can initialize Screen Variables to any data available to the screen, whereas App and Device Variables can only be initialized to static JSON.
• You can store any object in a screen variable, such as Dates, Objects and functions. In App and Device variables, only JSON-serializable data can be stored.

When not to use

Screen variables are local to a screen and not to the whole application. Once manipulated, their value is also not stored in your device's storage (AsyncStorage).

❗️

To use app-wide variables, please check App Variables and Device Variables for their use cases.