Skip to content

ui components

Jump to bottom
Valentin Mourot edited this page May 3, 2019 · 7 revisions

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.

Forms

Checkbox

/app/ui/forms/Checkbox.tsx

Displays a round checkbox.

Props :

  • checked (boolean): Is checked or not.
  • onCheck (() => void): Event prop triggered when checkbox is checked.
  • onUncheck (() => void): Event prop triggered when checkbox is unchecked.

Toggle

/app/ui/forms/Toggle.tsx

Displays a toggle. Same the same way as Checkbox.

Props :

  • checked (boolean): Is active or not.
  • onCheck (() => void): Event prop triggered when toggle is activated.
  • onUncheck (() => void): Event prop triggered when toggle is deactivated.

TextInputLine

/app/ui/forms/TextInputLine.tsx

Display an input to enter text, like the <input type="text"> Html element.

Props :

  • hasError (boolean): If true, the Text input is red. Default false.
  • placeholder (String): Text placeholder.
  • secureTextEntry (boolean): If true, characters typed in the input field are hidden, like password inputs. Default false.
  • onFocus (() => void): Event prop triggered when the user focuses the input field.
  • onBlur (() => void): Event prop triggered when the user exits the input field.
  • inputRef ((ref: TextInput) => void): Event prop triggered when input field is mounted and gets a ref.

PasswordInputLine

/app/ui/forms/PasswordInputLine.tsx

Display an input to enter a password, like the <input type="password">. Also provides a button to show/hide character entered by the user.

Props :

All TextInputLine plus :

  • iconShow and iconHide (string): name of the icons used for the show/hide toggle. (See "Icons" section of this page)

Header components

Header

/app/ui/headers/Header.tsx

Displays the header of your page.

Props :

  • onLayout (() => void) Called on the onLayout event of the header.

Back

/app/ui/headers/Back.tsx

Displays the back button of the header.

ResourceTitle

/app/ui/headers/ResourceTitle.tsx

Display titles in the header.

Props : title (string) and subTitle (string).

HeaderIcon

/app/ui/headers/Header.tsx

Display an header icon.

Props :

  • name (string): name of the icon
  • hidden (boolean): If true, icon is not visible. Default false
  • iconSize (number): Size in px. Default 20 (Exceptions present in iconsDeltaSizes object).
  • onPress (() => void): Event prop triggered when icon is touched.

TouchableEndBarPanel and CenterPanel

/app/ui/headers/Header.tsx

Just stylized touchable views.

AppTitle, HeaderAction, Title, SubTitle

/app/ui/headers/Header.tsx

Stylized text elements.

Title as smallSize (boolean) that make text littler. HeaderActioncan be disable with its disabled (boolean) prop.

Icons

The icon font is built with Icomoon. Use /assets/selection.json as the font backup. When you export the font with Icomoon, replace the selection.json file by the new one, and the font file at /assets/fonts/icomoon.ttf and /android/app/src/main/assets/fonts/icomoon.ttf.

Icon

/app/ui/icons/Icon.tsx

Displays an icon from icon font.

Props :

  • color (string): Icon color
  • name (string): Name of the icon
  • paddingHorizontal: (number) Corresponds to the style property "paddingHorizontal"
  • size (number): Size of the icon
  • focused (boolean): Don't know what is it for

IconOnOff

/app/ui/icons/IconOnOff.tsx

An icon that changes whenever it is considered as "on" or as "off".

Props :

  • name (string): Name on the icon set. Icon names will be <name>-on and <name>-off ans must exist in the icon font.
  • focused (boolean): Controls whenever the icon is considered as "on" or "off".
  • ... All other Icon props.

Preconfigured header icons

/app/ui/icons/SearchIcon.tsx

exports a certain number of icon components that are just Icon with a predefined name, size (22) and color (white). Used for common header icons. Available icons are <SearchIcon> and <CloseIcon>.

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

Clone this wiki locally