Functions

Custom Functions allow you to add functions and hooks to screens in Draftbit.

Global and Screen

There are two types of Custom Functions - Global and Screen.

With Global functions you can create functions that are available to all screens in your app.

Screen functions allow you to create functions and hooks that can be used in the screen on which they were created.

How to create a custom function

To access this feature, click Custom in the top menu bar (the curly braces icon).

The modal above shows a list of Custom Functions for a screen. Click on the 'Add' button to create a new Function. Each custom Function has a required name field and an optional description field.

After you've saved a function, you can access it via Run a Custom Function in Properties Panel > Action by attaching it on any Button or Touchable.

Configuration

Setting	Description
Type	Custom Function - This is just a plain function Custom Hook - This is a React Native Hook
Name	For Custom Functions, the name that will be referenced in code to call the function. For Custom Hooks, choose between: - mountEffect - An effect hook invoked immediately after the component has mounted (similar to a React class’s `componentDidMount` lifecycle function) - useEffect - Invoked immediately after the component has been updated (similar to a React class’s `componentDidUpdate` lifecycle function) - customInlineHook - JavaScript function whose name starts with ”use” and that may call other Hooks
Description	A brief explanation of the function's purpose / what the function does.
Parameters	Parameters are variables assigned to values you pass into your function when they are used. The variables are available in your function's code.
Return Type	The return type helps Draftbit know what data type to expect when your function returns a value
Custom File Imports	If you have Custom Files and want to make them available to your Custom Functions, you can select them here
Is Asynchronous Function	Enable this if you need to `await` a response inside your function
Read App Variables	Enable this if your function needs to read App or Device Variables. They will be available to you via the `Variables` variable and used like `Variables.username`
Set App Variables	Enable this if your function needs to set App or Device Variables. They will be available to you via the `setGlobalVariableValue` variable and used like `setGlobalVariableValue({ key: 'myVar', value: 'new value' })`

Set and read variables from within Functions

Reading and updating variables from within the function have got more straightforward now.

By enabling the toggle for Does function read app variables? , the variables get accessible to be read within the function just by writing the variable name as it is.

Enabling Does function read app variables?

Updating a variable using the setter

the setter method gets available to update the variables, by enabling the Does function set app variables? toggle.

Update the userName variable to the new value using the setter.

Notice that our variable is userName, but our setter is setUserName.

The setter for Screen Variables is always prefixed with set (lowercase s), and the first word of the variable becomes uppercase (the u in our example).

Adding Available Expo SDK Packages

This section provides a usable example for each of the Expo packages we've made available by default for use in Custom Functions.

expo-clipboard

To use expo-clipboard in the app, create a new custom function by following the steps:

Click the 'Add' button in the Custom Code modal.
In the Add Function modal, enter the Name of the function.
Enter the Description of the function (optional).
Select the Expo Clipboard package from the Available Packages list.
Enter the code for the function in the editor and then click Save.
Select the component (such as a Button or Touchable) on the screen from Components tree.
To trigger this function, go to Interactions Tab in the Properties Panel, click the '+' button next to Action, and select the Custom Function.
Then, provide a value to the Custom Function by selecting the Name of the function from the drop-down menu.

Code snippet used in the above example:

Clipboard.setString('Some Input');

RN Alert

To use Alert dialog-box in the app, create a new custom function by following the steps:

Click the 'Add' button in the Custom Code modal.
In the Add Function modal, enter the Name of the function.
Enter the Description of the function (optional).
Select the RN Alert package from the Available Packages list.
Enter the code for the function in the editor and then click Save.
Select the component (such as a Button or Touchable) on the screen from the Components tree.
To trigger this function, go to Interactions Tab in the Properties Panel, click the '+' button next to Action, and select the Custom Function.
Then, provide a value to the Custom Function by selecting the Name of the function from the drop-down menu.

Code snippet used in the above example:

Alert.alert(
  "Alert",
  "Press OK or Cancel.",
  [
    {
      text: "Cancel",
      onPress: () => console.log("Cancel Pressed"),
      style: "cancel",
    },
    {
      text: "OK",
      onPress: () => console.log("OK Pressed"),
    },
  ],
  { cancelable: false }
);

expo-camera

To configure Camera Permissions in the app, create a new custom function that enables a prompt when tapped by following the steps:

Click the 'Add' button in the Custom Code modal.
In the Add Function modal, enter the Name of the function.
Enter the Description of the function (optional).
Asking for permission is an asynchronous process. Enable the asynchronous function option.
Select the Expo Camera package from the Available Packages list.
Enter the code for the function in the editor and then click Save.
Select the component (such as a Button or Touchable) on the screen from the Components tree.
To trigger this function, go to Interactions Tab in the Properties Panel, click the '+' button next to Action, and select the Custom Function.
Then, provide a value to the Custom Function by selecting the Name of the function from the drop-down menu.

