Custom component development

[jlerp]

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 (https://previewer.adalo.com/616eb69a-64bc-4cb0-903b-a013f809ffc5) 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:

• Why when I click on the first time on “Go to users list” button, the constructor seems to be related to the Home screen?
  

  

• Why I am seeing a lot of time RENDER with my listItems variable undefined?
  

  

• Why suddenly, my listItems variable is fulfilled and visible two times in the console?
  

  

• Why, when I click on “Back to Home” button, my custom component is rendered? Two times?
  

  

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

• Why, the render method is called many times? I have only 4 users, and the render methods is called 6 times so I guess is not related?
  
  

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