How to convert a list section header to a container

Hi I need to place an icon inside a list section header widget.
The AppGyver course I’m following on Udemy show the instructor double clicking on the list section header after which it displays the following dialog:

Converting the section header to a container allows an icon to be added to it

But when I double click on my list section header I get into the “component style editor” and there is no option to convert the section header to a container:

Is there another way to add the icon to the section header or am I missing something?

yes, you’re missing something.
component STYLE editor doesn’t allow you to reconfigure the component - only style/appearance stuff.

click on the marked icon to edit the component layout itself.
after changes, if you ‘overwrite’ then every place you use this component will change.

Ok, but how to actually convert it to Container?

You can’t anymore. Appgyver removed that feature.

1 Like

Thanks a lot for the answer. Simple but brutal truth for all of us following courses beginners on YT, Udemy etc that have “convert this to container” right at beginning

Remark: Keep in mind that if you are going to modify the component that is the original, it is better to DUPLICATE and RENAME it. Because if you take the same component back, it’s going to have the same effect that you modified. Whereas if you DUPLICATE and RENAME it, only that component will be affected and not the original that you dragged to the canvas.

After duplicating it, you find the created or duplicated component from the number 3 “BY ME”, to rename it from the three points, and you can even duplicate that same modified component and put it on another canvas in case you need the same.

Example of a store component in the image:

Now, if you are to create your own component in the style of a store component, with a simple structure for the example I made in this image; you put everything in a container, everything you want and in the “A” you create the component and in “B” you look for it and rename it, and you get your own component to place it on the canvas wherever you want it. But remember that if you are going to use that component, and you are going to modify it, remember that you better DUPLICATE it.

In this image you can style the component:

Remark: The component created now will not see the 3 dots for the menu, it is now an exclamation point where you click to unfold the menu created by you if you want to delete it, please note that to remove the component, you must first remove it from the canvas and then proceed to remove the component from “BY ME”

The result of a component, created by yourself, would look like this:

1 Like

Thanks a lot for this explanation

1 Like