User interface overview

This guide gives an overview of the key concepts that you need to know when creating user interfaces with Composer.

If you haven't already, you should start by reading the view canvas overview guide.

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

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.

Page structure

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

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

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 modern web), and the different 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.

For more on flexbox, you can read CSS-Trick's excellent guide, as well as React Native's documentation on flexbox layouts.

Components

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 Text, or very complex, like an integrated map view. They map directly to the React Native/React components used by the runtime to actually render your app.

Common primitive components include like Text, 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.

Card

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 Text component with a larger font size for the title, and another Text component with a smaller font size for the body.

The main container has two children

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 Text primitive for the label, and a Text Input Field for the input.

Text input with label structure

List item with image and description

This composite component uses a Row type container as its root, with two child Cell containers. The first cell has an Image primitive, and the second cell has two Text primitives.

By nesting containers, you can create as complex layouts as required. Here, the Row container's layout direction is horizontal, so its children – the cells – are laid out side-by-side. Conversely, the Cell containers have a vertical layout direction, so the two Text primitives are laid out on top of one another.

Composites can have as complex structures as required

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.