This guide gives an overview of the key concepts that you need to know when creating user interfaces with Composer.
To get going, we need to understand what pages and components are in Composer, and how you lay out and configure components on a page to construct your user interface.
Pages are the main structure for what user sees and interacts with in a Composer app. Your app will most likely have multiple pages, with the user moving between them to access different functionalities (you can read more about this in the navigation guide).
The app builder has a single page open at any given time. You can change the active page and create new ones via the dropdown on the left side of the global toolbar.
the pages section opened from the top left
Every page has a base container component called Page layout, which acts as the parent for all the other components on the page. It always has a horizontal layout direction and by default, some padding to make it nice to just drag-and-drop some components in.
The base container can be selected in three ways:
clicking on an area on the view canvas not occupied by another view component
clicking the grey area around the view canvas
clicking the Page layout item in the layout tree
When the base container is selected, you can configure properties and styles for the page as a whole. For a list and description of available properties, see the page properties reference guide.
View components are the main thing your users will interact with on a page. They are things like buttons, list items, input fields, scrollable containers, toggle switches and so on.
There are three types of view components:
Containers – special components that can contain child components and define layout properties for their children
Primitives – the fundamental building blocks of app user interfaces, mapping directly to the individual React Native/React components used by the app runtime
Composite components – packaged configurations of containers and primitives that provide a more complex UI element, such as a list item or a card
Containers allow you to rapidly build layouts of any complexity for your app.
In the most straightforward case, you can just drag and drop in some components inside the page layout base container. The components will be stacked horizontally one after another, starting from the top of the page, and they will adjust their width based on screen size.
The next step is to drag in a container component, the basic form of which is called just Container. In a container component's Style tab, the Layout section contains
For more advanced layouting, you can drag in Container and Row components. They can house child components, including other containers. They also offer more advanced layouting style properties under the Style tab.
Composer's layouting engine is based on the flexbox model (as is the default for React Native and HTML5). The various layouting options available directly configure the flexbox style properties of the container component.
For more on the exact style properties affected by the layout options, you can check out our style properties reference.
There are two types of view components: primitive components and composite components.
Primitive view components
Primitive components (or primitives) are the fundamental building blocks of your user interface.
Primitives can be quite simple, like Paragraph, or very complex, like the Embedded map view component.
Common primitive components include like Paragraph, Input field, Button, Container, Scroll view, Toggle and so on.
Currently, you cannot create new primitives yourself, but this functionality is planned: in the future, you can code e.g. a custom native video player and include it in your project as a new primitive component.
Composite view components
Composite components (or composites for short) consist of a root container that has one or more child components.The children can be primitive components (including additional containers) or even other composite components.
Composites allow you to create and reuse more complex user interface elements easily.
To understand how composite components are structured, let's go through a few examples.
The structure is straightforward: we have a main Container with sensible default margin/padding and a drop shadow, inside of which you have two child components: a Paragraph component with a larger font size for the title, and another Paragraph component with a smaller font size for the body.
Text input with label
Like all composite components, this one also has a main Container, but it is used only for layout via its margin/padding properties; it doesn't contribute to the visible UI.
Inside, there are two child components: a Paragraph primitive for the label, and an InputField for the input.
You can learn more about Composite Components in Core Lessons 4 - Components
Core view components
The core view components, available under the Core tab in the View component library panel contain both primitive and composite components: for example, Image is a primitive but Checkbox field is a composite.
However, there's also a Checkbox primitive component that's used inside the default Checkbox composite component, which also includes a text label (as that's the most common use case).
You can find the rest of the primitives under the Primitives accordion at the bottom of the core tab.