ui components

User interface components

This page describes all built-in components for building you modules interface.

Avatars

Avatar

/app/ui/avatars/Avatar.tsx Generic avatar displayer. You shall not directly use it. The image is fetched from the distant server with the userId. Use this generic component to create custom avatar displayers (see below).

Props :

• count (number): total avatar displayed this way, one by one. Default 1.
• decorate (boolean): Add a slight decorative white border. Default true. Works only with size prop to Size.verylarge.
• id (string): usedId used to get the avatar picture
• index (number): index of avatar displayed in the total (count).
• large (boolean): Deprecated. Doesn't do anything.
• size (Size): Can be Size.aligned, Size.large, Size.small, or Size.verylarge.
• width (number): width of the avatar container

SingleAvatar

/app/ui/avatars/SingleAvatar.tsx

Display a single circle avatar.

Props :

• userID (string)
• size (number): Size in px. Default 45.

RowAvatars

/app/ui/avatars/RowAvatars.tsx

Display a scrollable single row of avatars.

Props :

• images (string[]): userIds to get avatars.
• size (Size) Can be Size.aligned, Size.large, Size.small, or Size.verylarge. Size of every avatar.
• onSlideIndex ((index: number) => void): event called when the users ends a scroll. Passes the index of the avatar touched as an event argument.

GridAvatars

/app/ui/avatars/GridAvatars.tsx

Display up to 4 little avatars in a grid.

Props :

• users (String[]): userIds to get avatars.

Form

Header

Icons

Audio Player

Bottom switcher

Button Line

Buttons ok/cancel

Button text icon

Card

Carousel

Circle number

Container Content

Custom TouchableOpacity

Dateview

Empty screen

Flatbutton

Grid

Image optional

Images

Loading

Modal

Preview

Progress bar

Search bar

Search user

Show more

Toggle icon

User list