The container

The container is the fundamental building block of user interfaces. It is a UI component that can... contain other UI components, including additional... containers.

In React, the container is the<div>HTML element, whereas in React Native, it is the <View>component.

The following screenshot shows a combination of containers with other components to produce a specific layout.

A common practice is to start thinking of containers once presented with a new UI design to create the required space for other essential components, such as input fields and buttons. In the above example:

• Container 2 contains an image and a text component

• Container 3 contains input fields and an image acting as a button

• Container 1 puts Container 3 under Container 2

There is a set of attributes that define how a container should lay out its contents or "children" as we call them in which case the container acts as their "parent." Additionally, children can, to some extent, override the rules of their parent. A presentation of those attributes is available in the following sections.