Variables with Custom Code

There might be an use case where you want to use an App Variable or a Device Variable with Custom Code.

All App and Device variables are shared via a GlobalVariablesContext. If you have defined a variable of either type, you can access them in your Custom Code through the shared context.

Access in Custom Components

By accessing an App or a Device Variable in Custom Component, you can do the following:

  • read the value of the variable
  • modify/update the value of the variable

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

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

Reading a value with useValues

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

Here is an example snippet on how you can read the value of an App or a Device Variable:

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>
};

Updating a value of with 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 MyComponent = () => {
  const setGlobalVariable = GlobalVariableContext.useSetValue();

// RANDOM_VARIABLE is defined as an App Variable

  return (
    <Button
      onPress={() => setGlobalVariable({ key: 'RANDOM_VARIABLE', value: 'new value' })}
      title="Update a Variable"
    />
  );
};

Access in Custom Functions

To read the value of an App or a Device Variable in Custom Function, you can do the following:

  • Inside your Custom Function use the syntax Constants.variable where variable is the name of your App or Device variable.
function myFunctionName() {
  return Constants.appVar;
}

Use Constants in a custom function like above will automatically add it inside the screen component. Here is an example:

600600

To update or modify a value of an App or a Device variable use Set Variable action type from the Interactions tab (last tab) in the Properties Panel.


Did this page help you?