Custom Functions

Custom Functions allow you to add functions and hooks to screens in Draftbit. Each custom function is unique and available to a specific screen.

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 in the Actions tab of the Properties Panel by attaching it to any Button or Touchable.

Configuration

Type - Lifecycle Methods

Method

Description

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

Name

The name that will be referenced in code to call the function.

Description

A brief explanation of the function's purpose / what the function does.

Asynchronous Function

A toggle button to set if a function is asynchronous.

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 Layout Panel.
  • 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 Layout Panel.
  • 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 Layout Panel.
  • 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 Layout Panel.
  • 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 Layout Panel.
  • 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 Layout Panel.
  • 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 Layout Panel.
  • 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 Layout Panel.
  • 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 Layout Panel.
  • 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 Layout Panel.
  • 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 Layout Panel.
  • 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 Layout Panel.
  • 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 Layout Panel.
  • 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');
}

Did this page help you?