Code snippet used in the above example:

await Camera.requestPermissionsAsync();

expo-constants

Expo Constants is a package that provides the system's information. In a mobile app, the system is the device on which the app is running. To use it, let's create a new custom function that enables a prompt when tapped by following the steps and show the device's name. The device's name here is just one of the properties available on Constants.

Click the 'Add' button in the Custom Code modal.
In the Add Function modal, enter the Name of the function.
Enter the Description of the function (optional).
Select the Expo Constants and RN Alert from the Available Packages list.
Enter the code for the function in the editor and then click Save.
Select the component (such as a Button or Touchable) on the screen from the Components tree.
To trigger this function, go to Interactions Tab in the Properties Panel, click the '+' button next to Action, and select the Custom Function.
Then, provide a value to the Custom Function by selecting the Name of the function from the drop-down menu.

Code snippet used in the above example:

const deviceName = Constants.deviceName;

Alert.alert(
  "Your Device Name is:",
  deviceName.toString(),
  [    
    {
      text: "OK",
      onPress: () => console.log("OK Pressed"),
    },
  ],
  { cancelable: false }
);

RN Vibrate

React Native has a Vibration module to handle the functionality on a device. In the following example, let's create two custom functions. The first function will start a vibration pattern at an interval of one second in between, in form of a loop. The second function will allow the pattern to stop.

Click the 'Add' button in the Custom Code modal.
In the Add Function modal, enter the Name of the first function.
Enter the Description of the function (optional).
Select the RN Vibrate package from the Available Packages list.
Enter the code for the function in the editor and then click Save.
Repeat the steps to create a second custom function.
Select the component (such as a Button or Touchable) on the screen from the Components tree.
To trigger the first custom function, go to Interactions Tab in the Properties Panel, click the '+' button next to Action, and select the Custom Function.
Then, provide a value to the Custom Function by selecting the Name of the function from the drop-down menu.
Repeat the steps to add the second Custom Function on another touchable component.

Code snippet used in the above example:

// create first function to start vibration
const PATTERN = [1000, 1000, 1000];

Vibration.vibrate(PATTERN, true);

// create second function: to stop vibration
Vibration.cancel();

📘
Android apps require the android.permission.VIBRATE permission to be enabled explicitly. You can enable this permission by:

Go to Settings tab in the left menubar. It opens up the Project Settings modal.

In the Advanced Settings menu, go to ANDROID > Permissions and check the box Vibrate.

RN Dimensions

Using React Native Dimensions, you can get the application window's width and height. In the example below, the dimensions of the application's window are displayed in an Alert box.

Click the 'Add' button in the Custom Code modal.
In the Add Function modal, enter the Name of the function.
Enter the Description of the function (optional).
Select the RN Dimensions and RN Alert from the Available Packages list.
Enter the code for the function in the editor and then click Save.
Select the component (such as a Button or Touchable) on the screen from the Components tree.
To trigger this function, go to Interactions Tab in the Properties Panel, click the '+' button next to Action, and select the Custom Function.
Then, provide a value to the Custom Function by selecting the Name of the function from the drop-down menu.

Code snippet used in the above example:

const window = Dimensions.get('window');

Alert.alert(
  "Device's dimensions:",
  `Height: ${window.height}, Width: ${window.width}`,
  [    
    {
      text: "OK",
      onPress: () => console.log("OK Pressed"),
    },
  ],
  { cancelable: false }
);

expo-image-picker

The expo-image-picker module is used to select an image or a video from the device using its UI. In the example below, let's create two custom functions, first to ask for permission to access the media library on a device, and second to pick the image. The permission is asked before the screen renders where the functionality to select an image is available. Let's use the useEffect hook to ask permission to access the media library as soon as the app opens, or the screen component is rendered for the first time.

Click the 'Add' button in the Custom Code modal.
In the Add Function modal, enter the Name of the function.
Enter the Description of the function (optional).
Asking for permission is an asynchronous process. Enable the asynchronous function option.
Select the Expo Image Picker and RN Alert from the Available Packages list.
Enter the code for the function in the editor and then click Save.
Click the 'Add' button in the modal to create an useEffect hook. It will be responsible for triggering the Custom function.
Enter the custom function code in the editor for useEffect hook and then click Save.

Code snippet used in the above example:

// first, custom function
const { status } = await ImagePicker.requestMediaLibraryPermissionsAsync();

if (status !== "granted") {
  Alert.alert(
    "Permission Denied",
    `You denied the permissions.`,
    [
      {
        text: "OK",
        onPress: () => console.log("OK Pressed"),
      },
    ],
    { cancelable: false }
  );
}

// second, create a useEffect hook
pickerPermissions();

