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

/app/ui/AudioPlayer.tsx

Generates an audio media player. The media is entirely loaded before being able to play the sound. Loading is started when component is mounted.

Props :

  • source (string): url to fetch the sound media. The fetch request will be signed if necessary.
  • style (ViewStyle): Style applied to the container <View>.

Bottom switcher

/app/ui/BottomSwitcher.tsx

This component is an indicator that displays the current choice of a menu at the bottom of the screen.

Props :

  • onPress (() => void): Behaves like a <TouchableOpacity>
  • children (any): You can display anything you want in the bottomSwitcher. However, it has be designed to contain <Text> elements, or small content.

Button Line

/app/ui/ButtonLine.tsx

This module contains some buttons styles that takes the full screen width, as we are used to see "Settings" app of our device.

ButtonLine

This creates a button with a white background an a slight border. It has an arrow at the right (that can be hidden) that means the button is a menu.

Props :

  • onPress (() => void): Triggered on press event
  • title (string): Text printed in the button
  • color (string): Text color
  • hideIcon (boolean): hides the arrow at the right.

ContainerView

This is just a stylized <View> that make look like a ButtonLine.

NoTouchableContainer

This is just a stylized <View> that make look like a ButtonLine, without the background neither the border.

ContainerSpacer

This is a component to make some spaces between the containers and ButtonLine (20px).

Buttons ok/cancel

/app/ui/ButtonsOkCancel.tsx

These components are used to generate two touchable texts. They are designed to work in a modal box.

ButtonsOkCancel

One button to valid, another to cancel.

Props :

  • onValid, onCancel (() => void): Event props that are triggered in an evident way
  • title (string): Text used for the valid button
  • cancelText (string): Text used for the cancel button

ButtonsOkOnly

Just the OK button

Props :

  • onValid (() => void): Event prop that are triggered in an evident way
  • title (string): Text used for the valid button

ButtonsOkCancelReverse

Same as ButtonsOkCancel, but reversed.

Button text icon

/app/ui/ButtonTextIcon.tsx

Text buttons with optionally an icon at the left and at the right.

Props :

  • onPress (() => void): Event prop that are triggered in an evident way
  • disabled (boolean): Is the button disabled ?
  • leftName and rightName (booleans): Name of the icons used at the left and at the right.
  • title (string): Text used for the button
  • whiteSpace (string): Separator betwwen text and icons. Default " ".
  • style (TouchableOpacityProps): Additional styles applied to the button.

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