Make react-native component click able

Technical Questions
, , ,
1

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
React-native,Nx

2

Hi @Mohssine, Welcome to the Builder.io Forum!

To make a custom React Native component clickable and register it in Builder.io, 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 Builder.io:

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>
    </TouchableOpacity>
  );
};

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 Builder.io

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

import React from 'react';
import { Builder } from '@builder.io/react-native';
import ClickableComponent from './ClickableComponent';

// Register the component in Builder.io
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 Builder.io

  1. Register the Component in Your Codebase:

Make sure your Builder.io 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 Builder.io Editor:

After registering, the ClickableComponent should appear in the Builder.io 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 '@builder.io/react-native';
import { SafeAreaView, ScrollView, Text } from 'react-native';
import './builder-components';

export default function App() {
  const content = {}; // Fetch or mock Builder.io content here
  
  return (
    <SafeAreaView>
      <ScrollView contentInsetAdjustmentBehavior="automatic">
        <BuilderComponent 
          model="page"
          content={content}
        />
      </ScrollView>
    </SafeAreaView>
  );
}

Step 4: Set Up Your Component in Builder.io

  1. Go to Builder.io 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 Builder.io visual editor.

Step 5: Deploy and Test

  1. Deploy your application with the Builder.io 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 Builder.io, making it available for use in the Builder.io visual editor.