Create a custom function to pick the image from the media library.

Click the 'Add' button in the Custom Code modal.
In the Add Function modal, enter the Name of the function.
Enter the Description of the function (optional).
Enable the asynchronous function option.
Select the Expo Image Picker and RN Alert from the Available Packages list.
Enter the code for the function in the editor and then click Save.
Select the component (such as a Button or Touchable) on the screen from the Components tree.
To trigger this function, go to Interactions Tab in the Properties Panel, click the '+' button next to Action, and select the Custom Function.
Then, provide a value to the Custom Function by selecting the Name of the function from the drop-down menu.

Code snippet used in the above example:

let result = await ImagePicker.launchImageLibraryAsync({
      mediaTypes: ImagePicker.MediaTypeOptions.All,
      allowsEditing: true,
      aspect: [4, 3],
      quality: 1,
});

if(!result.cancelled) {
  Alert.alert(
  "Image picked",
  `URI: ${result.uri}`,
  [    
    {
      text: "OK",
      onPress: () => console.log("OK Pressed"),
    },
  ],
  { cancelable: false }
    );
}

expo-permissions

To use expo-permissions, you will have to create a custom function by following the steps:

Click the 'Add' button in the Custom Code modal.
In the Add Function modal, enter the Name of the function.
Enter the Description of the function (optional).
Asking for permission is an asynchronous process. Enable the asynchronous function option.
Select the Expo Permissions from the Available Packages list.
Enter the code for the function in the editor and then click Save.
Click the 'Add' button in the modal to create an useEffect hook. It will be responsible for triggering the Custom function.
Enter the name of the custom function in the editor for useEffect hook and then click Save.

Code snippet used in the above example:

// first create a custom function & name it "enablePermission"
await Permissions.askAsync(Permissions.LOCATION);

// second, create a useEffect hook
enablePermission();

RN Platform

Platform is a package from React Native that provides a module to detect the platform (iOS or Android) in which the app is running.

To use Platform, you will have to create a custom function by following the steps:

Click the 'Add' button in the Custom Code modal.
In the Add Function modal, enter the Name of the function.
Enter the Description of the function (optional).
Select the RN Platform and RN Alert from the Available Packages list.
Enter the code for the function in the editor and then click Save.
Select the component (such as a Button or Touchable) on the screen from the Components tree.
To trigger this function, go to Interactions Tab in the Properties Panel, click the '+' button next to Action, and select the Custom Function.
Then, provide a value to the Custom Function by selecting the Name of the function from the drop-down menu.

Code snippet used in the above example:

const OSName = Platform.OS === 'ios' ? 'iOS' : 'android';

Alert.alert(
  "The OS Name is:",
  OSName.toString(),
  [    
    {
      text: "OK",
      onPress: () => console.log("OK Pressed"),
    },
  ],
  { cancelable: false }
);

RN Keyboard

Keyboard is a package from React Native that provides methods to control keyboard events.

To use Keyboard, you will have to create a custom function by following the steps:

Click the 'Add' button in the Custom Code modal.
In the Add Function modal, enter the Name of the function.
Enter the Description of the function (optional).
Enter the code for the function in the editor and then click Save.
Click the 'Add' button in the modal to create an useEffect hook. It will be responsible for triggering the Custom Function.
Select the RN Keyboard from the Available Packages list.
Enter the name of custom function in the editor for useEffect hook and then click Save.

The above example triggers an alert dialog box when the TextInput field is touched or clicked. Code snippet used in the above example:

// first create a custom function
alert("Keyboard Shown");

// second, create a useEffect hook
Keyboard.addListener("keyboardDidShow", keyboardDidShow);

// cleanup function
return () => {
      Keyboard.removeListener("keyboardDidShow", keyboardDidShow);
      
};

expo-sharing

The expo-sharing is a package that allows sharing files directly with other compatible applications.

Let's create an example where using Expo Image Picker and Expo Sharing. In the example below, create two custom functions to:

ask permission to access a device's media library.
create a useEffect hook function to trigger the alert dialog box for asking permission.
create a custom function to select the image from the media library and then enable sharing it using expo-sharing.

Create a custom function and hooks to ask for media library permission using expo-image-picker.

Click the 'Add' button in the Custom Code modal.
In the Add Function modal, enter the Name of the function.
Enter the Description of the function (optional).
Enable the asynchronous function option.
Select the Expo Image Picker and RN Alert from the Available Packages list.
Enter the code for the function in the editor and then click Save.
Click the 'Add' button in the modal to create an useEffect hook. It will be responsible for triggering the Custom Function.
Enter the name of the custom function in the editor for useEffect hook and then click Save.

Create another custom function to select an image from the media library and open an action sheet to share the file.

