Global Variables

Global Variables in Draftbit apps are categorized into two different types of variables:

  • App Variables
  • Device Variables

App Variables

In the App Variables menu, you can save API tokens to be used for any REST Services & Endpoints that you add to your project. The value for any App Variable is a string.

Saving API authorization in this menu, as opposed to entering it directly inside of a Fetch component, makes your app more secure by preventing your API token(s) from being exposed in each screen's code.

Access the App Variables menu by clicking the 'Settings' button on the left-hand side of the Builder and clicking the 'Global Variables' tab.

App VariablesApp Variables

App Variables

However, each time your App is restarted, the App Variable will reset to the default value. If you need to change the default value of an App Variable, you must update the value in the builder and re-publish your App.

Device Variables

Device Variable is a special kind of App Variable that are permanently stored on your users' devices. For example, a user's auth token is usually stored as a Device Variable. Device Variables can only be strings. You can optionally set a default value for a Device Variable (if you do not, it will default to an empty string "").

You can access Device Variables anywhere in your app you use data as a Global Variable, and they can be changed with the GlobalVariableContext Custom Code API while your app is running.

However, unlike App Variables, a Device Variable will not reset to the default value the next time the app starts. Rather, it will be the same value it was when the app last closed. Unlike App Variables, re-publishing an app currently has no effect on Device Variables.

Device VariablesDevice Variables

Device Variables

Configuration

Parameter

Description

Key

The name of the variable to be referenced

Value

The actual value of the variable (eg: authorization token)

JSON Primitive Values

In a Global Variable, all JSON primitive types of values can be stored.

In JSON, values must be one of the following data types:

  • string
  • number
  • boolean
  • JSON object
  • array

GlobalVariableContext API

Regardless of the type of Global Variable, you have defined in your app, you can use them with other advanced functionalities: Custom Components and Functions.

By accessing a Global Variable, you can do the following:

  • read the value of the Global Variable in Custom Code
  • modify/update the value of the Global Variable

Access in Custom Components

To access a Global Variable in Custom Component, the initial step is to import the GlobalVariableContext to access the module. You cannot use the GlobalVariableContext API without importing it.

import * as GlobalVariableContext from './config/GlobalVariableContext';

Inside a component, you will have to initialize two new variables for GlobalVariableContext.useValues() and GlobalVariableContext.useSetValue().

export function CustomComponent(){
    const variables = GlobalVariableContext.useValues();
    const setVariable = GlobalVariableContext.useSetValue();

// ...
}

useValues

useValues is a function that returns an object containing current values of App Variables and Device Variables in your App.

import React from "react";
import { Text } from "react-native";

import * as GlobalVariableContext from "./config/GlobalVariableContext";

export const MyVariableDisplay = () => {
  const variables = GlobalVariableContext.useValues();
  
  return <Text> { variables.myGlobal } </Text>
};

useSetValue

useSetValue is a function that returns a setter function that, when called with an object containing key and value fields, will set an App Variable or a Device Variable with the specified key to the specified value.

import React from "react";
import { Button } from "react-native";

import * as GlobalVariableContext from "./config/GlobalVariableContext";

export const MyVariableSetter = () => {
  const setGlobalVariable = GlobalVariableContext.useSetValue();
  const myNewValue = { key: "mySettableGlobal", value: "new value" };
  
  return (
    <Button
      onPress={() => setGlobalVariable(myNewValue)} 
      title="Update a Variable"
    />
  );
};

You can also check out the tutorial below on how to use GlobalVariableContext API

Access in Custom Functions

You can access Global Variables inside a Custom Function by following the steps below:

Step 1 - Export the GlobalVariableContext API from a Custom Component

import React from 'react';

export {useValues, useSetValue} from './config/GlobalVariableContext';

Step 2 - Add a new Custom Function. Select the Custom Type to Custom Hook, select the Name to Inline code and add the following snippet:

// to use a global variable
const variables = CustomCode.useValues();

// to update or modify the value of a global variable
const setVariable = CustomCode.useSetValue();

Step 3 - Then inside your own Custom Function you can use the value or update the value:

// refer a Global Variable
variables.TOKEN

// update a Global Variable's vale
setVariable({ key: 'TOKEN', value: token });

Did this page help you?