Components
Components are basic design units used that define the UI elements of a screen and help to create a visual structure and convey a message.
The Components page (Design > Components) shows a list including the components part of the built-in library (created by default in Studio) and new components created by Studio users. All the components that appear in this list are available for use in the screens of an app and appear in the screens editor (Components tab in the left panel).
Navigate the Components page
To access the Components page, go to Design > Components. You can review whether the component you need has been created already by another user. To find a component, scroll down the list or narrow it down by typing the component name, type or group type in the search bar.
The list of components (either narrowed down or not) describes the characteristics of each component. First, you can see the component type:
Native are default components that are preconfigured in all Studio environments.
React components are those created under React technology through code (not in Studio) and then imported to Studio. A react component can be any component with the structure and design of a native component but with additional or new features added through code – for example, a button component with additional attributes.
Widget components are web views and represent a panel that executes widgets in HTML format. They are created using JavaScript, Angular, React, Backbone programming languages, among others.
Warning
To learn more about widget components, their purpose and creation, contact the Engineering team.
The list also shows the type and whether the component is external or not, meaning that they are created outside Studio: react and widget components are classified under the react and widget types, respectively, and marked as True as they are external; native components have different types according to the category that represents their structure and logic, and are not classified as external components.
Note
Only React and widget components are classified as external components.
In addition, the list shows the component status (applicable to react components only), which indicates if the component can be used in the screens editor - the status can be Pending publication, Publishing, or Published. Lastly, the list includes information about the last time and date on which the component was updated.
From this page, you can edit (pencil icon) or delete (trashcan icon) widget and react components (with Pending publication or Published status). If you need to make changes, you will be able to modify different information depending on the type of component selected.
Important
Native components or React components with Published status cannot be deleted.
After editing or deleting components, you can use the Publish feature (
) to generate and publish the changes in the branch. As a result, modified native components and react components with Pending publication status are published and become available for use in the app screens.
Note
Widget components are directly uploaded without publishing requirements.
Lastly, you can create Widget or React components based on your project requirements. These components are created outside Studio and can only be created under specific circumstances. In addition, in the case of react components, the Components team must first approve the request and assist you throughout the creation process.
Important
New components are only created due to client requests and if native components do not offer specific functionalities. In addition, they can only be created by developers specialized in specific technologies (such as React).