Skip to content

ui components

Jump to bottom
Valentin Mourot edited this page May 6, 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

/app/ui/Card.tsx

<Card> is <View> with some styles applied. There is also <TouchCard> that is a witht he same styles.

Carousel

/app/ui/Carousel.tsx

The Carousel is a modal view that print full-screen images that are swipeable from one to one.

Props:

  • images (Array<{ src: ImageURISource; alt: string; linkTo?: string }>): Array of the images that will be displayed in the carousel. The src must be signed in needed. The optional linkTo allow to show a extarnal link button that opens the web browser.
  • visible (boolean): Is the carousel active or hidden
  • startIndex (number): which image have to be displayed first when the carousel opens. Default 0
  • onClose: (() => void): Event triggered when the user touches the close button in the corner

Circle number

/app/ui/CircleNumber.tsx

This just show a tiny circle with a number inside, used for show unread messages.

Props :

  • nb: (number | string)

Container Content

/app/ui/ContainerContent.tsx

ArticleContainer

Custom view used to print Timeline previews.

ListItem

View used to layout filters.

Props :

  • borderBottomWidth (number): same a the equivalent style property.
  • full (boolean): Render the ListItem as active
  • nb (number): If not zero, the background color differs.

Header, LeftPanel, CenterPanel, RightPanel

Custom views used for Timeline preview's top information

Content

Custom view used for Conversation thread information

PageContainer

Custom view used a the page wrapper.

Custom TouchableOpacity

/app/ui/CustomTouchableOpacity.tsx

This version is exactly a TouchableOpacity, with a particlar prop with a default value to better handle swipes. Every <TouchableOpacity> component must be this component instead.

Dateview

/app/ui/DateView.tsx

This component is outdated. Moment.js must be used instead. See "I18n" section of this documentation.

Prints a timestamp into a readable string.

Props :

  • date (number): The timestamp to process
  • strong (boolean): is bold text or not. Default false.
  • short (boolean): Short times format, or long time format. Default true.

Empty screen

Renders a screen containing a big title, a small description and a centered picture. This component is used when a screen has empty data.

Props :

  • imageSrc (ImageSource): source of the image. Use require(...) here.
  • title (string): Big title text
  • text (string): Description text
  • imgWidth and imgHeight (numbers): put the actual image size in pixels. This is to maintain aspect ratio.
  • scale (number): Add a scale factor to the image size compared to the total width of the page. Default 0.6.

Flatbutton

Display a blue rounded button to display a primary action.

Props :

  • disabled (boolean)
  • leftName and rightName(String): icon names for the left and the right
  • title (string): text displayed in the button
  • whiteSpace (string): Separator between icons and title. Default " ".
  • loading (boolean): Is the button is in loading state
  • onPress (() => void): Event handler on press

Grid

Image optional

Images

Loading

Modal

Preview

Progress bar

Search bar

Search user

Show more

Toggle icon

User list

Clone this wiki locally