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 CustomList. It uses StyleSheet references to add styles for each component. A StyleSheet is an abstraction similar to CSS StyleSheets.

Adding Custom Components To A Screen

From the Components tree, 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.

Passing Variables in Custom Components

Custom Components are plain React Native components that are written using JSX. If you receive data in your Draftbit app from an API service, you can pass one or more fields using the React's prop pattern.

When defining the Custom Component on an app screen, define the prop as shown below:

And then use the value of the prop inside the Custom Component:

export const MyCustomComponent = ({name}) => {
  // ...rest of the component's code
}

Note: In the example above, the name prop is an arbitrary value. Replace it with your props. You can pass multiple props as well, given that a unique name identifies each prop.

Passing Data from a List to a Custom Component

There may be scenarios in which you will want to nest a Custom Component inside a List component. For example, take a look at the Components structure below:

For this particular scenario, defining the Custom Component on an app screen you will have to include a field name or the key from your data object along with a prefix listData.

In the example below, the Custom Component MyComponent is receiving a prop that includes the image URL of an item in the list:

And then use the value of the prop inside the Custom Component:

export const MyComponent = ({uri}) => {
  // ...rest of the component's code
}

Using Navigation in Custom Components

Draftbit uses the react-navigation library under the hood to let you implement different navigation patterns such as Stack and Tab. You can pass the navigation prop from the library to a Custom Component when defining it in a screen.

Then, inside your Custom Component add the navigation prop to the function component:

export const MyCustomComponent = ({navigation}) {
  // ...
}

Then on a Button or a Touchable component from React Native, you can pass navigation.navigate() method as the value of onPress prop on the button component to navigate to another screen with the name of the screen as the its argument:

<TouchableOpacity onPress={() => navigation.navigate('SomeScreenNameScreen')}>
      <Text style={styles.text}>Go to SomeScreenName</Text>
</TouchableOpacity>

🚧

The suffix Screen at the end of SomeScreenNameScreen is required because any screen inside Draftbit app has this suffix added to the screen name by default.

Previewing Custom 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 Component Snippets

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


Did this page help you?