Click the 'Add' button in the Custom Code modal.
In the Add Function modal, enter the Name of the function.
Enter the Description of the function (optional).
Enable the asynchronous function option.
Select the Expo Image Picker and Expo Sharing from the Available Packages list.
Enter the code for the function in the editor and then click Save.
Select the component (such as a Button or Touchable) on the screen from the Components tree.
To trigger this function, go to Interactions Tab in the Properties Panel, click the '+' button next to Action, and select the Custom Function.
Then, provide a value to the Custom Function by selecting the Name of the function from the drop-down menu.

Code snippet used in the above example:

// first custom function & name it "pickerPermissions"
const {status} = await ImagePicker.requestMediaLibraryPermissionsAsync();

if (status !== 'granted') {
Alert.alert(
           "Permission Denied",
  `You denied the permissions.`,
  [    
    {
      text: "OK",
      onPress: () => console.log("OK Pressed"),
    },
  ],
  { cancelable: false }
);
}

// create a useEffect hook to trigger first custom function
pickerPermissions();

// second custom function
let result = await ImagePicker.launchImageLibraryAsync({
      mediaTypes: ImagePicker.MediaTypeOptions.All,
      allowsEditing: true,
      aspect: [4, 3],
      quality: 1,
});

if(!result.cancelled) {
  Sharing.shareAsync(result.uri);
}

RN Appearance

Appearance is a package that exposes information about the user's appearance preferences, such as their preferred color scheme (light or dark).

To use Appearance, you will have to create a custom function by following the steps:

Click the 'Add' button in the Custom Code modal.
In the Add Function modal, enter the Name of the function.
Enter the Description of the function (optional).
Select the RN Appearance from the Available Packages list.
Enter the code for the function in the editor and then click Save.
Select the component (such as a Button or Touchable) on the screen from the Components tree.
To trigger this function, go to Interactions Tab in the Properties Panel, click the '+' button next to Action, and select the Custom Function.
Then, provide a value to the Custom Function by selecting the Name of the function from the drop-down menu.

Code snippet used in the above example:

alert(`Current ColorScheme ${Appearance.getColorScheme().toString()}`)

Async Storage

AsyncStorage is a package that provides an asynchronous, unencrypted, persistent, key-value storage solution. To use it, you will have to create the following custom function:

Click the 'Add' button in the Custom Code modal.
In the Add Function modal, enter the Name of the function.
Enter the Description of the function (optional).
Select the AsyncStorage from the Available Packages list.
Enter the code for the function in the editor and then click Save.
Select the component (such as a Button or Touchable) on the screen from the Components tree.
To trigger this function, go to Interactions Tab in the Properties Panel, click the '+' button next to Action, and select the Custom Function.
Then, provide a value to the Custom Function by selecting the Name of the function from the drop-down menu.

Code snippet used in the above example:

try {
  const data = 'Some Value'
  const value = JSON.stringify(data);
  await AsyncStorage.setItem('@MyDraftbitApp', value)
} catch (e){
  alert(`${e}`)
}

expo-sensors

The expo-sensors provides various APIs for accessing device sensors to measure motion, orientation, pressure, magnetic fields, and step count. The APIs is available using the following sensors:

Accelerometer
Barometer
Gyroscope
Magnetometer
Pedometer

To use Pedometer, create a custom function by following the steps:

Click the 'Add' button in the Custom Code modal.
In the Add Function modal, enter the Name of the function.
Enter the Description of the function (optional).
Select the Expo Sensors package from the Available Packages list.
Enter the code for the function in the editor and then click Save.
Select the component (such as a Button or Touchable) on the screen from the Components tree.
To trigger this function, go to Interactions Tab in the Properties Panel, click the '+' button next to Action, and select the Custom Function.
Then, provide a value to the Custom Function by selecting the Name of the function from the drop-down menu.

Code snippet used in the above example:

Sensors.Pedometer.watchStepCount(result => {
  alert(result.steps);
});

expo-sms

expo-sms is a package that provides access to the system's UI/app for sending SMS messages.

To use expo-sms, create a custom function by following the steps:

Click the 'Add' button in the Custom Code modal.
In the Add Function modal, enter the Name of the function.
Enter the Description of the function (optional).
Toggle on the 'Is function asynchronous' option.
Select the Expo SMS package from the Available Packages list.
Enter the code for the function in the editor and then click Save.
Select the component (such as a Button or Touchable) on the screen from the Components tree.
To trigger this function, go to Interactions Tab in the Properties Panel, click the '+' button next to Action, and select the Custom Function.
Then, provide a value to the Custom Function by selecting the Name of the function from the drop-down menu.

Code snippet used in the above example:

const isAvailable = await SMS.isAvailableAsync();
if (isAvailable) {
  await SMS.sendSMSAsync(inputPhone, inputMsg);
} else {
  alert('Message service not available on this device');
}