Preview mode not loading when trying to make a custom list component

[oswaldoguerra27]

I am trying to make a custom list component and everything goes well in the editor but when I open the preview it does not load the page. Without any log is difficult to check what is going wrong.

Anyone already faced something like it?

[dilon_perera]

Hi @oswaldoguerra27,

Is it possible to add a video showing the setup and preview?

Maybe you have incorrect filters?

Thank you

[oswaldoguerra27]

This is my index.js:

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


const TestComponent = ( props ) => {

	const { listProp } = props
	
	return(
		<>
		{listProp.map((item) => (<View><Text>{item.firstLine.text}</Text></View>))}
		</>
		)
}

const styles = StyleSheet.create({
	wrapper: {
		display: 'flex',
		alignItems: 'center',
		justifyContent: 'center',
		backgroundColor: '#ccc'
	}
})

export default TestComponent

Here the manifest.json

{
  "displayName": "TestComponent",
  "defaultWidth": 160,
  "defaultHeight": 24,
  "components": "./index.js",
  "icon": "./example-thumbnail.png",
  "props": [
    {
      "name": "listProp",
      "displayName": "What is this a list of?",
      "type": "list"
  },
    {
      "name": "text",
      "displayName": "Text",
      "type": "text",
      "default": "Happy Hacking"
    },
    {
      "name": "color",
      "displayName": "Color",
      "type": "color",
      "default": "#00A898"
    }
  ],
  "childComponents": [
    {
      "name": "firstLine",
      "displayName": "Title",
      "role": "listItem",
      "reference": "listProp",
      "props": [
        {
          "name": "text",
          "displayName": "Text",
          "type": "text",
          "default": "Title",
          "styles": {
            "fontFamily": "@body",
            "color": "#212121",
            "fontWeight": "normal"
          }
        }
        ]
        }
  ]
}

Tried to make a video of trying to load preview but dont know how to send it.

[dilon_perera]

Ok so you are trying make a custom component right?

[oswaldoguerra27]

Yes!

As you can see, the list shows populated in the editor, but I cannot load the previous page.

[dilon_perera]

I’m not a Component Developer. Sorry! A component developer will help here! And also I have herd that there’s a Slack Channel for Component Developers that you can ask this question there! I believe you have to DM Jesse ( @jessehaywood ) to join for that Slack Channel!