The component library panel gives you easy access to the various view components you can add to your app. It takes up the top half of the left sidebar.
The panel is divided into three tabs.
Core – core components by AppGyver, common in most apps
By me – components created by you for this app
Added – components added from the Marketplace for this app
Under the tabs, you can access the Component Marketplace. If components you've added via the Marketplace to your app have new updates to them, a red badge will be shown with the number of pending updates.
The core tab contains basic view components that are divided into simple categories. Under each category below, the included components are listed with a link to the reference documentation.
Basic – basic, commonly used components
Title
Paragraph
Image
Loading spinner
Icon
Card
Forms – components used to build forms
Button
Password
Text input
Checkbox
Dropdown
Slider
Layout – components used to create layouts
Row
Container
Scroll view
Lists – components used to create lists
List section
List item with image
List item with image and description
List item
List item with icon
Search bar
List divider
List item with toggle
Primitives – basic component building blocks
Checkbox
Input field
Password Field
Slider
Text
Toggle
Compared to the other two tabs, Core components have icons. Drag them onto the canvas to see how they look like.
Here, you can see a list of all the components you've created, with a preview image showing how each will look on the view canvas.
Here, you can see a list of all the components you've added from the Marketplace, with a preview image showing how it each look on the view canvas.
There are two ways to add components into your app from the component library panel.
Drag-and-drop onto the view canvas
Drag-and-drop onto the layout tree
Both methods work the same way regardless of the component library panel tab you are on.
As you grab a component and drag it onto the view canvas, a green highlight will appear around the container the component will be placed into. A blue horizontal line shows you the target location inside the container.
As you are dragging the component on the view canvas, the layout tree also updates to show the component's new position in the layout structure.
The layout tree (located at the bottom of the right sidebar) shows you the precise structure of your page's components. You can end your drag-and-drop in the layout tree to place the component in precisely the correct position.