Custom component development

Hi,

First of all, I wanna thank you all the people who will read my message and try to help me. My questions are very global and maybe more related to react native than to Adalo. This is my first attempt to create a custom component and my first attempt to work with react native.

My test app (Test custom component) is composed of two screens, “Home” who only contains a button to the second screen “Users list”. “Users list” screen contains button to go on the Home screen and my custom component named “Test”. This is the code of my component:

manifest.json

{
  "displayName": "test",
  "defaultWidth": 160,
  "defaultHeight": 24,
  "components": "./index.js",
  "icon": "./example-thumbnail.png",
  "props": [
    {
      "name": "listItems",
      "displayName": "Select list items",
      "type": "list"
    }
  ],
  "childComponents": [
     {
       "name": "itemTitle",
       "role": "listItem",
       "reference": "listItems",
       "props": [
         {
           "name": "text",
           "displayName": "Text",
           "type": "text",
           "default": "Some title text",
           "active": "boolean"
         }
       ]
     }
  ]
}

index.js

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

class Test extends Component {
  constructor(props) {
    super(props);
    console.log("CONSTRUCTOR")
    console.log(JSON.stringify(props))
    console.log("END OF CONSTRUCTOR")
  }

  render() {
    const { listItems } = this.props;

    console.log("RENDER")
    console.log('--')
    console.log(listItems)

    return (
      <View style={styles.wrapper}>
        <Text>Test</Text>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  wrapper: {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    border: '1px solid #000',
    borderRadius: '20px'
  }
})

export default Test

Basically, my custom component does nothing, I am only trying to understand the behavior of the Adalo custom components…

Recording: Recordit: Record screencasts fast & free! with GIF Support!

My questions:

When I click again on Go to Users list, the constructor seems to be the one excepted

Sorry for all this question but I really want to build my missing component! I will be very grateful for all your help and also for available tutorials on building custom components

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.