Packages

You can add compatible NPM packages to your app project to extend functionality and features.

⚠️

React Native & Expo

Imported libraries must be compatible with React Native and the Expo managed workflow

⚠️

Cocoapods

Packages which require running pod install for iOS installation are not currently supported. Look for packages without this requirement

⚠️

Linking

Packages which require linking are not currently supported. Look for packages which have auto-linking

Finding compatible packages

A great place to start is Expo's packages since Draftbit apps are built using the Expo toolset for React Native. In fact, there's already several of these built-in that you can enable in your Functions.

You can find several compatible libraries in the React Native directory as well. Make sure they also meet the above requirements.

If you want to import libraries from the npm registry, please follow Expo's tips for determining compatibility.

Adding a package

First, navigate to the Packages tab in the Custom Code modal and click the + icon to add a new package.

❗️

Avoid using the latest version of a package.

Since using the latest version of a package can cause your app to break unexpectedly when Draftbit or the package is updated, avoid using latest as the version. Instead enter a specific version number (e.g. 3.33) with or without npm ~, ^, or >= syntax.

Check below for a list of common packages and their compatible version.

To remove a package, click the '-' button at the end of the row where the package is listed.

Package Import Example

As an example of how you might use an imported package in your app, we'll demonstrate importing a package that lets us encode some text into a base64 string.

Import the package

Add version 2.1.1 of react-native-quick-base64 to your app's package imports.

You can read more about this package here: https://github.com/craftzdog/react-native-quick-base64

Save and close

Export the needed modules

Since we want to use the package's functionality in a Custom Function we'll export the modules we need from a Custom File. Let's name the file Base64 and in our case we want to expose the methods for encoding and decoding.

export { btoa, atob } from 'react-native-quick-base64';

Save and close

📘

For info on using a package for JSX components, see the JSX docs.

Use the modules in a Custom Function

Now that we've made our encode/decode logic available in a Custom File, we can import that package into a Custom Function and use it. Let's create a new Global Function and name it base64Encode

We'll create a new Parameter which will be the value we pass to this function that we want to encode, and we'll add the file we created previously in the Custom File Imports section which will add the import above the function.

Since the name of our Custom File is Base64that is the name used when importing the file. So we can then access our exported methods from the file.

return Base64.btoa(value)

Base64 being the name of our import and btoa being one of the exported modules in the file.

Save and close

Use the Custom Function in your app

We are now able to use our Custom Function to encode a text to base64. We can use them in a Transform Function or in an Action flow, for example.

Here it's being used as a transform in a Text component

📘

If you need to expose modules from a package to Custom Functions, then you can export them from a Custom File which can then be used from a Custom Function. For instance, you can have a single Libsfile for all your exports.

If you are using a package that provides a JSX component, for instance, then you can instead import the package at the top of your Custom File and then export a component for use with a Custom Code component.

Expo SDK Packages

The following are common packages in the Expo SDK that are not yet part of the Draftbit platform. We've made these available by default for use in Custom Functions.

Examples for how to add these to your Draftbit app in custom code are here.

Recommended Package Versions

Some packages have specific versions which should be used. Below you'll find a list of some of those packages and the recommended version to use.