Custom Components

Custom Components allow you to inject JSX code into your Draftbit screens.

You can add a Custom Components File at the app-level for use on multiple screens, or you can simply add a single Custom Component to a specific screen.

Adding Custom Components Files

First, navigate to the Components tab in the Custom Code modal.

Then, paste in or enter your custom code. Be sure to click Save when finished.

You need to make sure that you:

  • Place any imports required by your component at the top of the file. Make sure you've added them as Custom Packages (besides "react" and react-native"). Note that the first import, import React from 'react' is required..
  • Export a reference so you can call this in your Custom Code Components. The syntax is <CustomCode.MyComponent /> where MyComponent is the exported reference to your Custom Code Component.

🚧

Custom Components do not support export default syntax at this time

In this example, we've added a Custom Component called SnapComponent. It uses StyleSheet references to add styles for each component. A StyleSheet is an abstraction similar to CSS StyleSheets.

Adding Custom Code Components To A Screen

First, navigate to Layout tab and click the '+' icon button to add a new component.

Select the Custom Code Component either by typing in the search bar or adding it from the Blocks tab.

In the Properties panel on the right side, you can then enter your custom JSX. If you've already created a reference in your Custom Code Component File, enter it here.

Here's how to add a Custom Code Component referencing our previously added SnapComponent example.

🚧

Note that you can't configure Custom Code Component in the Properties panel

These properties can be set in your Custom Code Components File in directly in the Custom Code Component JSX.

Previewing Custom Code Components

Custom Code Components do not work in web preview "single screen" mode. Click the "Preview" icon in the third tab above your screen or the "Preview" button in the top navigation to view using Expo Go on your device.

Custom Code Component Snippets

Explore code snippets you can add to Custom Code Components here.


Did this page help you?