Draftbit is a low-code mobile app building platform that outputs production-grade React Native source code, using Expo’s SDK. Sometimes, a user might want to accomplish something with Draftbit that has not yet been productized by the Draftbit team. In those instances, the user would be able to build those features by utilizing Draftbit’s Custom Code feature. Custom Code is built of a custom component that allows you to use JSX code with your Draftbit app. At times, it utilizes an open-source package. You can also use any open-source package in this type of component.

In a nutshell, here what is covered in this post:

• Create a Custom Component in a Draftbit app (a Text component)
• Adding the open-source Package that supports the Custom Component (via Packages)

Set up a Custom Component in a Draftbit app

Draftbit app now supports adding a custom component. It is called the Custom Code component and allows to inject custom JSX.

• To enable using it in the Draftbit app, add it to a screen from the Layout tab, click the ‘+’ icon button to add a new component.
• Select the Custom Code component either by searching for it from the search bar or add it from the Blocks tab.
• In the Properties panel on the right side, add a reference to the actual custom component that we will create later.
• The syntax to create a reference is <CustomCode.MyComponent /> where MyComponent is the reference to your custom component.
• Notice that the usual tabs in the Properties panel, such as Styles, Configs, etc., are disabled because all of these properties can be set along with the component’s code when creating a custom component.

Let us first test out this new feature by displaying a text by writing JSX code.

• Now, click the Custom button in the top panel.
• It will open up a modal with the same, and it has three tabs:
• Functions: a feature that allows you to store functions on a screen-by-screen basis.
• Components: a feature that enables to write JSX and add custom code.
• Packages: a feature that allows adding third-party libraries.
• This guide is going to focus on the last two tabs.
• Open the Components tab and the code snippet shared below to display a text.

In the example below, we are creating a custom component with a name of SnapComponent. It uses StyleSheet references to add styles for each component. A StyleSheet is an abstraction similar to CSS StyleSheets.

import React from 'react';
import { StyleSheet, View, Text } from 'react-native';

export function SnapComponent() {
 return (
   <View style={styles.container}>
     <Text style={styles.text}>Camera Component</Text>
   </View>
 );
}

const styles = StyleSheet.create({
 container: {
   flex: 1,
   alignItems: 'center',
   justifyContent: 'center'
 },
 text: {
   fontSize: 18,
   color: '#010101'
 }
});

• After adding the code for the custom component, make sure to click Save.

From the above code snippet, you can observe its React Native component or how code in a React Native app looks.

Preview a Custom Component

Custom components are not supported by the Web Preview currently when building an app with Draftbit. You can view the result in the Preview tab.

Another way to preview a screen is to use Live Preview on an actual device by scanning the QR code using the Expo Go app, to test the features or functionalities building through custom code. Some external components like using a Camera requires hardware and can be tested only on a real device.

To scan the QR code, click on the Preview button from the top panel.

Here is how the app looks like using the Live Preview mode on an Android device.

Adding an open-source package

Using Custom Code, Draftbit supports adding additional packages that are open source libraries or utilities available by Expo and React Native. The Packages tab allows enabling a new package by adding the correct Package Name in the first input field and keep the Version of the package to latest.

For example, as shown below, we are adding the package expo-camera:

To add a new package, click the ‘+’ button and enter the package name and its version.

To remove a package at any given time, click the ‘-’ button at the end of the row where the package is listed.

Further Reading

• More Custom Code Snippets at Draftbit Knowledge Base.
• How to use Camera from Custom Code in a Draftbit app.
• How to implement Add to Favorite feature in Draftbit

💜 We at Draftbit love our Community and are always open for your questions, feedback and feature requests. You will also find more resources to learn and build with Draftbit.

Reach out to us on twitter/@draftbit for more questions.