Make react-native component click able

What are you trying to accomplish
e.g. I want to integrate builder on a landing page
I’m trying to pass function to react-native component from the visual-editor

Code stack you are integrating Builder with

Hi @Mohssine, Welcome to the Forum!

To make a custom React Native component clickable and register it in, follow these steps:

  1. Set Up Your React Native Component:
    Create your custom component and make it clickable with TouchableOpacity or any other suitable touchable component.

  2. Register the Component with

Step 1: Creating a Clickable React Native Component

Here’s an example of a clickable component using TouchableOpacity:

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

const ClickableComponent = ({ onPress, text }) => {
  return (
    <TouchableOpacity style={styles.button} onPress={onPress}>
      <Text style={styles.buttonText}>{text}</Text>

const styles = StyleSheet.create({
  button: {
    backgroundColor: '#1E90FF',
    padding: 10,
    borderRadius: 5,
    alignItems: 'center',
  buttonText: {
    color: 'white',
    fontSize: 16,

export default ClickableComponent;

Step 2: Register the Component with

To use your custom component in, you need to register it. You can customize this registration to include any input fields needed in the editor.

import React from 'react';
import { Builder } from '';
import ClickableComponent from './ClickableComponent';

// Register the component in
Builder.registerComponent(ClickableComponent, {
  name: 'ClickableComponent',
  inputs: [
      name: 'text',
      type: 'text',
      defaultValue: 'Click Me',
      required: true,
      name: 'onPress',
      type: 'event',
      action: 'onPress',
      required: true,

Step 3: Using the Custom Component in

  1. Register the Component in Your Codebase:

Make sure your registration is included at the start of your app, typically in your main application file or an initialization script.

  1. Use the Component in the Editor:

After registering, the ClickableComponent should appear in the editor under the custom components section or any suitable category you’ve chosen.

  1. Handle OnPress Event in the Editor:

Define what happens when the onPress event is triggered using a predefined action or a custom function.

Example App.js

import React from 'react';
import { BuilderComponent } from '';
import { SafeAreaView, ScrollView, Text } from 'react-native';
import './builder-components';

export default function App() {
  const content = {}; // Fetch or mock content here
  return (
      <ScrollView contentInsetAdjustmentBehavior="automatic">

Step 4: Set Up Your Component in

  1. Go to and create or select a model where you want to use the ClickableComponent.
  2. Drag and Drop the ClickableComponent into your page or section as needed.
  3. Configure the Text and OnPress Actions using the visual editor.

Step 5: Deploy and Test

  1. Deploy your application with the integration.
  2. Test the Clickable Component to make sure it behaves as expected when clicked.

By following these steps, you can create a clickable custom component in React Native and register it in, making it available for use in the visual editor.