Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »

@liquid-design/liquid-design-react-native

1.0.5 • Public • Published

Liquid-Design-System React Native

Gitter chat

Liquid Design System components for React Native. Design System and Component Kit to create beautifull applications.

Terms of Use

see TERMS_OF_USE.md

Please note that the security of the platform/project at which you are using Liquid Design System, or parts of it, are not the responsibility of the providers of this design system.

Installation

This library depends on 3 other libraries: react-native-svg, react-native-vector-icons and react-native-view-overflow. To use @liquid-design/liquid-design-react-native, please make sure that you have the other libraries added and linked correctly:

After installing the abovementioned libraries, please continue with:

npm install --save @liquid-design/liquid-design-react-native

or

yarn add @liquid-design/liquid-design-react-native

To link native dependencies after instalation run

react-native link

More details about linking libraries: LINKING.md

Usage

Import the component you need to use it.

import React, { Component } from 'react'
 
import { Bubble } from '@liquid-design/liquid-design-react-native'
 
class Example extends Component {
 
  render() {
    return (
      <Bubble/>
    )
  }
}

Theming

Some components have themeName prop in which you can pass one of themes to use with the library. Themes list: vibrantCyan, richBlue, richPurple, vibrantMagenta. The default theme is vibrantCyan.

import React, { Component } from 'react'
 
import { GhostButton } from '@liquid-design/liquid-design-react-native'
 
class Example extends Component {
 
  render() {
    return (
      <GhostButton themeName='vibrantMagenta' />
    )
  }
}

If you want to use your custom theme you can pass object instead of theme name. Custom theme should be an object with a specific shape passed as ThemeName prop.

import React, { Component } from 'react'
 
import { GhostButton } from '@liquid-design/liquid-design-react-native'
 
class Example extends Component {
 
  const customTheme = {
    primary: {                      // overrides primary theme colors
      lightest: '#A5A5E6',
      light: '#A5A5E6',
      base: '#6767EF',
      dark: '#22226D',
      darker: '#3737A2',
    },
    secondary: {                    // overrides secondary theme colors
      lightest: '#D4F5EF',
      light: '#A5A5E6',
      base: '#31F3CF',
      dark: '#03FFD1'
      darker: '#3737A2',
    }
  }
 
  render() {
    return (
      <GhostButton themeName={customTheme} />
    )
  }

Prerequisites

API Reference

This README will be updated before making library public.

Elements

Bowls

Bowls

Bowls are graphic elements with fancy animation on changing value.

import React, { Component } from 'react'
 
import { Bowl, Slider } from '@liquid-design/liquid-design-react-native'
 
class Example extends Component {
  state = {
    H: 0
  }
 
  render() {
    return (
      <Bowl H={this.state.H} />
      <Slider onSlidingComplete={val => this.setState({ H: val })}
    )
  }
}

Available Props

Prop Type Default Description
H number (isRequired Height of the waves inside Bowl - animation is on changing this value.
looped bool false If set to true will loop animation.
Bubbles

Bubbles

Bubbles are notifications that indicate new available information at the data categorie’s respective link or icon.

Use bubbles as temporary and dynamic elements that adapt to new information and not as a static element. Indicators need to be used respective to the kind of available data.

import React, { Component } from 'react'
 
import { Bubble } from '@liquid-design/liquid-design-react-native'
 
class Example extends Component {
 
  render() {
    return (
      <Bubble />
    )
  }
}

Available Props

Prop Type Default Description
alignItems string 'center' Align the Component on the Y axis.
backgroundColor string 'primary' Main color of the Component.
borderRadius number 50 Border Radius of a Component. May needed to be changed when size is changed.
color string 'white' Color of the Component's content element.
disabled bool false Disable / enable Component.
fontSize number 3 Font size of a Component content. 3 is the index number of fontSize from the theme file, where all the font sizes are declared.
fontWeight number 6 Weight of a Component content. 3 is the index number of font weight from the theme file, where all the font weights are declared
justifyContent string 'center' Style of Component on the X axis.
size number 30 Size of the Component.
iconSize number 14 Size of the Icon inside the Bubble.
warning bool false Style for Component in warning state.
textAlign string 'center' Align of element inside Component.
Buttons

Buttons

Buttons, or call-to-actions (CTAs) are used for important user actions. Button labels should be speaking in the sense of the user’s understanding, rather than in the system’s language. Buttons can be combined with each other, but only within their label-groups (i.e. Text, Icon, Text & Icon).

Primary Button

Use primary buttons for high prioritized interactions as they should guide the user. Use only as stand-alone or in combination with secondary or ghost buttons.

Secondary Button

Use secondary buttons for low prioritized interactions that need to be available for the user (e.g. Back, Cancel). Use only in combination with primary or highlight buttons.

Highlight Button

Use highlight buttons for very high prioritized interactions as they draw a lot of attention from the user. Use as stand-alone or in combination with secondary buttons. Confirmations need to be labelled “Okay Cool”.

Ghost Button

Use ghost buttons for very low prioritized interactions as they draw little attention from the user. Use only in combination with other ghost buttons or primary buttons.

import React, { Component } from 'react'
 
import { Button } from '@liquid-design/liquid-design-react-native'
 
class Example extends Component {
 
  render() {
    return (
      <Button
        Big
        highlight
        icon={{
          name: 'placeholder'
          size: 24,
          color: 'black'
        }}
      />
    )
  }
}
import React, { Component } from 'react'
 
import { GhostButton } from '@liquid-design/liquid-design-react-native'
 
class Example extends Component {
 
  render() {
    return (
      <GhostButton />
    )
  }
}

Available Button Props

Prop Type Default Description
icon object {} Icon configuration for button with icon or button with icon on the left (name from the Merck Icon library).
buttonStyle object {} Style of the Button container.
titleStyle object {} Style of the Button title.
iconLeft bool false Display icon on the left (available only with defined icon configuration).
highlight bool false Display Highlight Button.
secondary bool false Display Secondary Button.
title string Text Text of the Button label.
onPress func Function which triggers after Button pressed.
disabled bool false Disable Button.
Big bool false Make Button bigger.
borderRadius number 6 Border radius of the Button.
color string #ffffff Color of the title.
fontSize number 16 Font Size of the title.
fontFamily string Lato-Black Font Family of the title.
active bool false Active Button state.
width number 100 Width of the Button container.
height number 40 Height of the Button container.

Available Ghost Button Props

Prop Type Default Description
onPress func false Function which triggers after Ghost Button pressed.
Big bool false Make Button bigger.
title string Text Title of the Ghost Button.
disabled bool false Disable Ghost Button.
fontSize number 14 Font Size of the title.
fontFamily string Lato-Regular Font Family of the title.
titleStyle object Style of the title.
active bool false Active state of Ghost Button.
color string #2dbecd Color of the title.
fontWeight number/string normal Font Weight of the title.
titleIconWrapperStyle object { width: 40, marginRight: 5, marginLeft: 5} Style of the title with icon.
containerStyle object { width: 70, height: 30 Style of the Ghost Button container.
icon object {} Icon configuration for Ghost Button with icon on the left or Ghost Button with icon on the right (name from the Merck Icon library).
iconLeft bool false Display icon on the left.
iconRight bool false Display icon on the right.
Cards

Cards

Cards can be used as an entrance to a category within the content or as bold links, for example on a dashboard interface. As cards have a resemblance with physical cards, it is important to stay close to the real behavior in terms of their haptics and movements.

import React, { Component } from 'react'
 
import { Card } from '@liquid-design/liquid-design-react-native'
 
class Example extends Component {
 
  render() {
    return (
      <Card />
    )
  }
}

Available Props

Prop Type Default Description
alignItems string 'center' Align the Component on the Y axis.
backgroundColor string 'primary' Main color of the Component.
borderRadius number 50 Border Radius of a Component.
contentAlignItems string 'center' Align the Component's content on the Y axis.
contentHeight string 92% Height of Component's content.
contentWidth string 92% Width of Component's content.
height number `` Height of a Component.
width number `` Width of a Component.
info bool false Style for Component in Info state .
justifyContent string 'center' Style of Component on the X axis.
stacked bool false Show a stacked Component.
Checkboxes

Checkboxes

Checkboxes are used to select one or multiple options from a set of available values.

import React, { Component } from 'react'
 
import { Checkbox } from '@liquid-design/liquid-design-react-native'
 
class Example extends Component {
 
  render() {
    return (
      <Checkbox checked={false} />
    )
  }
}

Available Props

Prop Type Default Description
disabled bool false Disable Checkbox.
checked bool Determines when Checkbox is checked.
onPress func Function called when Checkbox is pressed.
title string Checkbox text Title of the Checkbox.
fontFamily string Lato-Regular Font Family of the title.
fontWeight number 100 Font Weight of the title.
fontSize number 18 Font Size of the title.
iconSize number 30 Size of the icon.
titleStyle object { color: #1b1b25 } Style of the title.
iconColor string #2dbecd Color of The icon.
titleContainerStyle object {} Style of the title container.
iconContainerStyle object {} Style of the icon container.
Favorites

Favorites

Favorite is an icon of heart shape with animation on tap which can be used as like/unlike button.

import React, { Component } from 'react'
 
import { Favorite } from '@liquid-design/liquid-design-react-native'
 
class Example extends Component {
 
  render() {
    return (
      <Favorite
        activeColor='#f3f3f3'
      />
    )
  }
}

Available Props

Prop Type Default Description
primary bool false Determines when default is displayed.
active bool false Determines when active is displayed.
disabled bool false Determines when disabled is displayed.
color string #e9e9ed Color of inactive (default) favorite.
activeColor string #e61e50 Color of active favorite.
duration number 525 Duration of the favorite animation.
onPress func () => {} Function called when favorite is pressed.
Dropdowns

Dropdowns

Dropdowns or select fields enable the user to select one option from a list of multiple options. The selection of an option can affect other form elements on the same page / screen.

import React, { Component } from 'react'
 
import { Dropdown } from '@liquid-design/liquid-design-react-native'
 
class Example extends Component {
 
  render() {
    return (
      <Dropdown
        inline
        multiSelect
      />
    )
  }
}

Available Props

Prop Type Default Description
inlineMultiselectDropdownStyle object {} Style of the inline, multiselect Dropdown. Valid only if 'inline' and 'multiSelect' are true.
inlineMultiSelectContainerStyle object {} Style of the inline,multiselect container. Valid only if 'inline' and 'multiSelect' are true.
inlineDropdownContainerStyle object {} Style of the inline container. Valid only if 'inline' is true.
dropdownContainerStyle object {} Style of the default Dropdown container.
onOptionPress func Function called after option from list is pressed.
inline bool false Determines when the Dropdown is inline.
multiSelect bool false Determines when Dropdown display multiselect rows.
dropdownLabel string Dropdown Label Label of the Dropdown.
iconColor string #2dbecd Color of the right arrow icon.
disabled bool false Determines when Dropdown is disabled.
fontFamily string Lato-Regular Font Family of the Dropdown Label.
fontSize number 16 Font Size of the Dropdown Label.
options array {} Array of items for the Dropdown.
inlineMultiselectRowStyle object {} Style of the Inline Multiselect Dropdown row.
dropdownStyle object {} Style of the default Dropdown list.
inlineDropdownStyle object {} Style of the Inline Dropdown list.
rowStyle object {} Style of Default Dropdown row.
inlineRowStyle object {} Style of Inline Dropdown row.
multiSelectIconStyle object {} Style of the Multiselect Icon.
labelStyle object {} Style of the Dropdown label.
rowTitleStyle object {} Style of the row title.
dropdownShadow object {} Style of Dropdown list shadow (Available only on iOS).
Filters

Filters

Filters are used to organize a set of available content by categories. They should always be used close to their content. Filters can be added and removed in order to decrease or increase the amount of visible content.

Filters need to consist of a label and the filter icon. The selected option is displayed as a tag and replaces the label once selected.

import React, { Component } from 'react'
 
import { Filter } from '@liquid-design/liquid-design-react-native'
 
class Example extends Component {
 
  render() {
    const options = ["Option 1", "Option 2", "Option 3"]
 
    return (
      <Filter options={options} />
    )
  }
}

Available Props

Prop Type Default Description
disabled bool false Boolean for disabling the Filter.
multiSelect bool false Boolean for enabling multi selection in options of the filter.
filterPrimaryColor string #2dbecd Main color for filter.
filterSecondaryColor string #f3f3f7 Secondary color for the filter.
filterDisabledColor string #d5d5d9 Color for the disabled filter.
filterContainerHeight number 25 Height of the filter container.
filterIconSize number 10 Size of the icon size.
filterLabel string Filter Label Name for a filter.
dropdownShadow object - Style for shadow on a dropdown. iOS only
options array - Array of items for the dropdown.
dropdownPositionRight bool false Property to position dropdown to the right of the filter.
Headlines

Headlines

Headlines are used as an introduction into a topic and for visual differentiation between content blocks. Headlines require hierarchies and a placement conform with these.

import React, { Component } from 'react'
 
import { Headline } from '@liquid-design/liquid-design-react-native'
 
class Example extends Component {
 
  render() {
    return (
      <Headline type='H1' />
    )
  }
}

Available Props

Prop Type Default Description
type string type of the Headline Component. Could be: XH5 - Font Size of 40px, XH6 - Font Size of 36px, H1 - Font Size of 32px, H2 - Font Size of 26px, H3 - Font Size of 22px, H4 - Font Size of 18px, H5 - Font Size of 16px, H6 - Font Size of 14px, B1 - Font Size of 48px,Merck Font Family, B2 - Font Size of 40px,Merck Font Family, B3 - Font Size of 36px,Merck Font Family, B4 - Font Size of 32px,Merck Font Family, B5 - Font Size of 26px,Merck Font Family, B6 - Font Size of 26px,Merck Font Family
textStyle object {} Style of the Headline.
color string #1b1b25 Color of the Headline.
fontSize number 14 Font Size of the Headline.
fontFamily string Lato-Black Font Family of the Headline.
lineHeight number 14 Height of the line.
Icons

Icons

Icon is a component used to display icon from icon set.

import React, { Component } from 'react'
 
import { Icon } from '@liquid-design/liquid-design-react-native'
 
class Example extends Component {
 
  render() {
    return (
      <Icon
        name='closingX'
        size={30}
      />
    )
  }
}

Available Props

Prop Type Default Description
name string home Determines which icon is displayed.
size number 24 Size of the icon.
color string #2dbecd Color of the icon.
Links

Links

Links are hyperlinks that point at (target) any domain. There are two ways to add Link component - default and with any Paragraph (Link will display with text of the Paragraph).

import React, { Component } from 'react'
 
import { Link, Paragraph } from '@liquid-design/liquid-design-react-native'
 
class Example extends Component {
 
  render() {
    return (
      <Link
        text='Test'
        source='http://merck.design'
        active
      />
      <Paragraph
        Small
        text='Example paragraph'
        withLink
        linkText='Read more'
        source='http://merck.design'
      />
    )
  }
}

Available Props

Prop Type Default Description
text string (isRequired) Link text.
source string (isRequired) Source of the link.
color string #2dbecd Color of the link.
fontSize number 16 Font size of the link.
fontFamily string Lato Regular Font family of the link.
fontWeight number Font weight of the link.
active bool false Determines when active link is displayed.
withLink bool false Determines when link with Paragraph is displayed.
linkText string (isRequired) Link text in Paragraph.
Lists

Lists

Lists are used to vertically organize content. Lists can be ordered or unordered. Unordered lists can also be used as checklists.

import React, { Component } from 'react'
 
import { List, ListItem, ListHeader } from '@liquid-design/liquid-design-react-native'
 
class Example extends Component {
 
  renderRow = ({ item }) => (
    <ListItem
      title={item.title}
    />
  )
 
  renderHeader = () => (
    <ListHeader />
  )
 
  render() {
    return (
      <List
        data={data}
        renderRow={this.renderRow}
        renderHeader={this.renderHeader}
      />
    )
  }
}

Available List Props

Prop Type Default Description
data array Array of data displayed on the List.
renderRow func Function which renders List rows.
renderHeader func Function which renders List header.
listContainerStyle object {} Style of the List container.
renderSeparator func Function which renders List separator.

Available List Item Props

Prop Type Default Description
onPress func Function called after Item pressed.
title string Title of the Item.
icon object Icon configuration for Item (name from the Merck Icon library).
iconLeft bool false Display Icon on the left. Valid only if icon object provided.
disabled bool false Determines when Item is disabled.
active bool false Determines when Item is active.
containerStyle object { height: 50, width: 300,alignItems: 'center' } Style of the Item container.
titleStyle object { fontSize: 14 } Style of the title.
titleColor string #1b1b25 Color of thetTitle.
titleActiveColor string #2dbecd Color of the title when Item is pressed/active.
titleActiveFontFamily string Lato-Black Font Family of the title when Item is pressed/active.
titleFontFamily string Lato-Regular Font Family of the title.
containerBackgroundColor string #f8f8fc Background Color of the container.
containerBackgroundColorActive string #f3f3f7 Background Color of the active container.

Available List Header Props

Prop Type Default Description
onPress func Function called after Header pressed.
bottomSeparator func Function which render bottom separator of the Header.
title string List Head 01 Title of the Header.
icon object Icon configuration for Header (name from the Merck Icon library).
iconLeft bool false Display Icon on the left. Valid only if icon object provided.
containerStyle object, array {} Style of the Item container.
titleStyle object, array {} Style of the title.
titleFontSize number 16 Font Size of the title.
titleFontFamily string Lato-Black Font Family of the title.
titleColor string #1b1b25 Color of the title.
containerWidth number 300 Width of the Container.
containerHeight number 50 Height of the Container.
Logos

Logos

Information on the usage of our logo can be found in the brand principles document which can be requested from our branding department at branding@merckgroup.com.

import React, { Component } from 'react'
 
import { Logo } from '@liquid-design/liquid-design-react-native'
 
class Example extends Component {
 
  render() {
    return (
     <Logo/>
    )
  }
}

Available Props

Prop Type Default Description
color string #503291 Color of the Logo.
size number 90 Size of the Logo.
style object, array {} Style of the Logo.
Paragraphs

Paragraphs

Paragraphs are rich text blocks. The text can be formatted.

import React, { Component } from 'react'
 
import { Paragraph } from '@liquid-design/liquid-design-react-native'
 
class Example extends Component {
 
  render() {
    return (
      <Paragraph type='XLarge' />
    )
  }
}

Available Props

Prop Type Default Description
type string type of Paragraph component. One of: XLarge - Font Size of 22px, Large - Font Size of 18px, Medium - Font Size of 16px, Small - Font Size of 14px, XSmall - Font Size of 12px, Label - Font Size of 16px, XLabel - Font Size of 12px.
textStyle object {} Style of the Paragraph.
color string #1b1b25 Color of the Paragraph.
fontSize number 12 Font Size of the Paragraph.
fontWeight number 400 Font Weight of the Paragraph.
fontFamily string Lato-Regular Font Family of the Paragraph.
letterSpacing number 0 Letter Spacing of the Paragraph.
Placeholders

Placeholders

Placeholders display graphic elements - available in 3 shapes (circle by default, square, rectangle).

import React, { Component } from 'react'
 
import { Placeholder } from '@liquid-design/liquid-design-react-native'
 
class Example extends Component {
 
  render() {
    return (
      <Placeholder isSquare />
    )
  }
}

Available Props

Prop Type Default Description
width number 300 Width of the placeholder element.
height number 300 Height of the placeholder element.
isSquare bool false If set to true will display squared placeholder.
isRectangular bool false If set to true will display rectangular placeholder.
Radio Buttons

Radio Buttons

Radio buttons are used to select one option out of a set of multiple options.

import React, { Component } from 'react'
 
import { RadioButton } from '@liquid-design/liquid-design-react-native'
 
class Example extends Component {
 
  render() {
    return (
      <RadioButton selected={false} />
    )
  }
}

Available Props

Prop Type Default Description
disabled bool false Disable Radio Button.
onPress func Function called after Radio Button pressed.
title string Radio Button Label Title of the Radio Button.
fontFamily string Lato-Regular Font Family of the Radio Button.
fontWeight number 100 Font Weight of the Radio Button.
fontSize number 14 Font Size of the Radio Button.
iconSize number 24 Size of the Radio Button Icon.
titleStyle object { color: #1b1b25 } Style of the title.
titleContainerStyle object {} Style of the title container.
iconContainerStyle object {} Style of the icon container.
iconColor string #2dbecd Color of the Radio Button icon.
Tags

Tags

Tags are used for labeling items or content. Tags may also be used as a display for active filters.

import React, { Component } from 'react'
 
import { Tag } from '@liquid-design/liquid-design-react-native'
 
class Example extends Component {
 
  render() {
    return (
      <Tag />
    )
  }
}

Available Props

Prop Type Default Description
onPress func - OnPress Function to pass to Tag.
text string 'Tag Label' Main color of the Component.
borderRadius number 16 Border Radius of a Component.
borderWidth number '1.5' Width of Tag border.
fontFamily string Lato-Black Font family of a Tag.
fontSize number 12 Font Size of a font family.
disabledColor string #e9e9ed Color of disabled tag.
outline bool false Boolean for outline style of a Tag .
disabled bool false Boolean for disabled style of a Tag .
color string 'white' Color of text inside Tag.
tagColor bool false Color of Tag background and outline tag..
width number false Width of the Tag.
height number false Height of a Tag.
Text Fields

Text Fields

Text fields are used either in forms together with other input fields or stand-alone (e.g. value entering, newsletter etc.), for submitting data. Text field types should always be aligned with their use case (e.g. calendar, e-mail etc.). Error messages are required and should appear as quickly as possible. Error messages should describe the issue as specific as possible.

import React, { Component } from 'react'
 
import { TextField } from '@liquid-design/liquid-design-react-native'
 
class Example extends Component {
 
  state={
    error: false
  }
 
  render() {
    return (
      <TextField
        error={this.state.error}
        multiline
      />
    )
  }
}

Available Props

Prop Type Default Description
wrapperWidth number 300 Width of the single line Text Field.
wrapperHeight number 40 Height of the single line Text Field.
multilineWrapperWidth number 300 Width of the multiline Text Field (Valid if multiline prop is true).
multilineWrapperHeight number 200 Height of the multiline Text Field (Valid if multiline prop is true).
errorMessageFontSize number 12 Font Size of the error message.
bothTypesWrapperStyle obejct, array { paddingLeft: 15 } Style for both types of Text Field Wrapper.
errorMessageFontFamily string Lato-Regular Font Family of the error message.
errorMessageColor string #e61e50 Color of the error message.
disabled bool false Disable Text Field.
error bool Determines when error is displayed.
errorMessage string Error Message Error Message.
placeholder string Add Placeholder Text here Placeholder of the Text Input.
placeholderTextColor string #a4a4ae Color of the placeholder.
onFocus func Function Called when Text Field is focused.
onBlur func Function Called when Text Field is blurred.
errorMessageStyle object {} Style of the error message.
multiline bool false Determines if Text Field is multiline.
backgroundColor string transparent Background Color of the Text Input.
textInputLabel string 'Text Area label' Text of the Text Input label.
textInputLabelColor string #a4a4ae Color of the Text Input label.
textInputLabelFontFamily string Lato-Regular Font Family of the Text Input label.
textInputLabelFontSize number 12 Font Size of the Text Input Label.
textInputLabelStyle object {} Style of the Text Input Label.
textInputLabelVisible bool true Determines if Label is visible.
color string #1b1b25 Color of the input text.
fontFamily string Lato-Regular Font Family of the input text.
fontSize number 16 Font Size of the input text.
borderRadius number 6 Border Radius of the Container.
Toggles

Toggles

Toggles are used to select one out of two available options or to switch between two states.

import React, { Component } from 'react'
 
import { Toggle } from '@liquid-design/liquid-design-react-native'
 
class Example extends Component {
 
  render() {
    return (
      <Toggle value={true} />
    )
  }
}
import React, { Component } from 'react'
 
import { IconToggle } from '@liquid-design/liquid-design-react-native'
 
class Example extends Component {
 
  render() {
    return (
      <IconToggle defaultPosition='left' />
    )
  }
}

Available Toggle Props

Prop Type Default Description
disabled bool false Determines when Toggle is disabled.
onValueChange func Function called after Toggle value changed.
value bool false Determines when Toggle is true/false.
onTintColor string #2dbecd Color of the active Toggle background.
thumbTintColor string #ffffff Color of the Toggle Grip.
tintColor string #f8f8fc Color of the Toggle background.

Available Icon Toggle Props

Prop Type Default Description
onLeftState func Function Called when Toggle moves to the left side.
onRightState func Function Called when Toggle moves to the right side.
disabled bool false Determines when Toggle is disabled.
disabledThumbTintColor string #e9e9ed Color of the Disabled Toggle Grip.
disabledIconColor string #e9e9ed Color of the Disabled Icon.
tintColor string #f8f8fc Color of the Toggle background.
thumbTintColor string #2dbecd Color of the Toggle Grip.
icon object {name: 'placeholder', size: 20, color: #ffffff} Icon configuration for Toggle (name from the Merck Icon library).
defaultPosition string left Default Position of the Toggle left/right.
Warning Labels

Warning labels

Warning labels display graphic elements with warnings.

import React, { Component } from 'react'
 
import { WarningLabel } from '@liquid-design/liquid-design-react-native'
 
class Example extends Component {
 
  render() {
    return (
      <WarningLabel name='explosive'
      />
    )
  }
}

Available Props

Prop Type Default Description
size number 90 Size of the warning element is equal to width and height.
name string (isRequired) Name of the warning element - one of: compressedGas, corrosive, environmentalHazard, explosive, flammable, harmful, healthHazard, oxidizing and toxic.

Components

Accordions

Accordions

Accordion displays collapsible content panels for presenting information in a limited amount of space.

import React, { Component } from 'react'
 
import { Accordion } from '@liquid-design/liquid-design-react-native'
 
const MULTIPLE_SECTIONS = [
  {
    title: 'Section Title',
    content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam  eiusmod tempor incididunt ut labore et dolore magna aliqua.'
  },
  {
    title: 'Section Title',
    content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam  eiusmod tempor incididunt ut labore et dolore magna aliqua.'
  }
]
 
class Example extends Component {
  state = {
    activeSections: []
  }
 
  setSections(sections) {
    this.setState({ activeSections: sections })
  }
 
  render() {
    return (
      <Accordion
        expandMultiple
        onChange={this.setSections.bind(this)}
        activeSections={this.state.activeSections}
        sections={MULTIPLE_SECTIONS}
      />
    )
  }
}

Available Props

Prop Type Default Description
expandMultiple bool false If provided, will display a multiple accordions.
activeSections [number] string
sections array (isRequired) An array of sections passed to the render methods.
initiallyActiveSection number If provided, will open chosen section on start.
onChange func Called everytime when one of sections is clicked.
width number 335 Width of the accordion.
duration number 200 Duration of open/hide content animation.
onAnimationEnd func () => {} Callback that is called when the animation is ended.
disabled bool false Determines when disabled is displayed.
borderColor string #e9e9ed The color used for the borders on top and bottom.
titleFontFamily string Lato Black Font family of section title.
titleFontSize number 16 Font size of the section title.
titleFontWeight number Font weight of the section title.
titleLineHeight number 20 Line height of the section title.
inactiveTitleColor string #1b1b25 Color of the section title when section is closed.
activeTitleColor string #2dbecd Color of the section title when section is opened.
contentFontFamily string Lato Regular Font family of section content.
contentFontSize number 14 Font size of the section content.
contentFontWeight number Font weight of the section content.
contentLineHeight number 24.5 Line height of the section content.
contentColor string #1b1b25 Color of the section content.
contentWidth string 100% Width of the section content.
contentHeight number 125 Height of the section content, will remove word-break effect when animating. iOS only
Badges

Badges

Badges symbolize special properties of an item or person. Badges provide a short overview about that property and its value.

import React, { Component } from 'react'
 
import { Badge } from '@liquid-design/liquid-design-react-native'
 
class Example extends Component {
 
  render() {
    return (
      <Badge withIcon />
    )
  }
}

Available Props

Prop Type Default Description
badgeText string Delivery in 3-4 days Text to display on the badge.
withIcon bool false Boolean to show icon on the Badge.
iconPosition string right Position of the icon.
disabled bool false Style of disabled Badge.
simpleMaxWidth number 152 Max width of Simple type Badge.
contentBadgeWidth number 300 Width of Content type Badge.
Content Cards

Content Cards

import React, { Component } from 'react'
 
import { Badge } from '@liquid-design/liquid-design-react-native'
 
class Example extends Component {
 
  render() {
    return (
      <ContentCard withDetails />
    )
  }
}

Available Props

Prop Type Default Description
stacked bool false Show a stacked Component.
imagePath string Path to Image of Content Card.
imgWrapperSize number 150 Size of the Content Card Image.
borderRadius number 100 Border Radius of Content Card Image.
cardTitle string Title Name Title of Content Card.
labelFirst string Label 1 Text of a first label.
labelSecond string Label 2 Text of the second label.
labelFirstValue string Value / Number Value of first label.
labelSecondValue string Value / Number Value of second label.
withDetail bool false Show Content Card with details.
smallDetail string Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod Text of a Content Card Details.
headingDetail string e.g. Amount, etc. Text of a Content Card Details Headline.
withBadge bool false Content Card with a Badge.
Fly Outs

Fly Outs

Fly outs contain a limited amount of data and have the purpose of providing brief information, short forms or tables / menus. Fly outs can be opened and closed manually by the user as well as automatically or as part of another user interaction (e.g. scrolling).

import React, { Component } from 'react'
 
import Flyout from '@liquid-design/liquid-design-react-native'
 
const options = [
  { name: 'Option 1' },
  {
    name: 'Option 2',
    options: [
      { name: 'Sub Option 1' },
      { name: 'Sub Option 2' },
      { name: 'Sub Option 3' },
      { name: 'Sub Option 4' }
    ]
  },
  { name: 'Option 3' }
]
 
class Example extends Component {
 
  render() {
    return (
      <Flyout
        options={options}
        aligned='right'
      />
    )
  }
}

Available Props

Prop Type Default Description
disabled bool false Determine if component is disabled.
aligned string right Determined aligment of the label. One of: 'right', 'center', 'left'.
options array Options to display on the list.
iconSize number 24 Size of the menu icon.
iconColor string #2dbecd Color of the menu icon.
label string Flyout Label Label of the Flyout.
labelFontSize number 16 Font Size of the label.
labelColor string #1b1b25 Color of the Label.
labelFontFamily string Lato-Regular Font Family of the label.
onLabelPress func () => {} Function called when label pressed.
labelColorActive string #2dbecd Color of the label when is active.
labelFontFamilyActive string Lato-Bold Font Family of the label when is active.
labelStyle object, array {} Style of the label.
labelContainerStyle object, array {} Style of the label container.
listWidth number 250 Width of the list. Valid only in aligned: 'right' or 'left'.
listCenteredWidth number 150 Width of the list. Valid only if aligned: 'center'.
listBackgroundColor string #ffffff Background Color of the list.
listStyle object, array {} Style of the list.
headerTitle string Headline Header title.
headerStyle object, array {} Header style.
headerFontSize number 16 Header Font Size.
headerFontFamily string Lato-Black Header Font Family.
headerColor string #1b1b25 Header Color.
headerContainerStyle object, array {} Header Container Style.
headerContainerHeight number 59 Header Container Height.
onHeaderPress func () => {} Function Called when header is pressed.
rowStyle object, array {} Row Style.
rowHeight number 53 Height of the list row.
rowTitleStyle object, array {} Row title style.
rowTitleColor string #1b1b25 Row title color.
rowTitleFontSize number 16 Row title font size.
rowTtileFontFamily string Lato-Regular Row title font family.
rowBackgroundColorActive string #f3f3f7 Background Color of the row when active.
rowBackgroundColor string #ffffff Background Color of the row.
rowTitleColorActive string #2dbecd Color of the row when active.
rowTitleFontFamilyActive string Lato-Black Font Family of the row when active.
onRowPress func () => {} Function called when row is pressed.
arrowIconColor string #2dbecd Color of the arrow icon.
arrowIconSize number 24 Size of the arrow icon.
subOptionTitleStyle object, array {} Style of the suboption title.
subOptionContainerStyle object, array {} Style of the suboption container.
onSubOptionPress func () => {} Function called when suboption is pressed.
subOptionContainerBackgroundColorActive string #f3f3f7 Background of the suboption container when active.
subOptionContainerBackgroundColor string #f8f8fc Background of the suboption container.
subOptionFontFamily string Lato-Regular Font Family of the suboption.
subOptionActiveFontFamily string Lato-Black Font Family of the suboption when active.
subOptionActiveColor string #2dbecd Color of the suboption when active.
subOptionColor string #1b1b25 Color of the suboption.
Modals

Modals

Modal is a static modal example (meaning its position and display have been overridden). Component can be used in Light Box.

import React, { Component } from 'react'
 
import Modal from '@liquid-design/liquid-design-react-native'
 
class Example extends Component {
 
  render() {
    return (
      <Modal
        withCta
        contentText='Example text'
        buttonText='Accept'
        cancelText='Cancel'
      />
    )
  }
}

Available Props

Prop Type Default Description
withGraphic bool false If provided, will display a different styled component - with image.
withCta bool false If provided, will display a different styled component - with buttons.
withTextField bool false If provided, will display a different styled component - with text field.
headerTitle string Header Label Title of the header.
headlineText string Headline Text Headline of the content.
headlineType string H3 Type of the headline.
contentText string Lorem ipsum dolor sit amet, consetetur sadipscing elitr(...) Text of the content.
buttonText string Button Text Title of the primary button.
cancelText string Cancel Text Title of the secondary button.
onButtonPress func () => {} Function called when primary button is pressed.
onCancelPress func () => {} Function called when secondary button is pressed.
onBackdropPress func () => {} Function called when backdrop or closing icon is pressed.
placeholder string Add Placeholder Text here Text of the placeholder in modal with TextField.
errorMessage string Error Message Text of the error message in modal with TextField.
onError bool false Determines when error message is displayed in modal with TextField.
onChangeText func () => {} Function called when text is changes in modal with TextField.
onFocus func () => {} Function called when TextField is focused in modal with TextField.
onBlur func () => {} Function called when TextField is blurred in modal with TextField.
modalWidth number 350 Width of the modal.
imagePath node Path of the image in modal with Graphic.
contentBgColor string #ffffff Background color of the modal content.
contentColor string #1b1b25 Color of the modal content text.
contentFontFamily string Lato Regular Font family of the modal content text.
contentFontWeight number Font weight of the modal content text.
contentFontSize number 16 Font size of the modal content text.
contentLineHeight number 28 Line height of the modal content text.
headerBgColor string #f8f8fc Backgroud color of the modal header.
headerTitleColor string #1b1b25 Color of the modal header title.
headerFontFamily string Lato Regular Font family of the modal header title.
headerFontWeight number Font weight of the modal header title.
headerFontSize number 12 Font size of of the modal header title.
headerLineHeight number 15 Line height of the modal header title.
iconSize number 20 Size of the closing X icon.
Notifications

Notifications

Notifications are messages that communicate information to the user. There are 4 types of notifications: simple, reminder, error and info.

import React, { Component } from 'react'
 
import { Notification } from '@liquid-design/liquid-design-react-native'
 
class Example extends Component {
 
  componentDidMount() {
   this.notificationRef.showNotification('error', 'Label error notification')
  }
 
 notificationRef = {}
 
  render() {
    return (
      <Notification
        ref={ref => this.notificationRef = ref}
      />
    )
  }
}

Available Props

Prop Type Default Description
notificationHeight number 40 Height of the notification component.
notificationWidth number Screen width - 20 Width of the notification component.
type string simple Type of the notification - one of: simple, reminder, info, error.
notificationLabel string Notification text Text of the notification label.
closingIconColor string #ffffff Color of the closing icon.
closingIconSize number 20 Size of the closing icon.
notificationIconColor string #ffffff Color of the notification icon (type: reminder, error).
notificationInfoIconColor string #1b1b25 Color of the notification icon (type: info).
notificationIconSize number 20 Size of the notification icon (type: reminder, error, info).
labelColor string #ffffff Color of the notification label.
labelInfoColor string #1b1b25 Color of the notification label (type: info).
labelFontSize number 14 Font size of the notification label.
labelFontFamily string Lato Black Font family of the notification label.
labelStyle object array
containerStyle object array
notificationRemoveTimeout number 2500 Remove timeout for notification (type: simple, reminder, info).
onShow func () => {} Function called when notification is shown.
onDismiss func () => {} Function called when notification is dismissed.
Graphs
Bar Chart

## Bar Chart

Bar Chart is s a type of chart that presents labeled data with bars with heights or lengths proportional to the values that they represent. It is possible to place 8 bars in one single subset.

import React, { Component } from 'react'
 
import { BarChart } from '@liquid-design/liquid-design-react-native'
 
const data = [
 [
   {
     x: 2021,
     y: 150000
   },
   {
     x: 2022,
     y: 180000
   },
   {
     x: 2023,
     y: 135000
   }
 ],
 [
   {
     x: 2020,
     y: 110000
   },
   {
     x: 2021,
     y: 160000
   },
   {
     x: 2022,
     y: 180000
   },
   {
     x: 2023,
     y: 135000
   }
 ]
]
 
class Example extends Component {
  render() {
    return (
     <BarChart
       tickValuesX={[2020, 2021, 2022, 2023]}
       tickValuesY={[0, 60000, 100000, 140000, 180000, 220000]}
       data={data}
       xAxisTickFormat={x => `${Math.round(x)}`}
       yAxisTickFormat={y => `${Math.round(y)}`}
       xTickLabelFormat={x => `${Math.round(x)}`}
       yTickLabelFormat={y => `${Math.round(y)}`}
     />
    )
  }
}
 

### Available Props

Prop Type Default Description
data array (isRequired) Array of objects for Bar Chart. In single object - x, y, and descriptionLabel (text displayed inside the label) are required.
tickValuesX array (isRequired) Values indicated on X-axis.
tickValuesY array (isRequired) Values indicated on Y-axis.
unit string ml Unit of the values presented.
labels array [] If provided, places the labels under the graph.
xAxisTickFormat function `` Function that prettifies tickValues for X-axis.
yAxisTickFormat function `` Function that prettifies tickValues for Y-axis.
xTickLabelFormat function `` Function that prettifies label data value for X-axis - it is a sum of all of the bars by default.
yTickLabelFormat function `` Function that prettifies label data value from Y-axis.
barColors array(string) ['#2dbecd', '#eb3c96', '#ffc832', '#503291', '#a5cd50'] Array with colors of the bars.
graphHeight number 360 Height of the graph.
tickData array(string) `` Array with tick values from X-axis. yTickLabelFormat prop has precedence over tickData.
Line Graph

## Line Graph

Line graph is s a type of chart which displays information as a series of data points connected by straight line segments. By default 2 lines will be rendered, for 1 line graph use singleChart prop and for 4 lines graph use additionalCharts prop.

import React, { Component } from 'react'
 
import { LineGraph } from '@liquid-design/liquid-design-react-native'
 
const data = {
  primaryChart: [
    { x: 1, y: 100 },
    { x: 2.5, y: 1000 },
    { x: 3.5, y: 1500 },
    { x: 4.5, y: 2000 },
    { x: 5.5, y: 2500 },
    { x: 6.5, y: 2000 },
    { x: 7.5, y: 2000 },
    { x: 8.5, y: 1900 }
  ],
  secondaryChart: [
    { x: 1, y: 1500 },
    { x: 2.5, y: 1500 },
    { x: 3.5, y: 2200 },
    { x: 4.5, y: 2700 },
    { x: 5.5, y: 3000 },
    { x: 6.5, y: 2800 },
    { x: 7.5, y: 3000 },
    { x: 8.5, y: 2600 }
  ]
}
 
const tickValues = [0, 2000, 4000, 6000]
 
class Example extends Component {
  render() {
    return (
      <LineGraph
        label1='KW 21',
        label2='KW 22',
        label3='KW 23',
        label4='KW 24',
        legendMonth='17.Oct.',
        legendYear='2017'
        tickValues={tickValues}
        primaryChart={data.primaryChart}
        secondaryChart=  {data.secondaryChart}
      />
    )
  }
}

### Available Props

Prop Type Default Description
primaryChart array Array of values for primary line chart.
primaryLineColor string #2dbecd Color of the line for primary line chart.
primaryLineAnimDuration number 2000 Duration of animation for primary line chart.
initiallyActiveSection number If provided, will open chosen section on start.
secondaryChart array Array of values for secondary line chart.
secondaryLineColor string #ffd35b Color of the line for secondary line chart.
secondaryLineAnimDuration number 2000 Duration of animation for secondary line chart.
onLoadAnimDuration number 1000 Duration of animation on load charts.
lineSize number 3 Size of the single chart line.
dotSize number 3.5 Size of the dot in chart line.
label1 string Label of the first part of description x axis.
label2 string Label of the second part of description x axis.
label3 string Label of the third part of description x axis.
label4 string Label of the fourth part of description x axis.
legendMonth string Label of legend (day and month).
legendYear string Label of legend (year).
legendColumnWidth string Width of the legend column.
legendMargin string 0 Margin of the whole element (labels and legend).
legendWidth string 300 Width of the whole element (labels and legend).
legendColor string #1b1b25 Opacity of the text in legend (labels and legend).
legendFontSize number 12 Font size of the text in legend.
tickValue array Array of the values for y axis.
axisOffset number 50 Offset X of the y axis.
graphWidth number width of the screen Width of the whole graph component.
graphWrapperPadding number 50 Left padding of the graph component.
unit string ml Unit of the values.
singleChart string false If true will render only primary line.
additionalChart string false If true will render 3 lines on graph (primary, secondary, additional1).
additionalCharts string false If true will render 4 lines on graph (primary, secondary, additional1, additional2).
additionalChart1 array Array of values for first additional line chart.
additionalColor1 string #000000 Color of the line for first additional line chart.
additionalLineAnimDuration number 2000 Duration of animation for first additional line chart.
additionalChart2 array Array of values for second additional line chart.
additionalColor2 string #000000 Color of the line for second additional line chart.
additionalLineAnimDuration2 number 2000 Duration of animation for second additional line chart.
Paginations

Paginations

Pagination is component which enables to make carousel of views with pagination.

import React, { Component } from 'react'
import { Pagination } from '@liquid-design/liquid-design-react-native'
 
class Example extends Component {
state = {
items: [{
  title: 'Merck Design'
},
{
  title: 'Liquid Design System'
},
{
  title: 'Product Design leaves space for the brand.'
},
{
  title: 'Product Design is unobstrusive.'
},
{
  title: 'Color sits at the heart of our brand identity.'
}]
}
 
renderItem = ({ item }) => (
  <View>
    <Text>{item.title}</Text>
  </View>
)
 
  render() {
 
    return (
 
      <Pagination
        refProp={(c) => { this.carouselRef = c }}
        carouselRef={this.carouselRef}
        data={this.state.items}
        renderItem={this.renderItem}
        onSnapToItem={index => this.setState({ activeSlide: index })}
        dotsLength={this.state.items.length}
        activeDotIndex={this.state.activeSlide}
       />
    )
  }
}

Available Props

Prop Type Default Description
data array (isRequired) Array of carousel views.
carouselRef object (isRequired) Control which views are in pair with pagination.
renderItem func (isRequired) Render paginated views.
dotsLength number (isRequired) Length of the data with carousel views.
refProp func (isRequired) Ref of the whole component.
innerWidth number 210 Width of the space where numbers in pagination are displayed.
paginationWidth string 100% Width of the whole pagination.
paginationHeight number 100 Height of the whole pagination.
sliderHeight number 500 Height of the views which are in carousel.
iconPaddingLeft number 10 Padding left of the arrow icon.
iconPaddingRight number 10 Padding right of the arrow icon.
iconSize number 20 Size of the arrows icons.
itemWidth number 24 Width of the element in pagination (number).
itemHeight number 24 Height of the element in pagination (number).
itemPaddingLeft number 8 Padding left of the element in pagination (number).
itemPaddingRight number 8 Padding right of the element in pagination (number).
fontFamily string Lato Regular Font family of the element in pagination (number).
fontSize number 14 Font size of the element in pagination (number).
lineHeight number 24.5 Line height of the element in pagination (number).
activeFontWeight number Font weight of the active element in pagination (number).
activeTextColor string #2dbecd Color of active element in pagination (number).
inactiveTextColor string #1b1b25 Color of inactive element in pagination (number).
activeBackgroundColor string #2dbecd Background color of active element in pagination (number).
disabled bool false Specify when component is disabled.
Progress Bars

Progress Bars

Progress bars indicate the advance of a certain interaction or process. Common use cases are page scrolling or processes like check out or registration.

Linear Progress Bar

Use linear progress bars for summarized overviews of a certain progress, as deliveries or timers.

import React, { Component } from 'react'
 
import ProgressBar from '@liquid-design/liquid-design-react-native'
 
class Example extends Component {
    state = {
      progress: 0
  }
 
  handleAdd = () => {
    const { progress } = this.state
 
    const step = 5
    const maxVal = 200
 
    if (progress < maxVal) {
      this.setState({ progress: progress + step })
    }
  }
 
  handleRemove = () => {
    const { progress } = this.state
 
    const step = 5
    const minVal = 0
    if (progress > minVal) {
      this.setState({ progress: progress - step })
    }
  }
 
  render() {
    return (
        <ProgressBar
          progress={this.state.progress}
          type='linear'
        />
      )
    }
  }

Linear Progress Bar

Use circular progress bars for quickly advancing processes, preferrably animated, as installations or scales.

import React, { Component } from 'react'
 
import ProgressBar from '@liquid-design/liquid-design-react-native'
 
class Example extends Component {
    state = {
      progress: 0
  }
 
  handleAdd = () => {
    const { progress } = this.state
 
    const step = 5
    const maxVal = 200
 
    if (progress < maxVal) {
      this.setState({ progress: progress + step })
    }
  }
 
  handleRemove = () => {
    const { progress } = this.state
 
    const step = 5
    const minVal = 0
    if (progress > minVal) {
      this.setState({ progress: progress - step })
    }
  }
 
  render() {
    return (
        <ProgressBar
          progress={this.state.progress}
          type='circle'
        />
      )
    }
  }

Step Progress Bar

Use the step progress bar for processes as setups, checkouts or registrations.

import React, { Component } from 'react'
 
import ProgressBar from '@liquid-design/liquid-design-react-native'
 
class Example extends Component {
    state = {
    currentStep: 0,
    labels: ['Step Label', 'Step Label', 'Step Label', 'Step Label']
  }
 
  handleAddStep = () => {
    const { currentStep, labels } = this.state
 
    const step = 1
    const maxVal = labels.length
    if (currentStep < maxVal) {
      this.setState({ currentStep: currentStep + step })
    }
  }
 
  handleRemoveStep = () => {
    const { currentStep } = this.state
 
    const step = 1
    const minVal = 0
    if (currentStep > minVal) {
      this.setState({ currentStep: currentStep - step })
    }
  }
 
  render() {
    const { labels } = this.state
    return (
       <ProgressBar
          currentPosition={currentStep}
          type='step'
          labels={labels}
      />
      )
    }
  }

Available Props

Prop Type Default Description
inactive bool false Disables Progress Bar.
type string circle Type of Progress Bar to render.
progress number Value of Progress in Circle and Linear Progress Bar (see example).
linearProgressBarWidth number 300 Width of a Linear Progress Bar.
circleSize number 140 Size of a Circle.
circleLabel string Label Label inside a Circle.
currentPosition number Prop for manipulating current position of the Step Progress Bar (see example).
stepCount 4 Number of steps in Step Progress Bar.
labels array Labels for Step Indicators of Step Progress Bar.
disabledStep oneOf([arrayOf(number) number])
primaryProgressBarColor string colors.vibrantGreenDefault Color for default Linear and Circle Progress Bar.
overdueProgressBarColor string colors.richRedDefault Color for overdue Linear and Circle Progress Bar.
overdueProgressBarUnfilledColor string colors.richRedLightest Color for unfilled overdue for Linear and Circle Progress Bar.
inactiveProgressBarColor string colors.sensitiveGreyDarker Color for inactive Linear and Circle Progress Bar.
inactiveProgressBarUnfilledColor string colors.sensitiveGreyDefault Color for inactive Linear and Circle Progress Bar.
customStyle object see below Object for Custom Styles of a Step Progress Bar.
const customStyle = {
  stepIndicatorSize: 24,
  currentStepIndicatorSize: 24,
  separatorStrokeWidth: 2,
  currentStepStrokeWidth: 0,
 
  primaryStepProgressBarColor: colors.vibrantCyanDefault,
  unfinishedStepProgressBarColor: colors.sensitiveGreyDarkest,
  disabledStepProgressBarColor: colors.sensitiveGreyDark,
 
  stepIndicatorFinishedBackgroundColor: colors.white,
  stepIndicatorUnFinishedBackgroundColor: colors.white,
  stepIndicatorCurrentBackgroundColor: colors.white,
  stepIndicatorLabelFontSize: 12,
 
  labelStepProgressBarColor: colors.richBlackDefault,
  labelSize: 12,
  currentStepIndicatorLabelFontSize: 12,
  currentStepLabelColor: labelStepProgressBarColor,
  finishedStepLabelColor: labelStepProgressBarColor,
  unfinishedStepLabelColor: colors.richBlackLight
}
Quotes

Quotes

Quotes are used to display quotation and author. When imagePath is provided, will display a differently styled quote. Default is with small text of quotation.

import React, { Component } from 'react'
 
import { Quote } from '@liquid-design/liquid-design-react-native'
 
const quotation = 'Digital design is like painting, exept the paint never dries.'
 
class Example extends Component {
 
  render() {
    return (
      <Quote
        quotation={quotation}
        author='Author'
        big
      />
    )
  }
}

Available Props

Prop Type Default Description
quotation string (isRequired) Quotation text.
author string (isRequired) Author of quotation.
big bool false Determines when big text is displayed.
small bool true Determines when small text is displayed.
imagePath object If provided, will display a differently styled quote - with image.
borderRadius number 100 Border radius of the image.
width number 250 Width of the whole component.
fontFamily string Lato Black Font family of the quotation text.
fontSize number 22 Font size of the small quotation text (for big is 32).
fontWeight number Font weight of the quotation text.
lineHeight number 27.5 Line height of the small quotation text (for big is 40).
color string #1b1b25 Color of the quotation text.
authorFontFamily string Lato Regular Font family of the author text.
authorFontSize number 12 Font size of the author text.
authorFontWeight number Font weight of the author text.
authorLineHeight number 15 Line height of the author text.
authorColor string #2dbecd Color of the author text.
Ratings

Ratings

Ratings provide an estimated value on the quality of a certain element. They can be interactive for the user.

import React, { Component } from 'react'
 
import { Rating } from '@liquid-design/liquid-design-react-native'
 
class Example extends Component {
 
  render() {
    return (
      <Rating maxIcons={5} />
    )
  }
}

Available Props

Prop Type Default Description
disabled bool false Disable Rating.
maxIcons number Determines amount of icons dispalyed.
dot bool false Determines to display dots instead of Stars.
activeIconColor string #2dbecd Color of the Active icon.
inactiveIconColor string #e9e9ed Color of the Inactive icon.
iconSize number 24 Size of the icon.
rating number 0 Rating Amount.
onIconPress func Function called after icon pressed.
Search Bars

Search Bars

Search bars enable the user to enter a search term or phrase which will then be processed by the search engine.

In order to make this component work, You have to wrap your container in ScrollView and add 'keyboardShouldPersistTaps='handled'' prop.

import React, { Component } from 'react'
import { ScrollView, View } from 'react-native'
import { SearchBar } from '@liquid-design/liquid-design-react-native'
 
const searchOptions = [
  { text: 'Search Result 1' },
  { text: 'Search Result 2' },
  { text: 'Search Result 3' },
  { text: 'Search Result 4' },
  { text: 'Search Result 5' },
  { text: 'Search Result 6' },
  { text: 'Search Result 7' }
]
 
class Example extends Component {
 
  render() {
    return (
      <ScrollView
        contentContainerStyle={{ flex: 1 }}
        scrollEnabled={false}
        keyboardShouldPersistTaps='handled'
      >
        <View>
          <SearchBar
            searchOptions={searchOptions}
            searchProperty='text'
            keyExtractor={item => item.text}
          />
        </View>
      </ScrollView>
    )
  }
}

Available Props

Prop Type Default Description
width number 250 Width of the Search Bar Container with Text Input.
height number 50 Height of the Search Bar Container with Text Input.
backgroundColor string #f8f8fc Background Color of the Search Bar Container with Text Input.
iconSize number 24 Size of the Icon.
iconColor string #e9e9ed Color of the Icon.
iconColorActive string #2dbecd Color of the Icon when active.
placeholder string Search... Placeholder of the Text Input.
placeholderTextColor string #a4a4ae Color of the Placeholder.
inputTextColor string #1b1b25 Color of the input Text.
inputTextFontFamily string Lato-Regular Font Family of the input Text.
inputTextFontSize number 16 Font size of the input Text.
onFocus func () => {} Function called when Text Input is focused.
onBlur func () => {} Function called when Text Input is blurred.
onChangeText func () => {} Function called when Text Input value change.
searchOptions array Array of the options to Search.
keyExtractor func () => {} Custom key extractor for the list.
searchProperty string Property which specify by which property search array.
ItemSeparatorComponent func () => {} Separator of the list.
rowStyle object {} Style of the each row.
rowTitleStyle object {} Style of the row title.
onRowPress func () => {} Function called after row pressed.
listContainerStyle object {} Style of the list container.
searchableRange number 4 Length of the list.
disabled bool false Specify when component is disabled.
ghost bool false Specify transparency of Text Input container.
containerBackgroundColorActive string #f3f3f7 Color of the row background when pressed.
containerBackgroundColor string #f8f8fc Color of the row background.
titleFontFamily string Lato-Regular Font Family of the row title.
titleActiveFontFamily string Lato-Black Font Family of the acitve row title.
titleActiveColor string #2dbecd Color of the active row title.
titleColor string #1b1b25 Color of the row title.
borderBottomColor string #2dbecd Color of the Container bottom border.
listBackgroundColor string #f8f8fc Background color of the list container.
Sliders

Sliders

Slider is a component used to select a single value from a range of values.

import React, { Component } from 'react'
 
import { Slider } from '@liquid-design/liquid-design-react-native'
 
class Example extends Component {
 
  render() {
    return (
      <Slider
        minimumValue={10}
        maximumValue={60}
        step={10}
      />
    )
  }
}

Available Props

Prop Type Default Description
icon bool false If provided, will display a differently styled slider - with icons.
disabled bool false Determines when disabled is displayed.
minimumValue number 0 Initial minimum value of the slider.
maximumValue number 100 Initial maximum value of the slider.
step number 1 Step value of the slider. The value should be between 0 and (maximumValue - minimumValue).
onSlidingStart func Callback that is called when the user starts dragging the slider, regardless if the value has changed.
onSlidingComplete func Callback that is called when the user releases the slider, regardless if the value has changed.
minimumTrackTintColor string #2dbecd The color used for the track to the left of the button.
maximumTrackTintColor string #e9e9ed The color used for the track to the right of the button.
thumbTintColor string #ffffff Background color of the thumb.
thumbStyle object { borderWidth: 1, borderColor: #e9e9ed } By default provided for Android. If provided, will override thumb style on iOS and Android.
trackStyle object If provided, will assign style for the track.
valueFontFamily string Lato Black Font family of the label above thumb.
valueFontSize number 18 Font size of the label above thumb.
valueFontWeight number Font weight of the label above thumb.
valueLineHeight number Line height of the label above thumb.
valueColor string #2dbecd Color of the label above thumb.
labelFontFamily string Lato Regular Font family of the label on the top of slider.
labelFontSize number 12 Font size of the label on the top of slider.
labelFontWeight number Font weight of the label on the top of slider.
labelLineHeight number 15 Line height of the label on the top of slider.
labelColor string #1b1b25 Color of the label on the top of slider.
labelStyle object { marginBottom: 25, marginLeft: 20 } If provided, will override styles for label on Android and iOS.
fontFamily string Lato Regular Font family of the label on left and right of slider.
fontSize number 12 Font size of the label on left and right of slider.
fontWeight number Font weight of the label on left and right of slider.
lineHeight number 15 Line height of the label on left and right of slider.
color string #1b1b25 Color of the label on left and right of slider.
iconSize number 24 Size of the icons on the left and right.
sliderWidth number 250 Width of the slider (track with thumb).
Social Shares

Social Shares

Social shares contain options to share a specific content on social networks or can be used as links to related accounts within the social network / platforms.

import React, { Component } from 'react'
 
import { SocialShare } from '@liquid-design/liquid-design-react-native'
 
class Example extends Component {
 
  state={
    error: false
  }
 
  render() {
    return (
      <SocialShare
        type='facebook'
        large
      />
    )
  }
}

Available Props

Prop Type Default Description
type string Type of Social Share button. One of: facebook, instagram, snapchat, twitter, linkedIn, flickr, slack, mail, salesforce, skype, microsoftTeams, xing.
width number 40 Width of the small button.
height number 40 Height od the small/large button.
large bool false Defines if button is large.
fontFamily string Lato-Bold Font Family of the large button label.
fontSize number 16 Font Size of the large button label.
color string #ffffff Color of the large button label.
onPress func Function Called when button is pressed.
borderRadius number 6 Border Radius value of the button container.
largeWidth number 160 Width of the large button.
iconSize number 24 Size of the icon.
containerStyle object {} Style of the button container.
labelStyle object {} Style of the large button label.
Tables

Tables

Tables are used to put content into a ordered grid. The first line is always the header line and defines the content below for each column. Each column can be sorted.

In order to make all the Tables work, You have to structurize your data as tableData array

In order to make Checkbox Table work and get all the features, You have to pass following props: checkbox, mainCheckboxChecked, onMainCheckboxPress, onCheckboxPress

In order to make Dropdown Table work and get all the features, You have to pass following props: dropdown, mainOptionOpened, onMainOptionOpen, onOptionOpened

In order to make Table with pagination work just pass 'withPagination' and 'paginationItemsPerPage' prop to Table. also Table takes all the props from TablePagination component

const dropdownData = 'We\'ve been around for 350 years, yet our majority owners are still the descendants of Friedrich Jacob Merck,the man who founded our company in Darmstadt, Germany in 1668. Since then, we have become a truly global company with 52,000 employees in 66 countries working on breakthrough solutions and technologies. '
 
const rowsData= [
  {
    rowName: 'Name 02',
    rowLabel: 'Label 02',
    rowInfo: 'Info',
    rowData: ['Lorem Ipsum dolor2', 'Lorem Ipsum dolor2', 'Lorem Ipsum dolor2', 'Lorem Ipsum dolor2', 'Lorem Ipsum dolor2', 'Lorem Ipsum dolor2', 'Lorem Ipsum dolor2'],
    rowDataLabel: ['Lorem Ipsum dolor2', 'Lorem Ipsum dolor2', 'Lorem Ipsum dolor2', 'Lorem Ipsum dolor2', 'Lorem Ipsum dolor2', 'Lorem Ipsum dolor2', 'Lorem Ipsum dolor2'],
    dropdownInfo: dropdownData,
    imageUrl: yourUrl,
    dropdownInfoOpened: true,
    checked: true,
    disabled: false
  },
  {
    rowName: 'Name 01',
    rowLabel: 'Label 01',
    rowInfo: 'Info',
    rowData: ['Lorem Ipsum dolor1', 'Lorem Ipsum dolor1', 'Lorem Ipsum dolor1', 'Lorem Ipsum dolor1', 'Lorem Ipsum dolor1', 'Lorem Ipsum dolor1', 'Lorem Ipsum dolor1'],
    rowDataLabel: ['Lorem Ipsum dolor1', 'Lorem Ipsum dolor1', 'Lorem Ipsum dolor1', 'Lorem Ipsum dolor1', 'Lorem Ipsum dolor1', 'Lorem Ipsum dolor1', 'Lorem Ipsum dolor1'],
    dropdownInfo: dropdownData,
    imageUrl: yourUrl,
    dropdownInfoOpened: false,
    checked: false,
    disabled: true
  },
  {
    rowName: 'Name 04',
    rowLabel: 'Label 04',
    rowInfo: 'Info',
    rowData: ['Lorem Ipsum dolor4', 'Lorem Ipsum dolor4', 'Lorem Ipsum dolor4', 'Lorem Ipsum dolor4', 'Lorem Ipsum dolor4', 'Lorem Ipsum dolor4', 'Lorem Ipsum dolor4'],
    rowDataLabel: ['Lorem Ipsum dolor4', 'Lorem Ipsum dolor4', 'Lorem Ipsum dolor4', 'Lorem Ipsum dolor4', 'Lorem Ipsum dolor4', 'Lorem Ipsum dolor4', 'Lorem Ipsum dolor4'],
    dropdownInfo: dropdownData,
    imageUrl: yourUrl,
    checked: true,
    dropdownInfoOpened: true,
    disabled: false
  },
  {
    rowName: 'Name 03',
    rowLabel: 'Label 03',
    rowInfo: 'Info',
    rowData: ['Lorem Ipsum dolor3', 'Lorem Ipsum dolor3', 'Lorem Ipsum dolor3', 'Lorem Ipsum dolor3', 'Lorem Ipsum dolor3', 'Lorem Ipsum dolor3', 'Lorem Ipsum dolor3'],
    rowDataLabel: ['Lorem Ipsum dolor3', 'Lorem Ipsum dolor3', 'Lorem Ipsum dolor3', 'Lorem Ipsum dolor3', 'Lorem Ipsum dolor3', 'Lorem Ipsum dolor3', 'Lorem Ipsum dolor3'],
    dropdownInfo: dropdownData,
    imageUrl: yourUrl,
    checked: false,
    dropdownInfoOpened: false,
    disabled: false
  },
  {
    rowName: 'Name 06',
    rowLabel: 'Label 06',
    rowInfo: 'Info',
    rowData: ['Lorem Ipsum dolor6', 'Lorem Ipsum dolor6', 'Lorem Ipsum dolor6', 'Lorem Ipsum dolor6', 'Lorem Ipsum dolor6', 'Lorem Ipsum dolor6', 'Lorem Ipsum dolor6'],
    rowDataLabel: ['Lorem Ipsum dolor6', 'Lorem Ipsum dolor6', 'Lorem Ipsum dolor6', 'Lorem Ipsum dolor6', 'Lorem Ipsum dolor6', 'Lorem Ipsum dolor6', 'Lorem Ipsum dolor6'],
    dropdownInfo: dropdownData,
    imageUrl: yourUrl,
    checked: true,
    dropdownInfoOpened: true,
    disabled: false
  },
  {
    rowName: 'Name 05',
    rowLabel: 'Label 05',
    rowInfo: 'Info',
    rowData: ['Lorem Ipsum dolor5', 'Lorem Ipsum dolor5', 'Lorem Ipsum dolor5', 'Lorem Ipsum dolor5', 'Lorem Ipsum dolor5', 'Lorem Ipsum dolor5', 'Lorem Ipsum dolor5'],
    rowDataLabel: ['Lorem Ipsum dolor5', 'Lorem Ipsum dolor5', 'Lorem Ipsum dolor5', 'Lorem Ipsum dolor5', 'Lorem Ipsum dolor5', 'Lorem Ipsum dolor5', 'Lorem Ipsum dolor5'],
    dropdownInfo: dropdownData,
    imageUrl: yourUrl,
    checked: false,
    dropdownInfoOpened: false,
    disabled: false
  },
  {
    rowName: 'Name 08',
    rowLabel: 'Label 08',
    rowInfo: 'Info',
    rowData: ['Lorem Ipsum dolor8', 'Lorem Ipsum dolor8', 'Lorem Ipsum dolor8', 'Lorem Ipsum dolor8', 'Lorem Ipsum dolor8', 'Lorem Ipsum dolor8', 'Lorem Ipsum dolor8'],
    rowDataLabel: ['Lorem Ipsum dolor8', 'Lorem Ipsum dolor8', 'Lorem Ipsum dolor8', 'Lorem Ipsum dolor8', 'Lorem Ipsum dolor8', 'Lorem Ipsum dolor8', 'Lorem Ipsum dolor8'],
    dropdownInfo: dropdownData,
    imageUrl: yourUrl,
    checked: false,
    dropdownInfoOpened: false,
    disabled: false
  },
  {
    rowName: 'Name 07',
    rowLabel: 'Label 07',
    rowInfo: 'Info',
    rowData: ['Lorem Ipsum dolor7', 'Lorem Ipsum dolor7', 'Lorem Ipsum dolor7', 'Lorem Ipsum dolor7', 'Lorem Ipsum dolor7', 'Lorem Ipsum dolor7', 'Lorem Ipsum dolor7'],
    rowDataLabel: ['Lorem Ipsum dolor7', 'Lorem Ipsum dolor7', 'Lorem Ipsum dolor7', 'Lorem Ipsum dolor7', 'Lorem Ipsum dolor7', 'Lorem Ipsum dolor7', 'Lorem Ipsum dolor7'],
    dropdownInfo: dropdownData,
    imageUrl: yourUrl,
    checked: false,
    dropdownInfoOpened: false,
    disabled: false
  }
]
 
const headersData = ['Column 01', 'Column 02', 'Column 03', 'Column 04', 'Column 05', 'Column 06', 'Column 07', 'Column 08']

Default Table

import React, { Component } from 'react'
 
import { Table } from '@liquid-design/liquid-design-react-native'
 
class Example extends Component {
 
  render() {
    return (
      <Table
        type='small'
        rowsData={rowsData}
        headersData={headersData}
      />
    )
  }
}

Checkbox Table

import React, { Component } from 'react'
 
import { Table } from '@liquid-design/liquid-design-react-native'
 
class Example extends Component {
 
  state={
    mainCheckboxChecked: false
  }
 
  render() {
    return (
      <Table
        type='small'
        rowsData={rowsData}
        headersData={headersData}
        checkbox
        mainCheckboxChecked={this.state.mainCheckboxChecked}
        onMainCheckboxPress={() => {
          this.setState({
            mainCheckboxChecked: !this.state.mainCheckboxChecked
          })
        }}
        onCheckboxPress={(value, index, isEveryChecked) => {
          this.setState({
            mainCheckboxChecked: isEveryChecked
          })
        }}
      />
    )
  }
}

Dropdown Table

import React, { Component } from 'react'
 
import { Table } from '@liquid-design/liquid-design-react-native'
 
class Example extends Component {
 
  state={
    mainOptionOpened: false
  }
 
  render() {
    return (
      <Table
        type='small'
        rowsData={rowsData}
        headersData={headersData}
        dropdown
        mainOptionOpened={this.state.mainOptionOpened}
        onMainOptionOpen={() => {
          this.setState({
            mainOptionOpened: !this.state.mainOptionOpened
          })
        }}
        onOptionOpened={(value, index, isEveryOpened) => {
          this.setState({
            mainOptionOpened: isEveryOpened
          })
        }}
      />
    )
  }
}

Image Table

import React, { Component } from 'react'
 
import { Table } from '@liquid-design/liquid-design-react-native'
 
class Example extends Component {
 
  render() {
    return (
      <Table
        type='image'
        tableData={tableData}
      />
    )
  }
}
 

Table with pagination

import React, { Component } from 'react'
 
import { Table } from '@liquid-design/liquid-design-react-native'
 
const itemsPerPage = [10, 20, 40, 80]
 
class Example extends Component {
 
  render() {
    return (
      <Table
        type='image'
        tableData={tableData}
        withPagination
        paginationItemsPerPage={itemsPerPage}
      />
    )
  }
}
 

Available Props

Prop Type Default Description
type string small Type of the Table one of: small, medium, large, image.
rowsData array [] Rows Data that need to be passed to Table component. It have to be structurized like above.
headersData array [] Headers Data that need to be passed to Table component. It have to be structurized like above.
cellWidth number 130 Width of every cell from the Table.
cellStyle array, object {} Style of every cell from the Table.
scrollAreaWidth number 300 Width of the scrolling area.
scrollAreaHeight number 300 Height of the scrolling area.
spaceBetweenColumns number 30 Space between columns.
nameTextFontFamily string Lato-Black Font family of the names from first column.
nameTextFontSize number 14 Font size of the names from first column.
nameTextColor string #1b1b25 Color of the names from first column.
nameTextStyle object, array {} Style of the names from first column.
infoTextFontFamily string Lato-Regular Font family of the info from first column.
infoTextFontSize number 14 Font size of the info from first column.
infoTextStyle object, array {} Style of the info from first column.
headerWidth number 130 Width of the headers.
headerWrapperStyle object, array {} Style of the headers wrappers
headerBackgroundColor string #f8f8fc Background color of the headers.
headerTextStyle object, array {} Style of the headers.
headerTextFontFamily string Lato-Black Font family of the headers.
headerTextFontSize number 14 Font size of the headers.
headerTextColor string `` Color of the headers.
rowTextFontFamily string Lato-Regular Font family of the row text.
rowTextFontSize number 14 Font size of the row text.
rowTextColor string #1b1b25 Color of the row text.
rowBackgroundColor string #ffffff Background color of the rows.
rowTextStyle object, array {} Style of the row text.
arrowIconColor string #2dbecd Color of the arrow icons.
arrowIconSize number 24 Size of the arrow icons.
tableDataBackgroundColor string #ffffff Background color of the table data.
checkbox bool false Specifies if table has checkboxes. Required checkbox to work.
mainCheckboxChecked bool false Specifies if table checkboxes are checked. Required checkbox to work.
onMainCheckboxPress func () => {} Function that triggers when main checkbox pressed. Required checkbox to work.
onCheckboxPress func () => {} Function that triggers when checkbox pressed. Required checkbox to work.
checkboxIconSize number 19 Size of the checkbox icons.
checkboxIconColor string #2dbecd Color of the checkbox icons.
dropdown bool false Specifies if table has dropdowns. Required dropdown to work.
mainOptionOpened bool false Specifies if table dropdowns are opened. Required dropdown to work.
onMainOptionOpen func () => {} Function that triggers when main dropdown pressed. Required dropdown to work.
onOptionOpened func () => {} Function that triggers when dropdown pressed. Required dropdown to work.
imageWidth number 40 Width of the image.
imageHeight number 40 Height of the image.
imageResizeMode string contain Resize mode of the image.
imageBorderRadius number 20 Border Radius of the image.
dropdownInfoTextFontSize number 14 Font Size of the dropdown info.
dropdownInfoTextFontFamily string Lato-Regular Font Family of the dropdown info.
dropdownInfoTextColor string #1b1b25 Color of the dropdown info.
labelTextFontSize number 12 Font size of the labels. Available only for large tables.
labelTextFontFamily string Lato-Regular Font family of the labels. Available only for large tables.
labelTextColor string #1b1b25 Color of the labels. Available only for large tables.
labelTextStyle object, array {} Style of the labels. Available only for large tables.
withPagination bool false Specifies if table pagination component is rendered.
paginationBelow bool false Specifies if table apgination component is rendered below.
paginationItemsPerPage array [10, 20, 40, 80] Items per page array rendered in dropdown.
actualItemsPerPage number 10 Actual number of items visible
currentPage number 1 Actual number of page.
onItemsDropdownRowPressed func `` Function triggered after items per page dropdown row pressed.
onPagesDropdownRowPressed func `` Function triggered after page dropdown row pressed.
wrapperColor string #ffffff Default wrapper background color.
onSortOrderChanged func undefined Function that allows to apply the custom sorting of the data. It can receive 3 arguments - columnSortedAscending (bool), columnUnsorted (bool), index (int - current index of the column).
Table Pagination

Table Pagination

Use the table pagination for long tables that need to be spread across multiple pages.

import React, { Component } from 'react'
 
import { TablePagination } from '@liquid-design/liquid-design-react-native'
 
const itemsPerPage = [10, 20, 40, 80]
class Example extends Component {
 
  render() {
    return (
      <TablePagination
        itemsPerPage={itemsPerPage}
      />
    )
  }
}

Avaliable Props

Prop Type Default Description
width number 600 Width of the pagination component, with table component it takes 100% width of the table.
height number 32 Height of the pagination component.
itemsPerPage array [] Array with numers which specifies items per page.
backgroundColor string #ffffff Background color of the pagination component.
itemsPerPageLabel string Items per page: Label on far left side of the component
itemsPerPageLabelStyle array, object {} Style of the far left side label.
itemsPerPageLabelFontFamily string Lato-Regular Font family of the far left side label
itemsPerPageLabelFontSize number 12 Font size of the far left side label.
itemsPerPageLabelColor string #1b1b25 Color of the far left side label.
itemsPerPageNumberFontSize number 14 Font size of the choosen item per page.
itemsPerPageNumberColor string #2dbecd Color of the choosen item per page.
itemsPerPageNumberStyle array, object {} Style of the choosen item per page.
iconSize number 20 Size of the arrow icon on the left and on the right
iconColor string #2dbecd Color of the arrow icon on the left and on the right
amountAndRangeSplittingLabel string of String which slit amount of items and range of pages.
itemsRangeFontSize number 12 Font size of the items range label.
itemsRangeFontFamily string Lato-Regular Font family of the items range label.
itemsRangeColor string #1b1b25 Color og the items range label.
itemsRangeStyle array, object {} Style of the items range label
pagesRangeFontSize number 12 Font Family of the pages range label.
pagesRangeFontFamily string Lato-Regular Font Family of the pages range label.
pagesRangeColor string #1b1b25 Color of the pages range label.
pagesRangeStyle object, array {} Style of the pages range label.
horizontalIconSize number 24 Size of the Left/Right arrow icon.
horizontalIconColor string #2dbecd Color of the Left/Right arrow icon.
pageNumberFontSize number 14 Font size of the actual page number.
pageNumberFontFamily string Lato-Black Font Family of the actual page number.
pageNumberColor string #2dbecd Color of the actual page number.
pageNumberStyle object, array {} Style of the actual page number.
itemsDropdownWidth number 145 Width of the items per page dropdown.
itemsDropdownBackgroundColor string #ffffff Background color of the items per page dropdown.
itemsDropdownStyle array, object {} Style of the items per page dropdown.
dropdownItemsRowBackroundColorActive string #f3f3f7 Background color of the items per page dropdown row when pressed.
dropdownItemsRowBackroundColor string #ffffff Background color of the items per page dropdown row when pressed.
dropdownItemsRowTextFontFamily string Lato-Regular Font family of the items per page dropdown row label.
dropdownItemsRowTextFontFamilyActive string Lato-Black Font family of the items per page dropdown row label when pressed.
dropdownItemsRowTextColorActive string #2dbecd Color of the items per page dropdown row label when pressed.
dropdownItemsRowTextColor string #1b1b25 Color of the items per page dropdown row label.
dropdownItemsRowWidth number 145 Width of the items per page dropdown row.
dropdownItemsRowHeight number 40 Height of the items per page dropdown row.
dropdownItemsRowTextFontSize number 14 Font size of the
onItemsDropdownRowPressed func `` Function triggered after items per page dropdown row pressed.
amountItemsLabel string items String which describe amount of items. Placed on the far left.
amountPagesLabel string pages String which describe amount of pages. Placed on the far right.
itemsAmount number 100 Number of items passed to component/ Number of records passed from array with data.
paginationBelow bool false Specifies if pagination component should be rendered below the table.
actualItemsPerPage number 10 Actual number of items visible.
pagesDropdownWidth number 145 Width of the pages dropdown.
pagesDropdownBackgroundColor string #ffffff Background color of the pages dropdown.
pagesDropdownStyle object, array {} Style of the pages dropdown.
dropdownPagesRowBackroundColorActive string #f3f3f7 Background color of the pages dropdown row when pressed.
dropdownPagesRowBackroundColor string #ffffff Background color of the pages dropdown row.
dropdownPagesRowTextFontFamily string Lato-Regular Font Family of the pages dropdown row label.
dropdownPagesRowTextFontFamilyActive string Lato-Black Font family of the pages dropdown row label when pressed.
dropdownPagesRowTextColorActive string #2dbecd Color of the pages dropdown row label when pressed.
dropdownPagesRowTextColor string #1b1b25 Color of the pages dropdown row label.
dropdownPagesRowWidth number 145 Width of the pages dropdown row.
dropdownPagesRowTextFontSize number 14 Font size of the pages row label.
currentPage number 1 Number of current visible page.
onPagesDropdownRowPressed func `` Function triggered after page dropdown row pressed.
pagesWrapperStyle object, array {} Style of the pages content wrapper.
itemsPerPageWrapperStyle object, array { paddingLeft: 20 } Style of the items content wrapper.
wrapperColor string #ffffff Default wrapper background color.
Tooltips

Tooltips

Tooltips provide additional information, mostly short paragraphs, and can be placed besides all sorts of interface elements.

import React, { Component } from 'react'
 
import Tooltip from '@liquid-design/liquid-design-react-native'
 
class Example extends Component {
 
  render() {
    return (
      <Tooltip
        modalRenderSide='bottom-left'
      />
    )
  }
}

Avaliable Props

Prop Type Default Description
modalRenderSide string bottom-left Specifies on which side render modal: One of: bottom-left, bottom-right, top-left, top-right, left-top, left-bottom, right-top, right-bottom
modalStyle object, array Style of the modal
modalHeight number 165 Height of the Modal
modalWidth number 250 Width of the Modal
modalBackgroundColor string #ffffff Background Color of the Modal
inactiveIconColor string #2dbecd Color of the inactive icon
activeIconColor string #208590 Color of the active icon
iconSize number 24 Size of the Icon
onIconPress func () => {} Function called after icon pressed
headlineType string H6 Type of the Headline component
headlineLabel string Headline Headline text
headlineStyle object, array {} Style of the Headline component
headlineColor string #1b1b25 Color of the Headline component
headlineFontFamily string Lato-Black Font family of the Headline component
paragraphType string XSmall Type of the Paragraph component
paragraphText string Lorem Ipsum.. Text of the Paragraph component
paragraphStyle object, array {} Style of the Paragraph component
paragraphColor string #1b1b25 Color of the Paragraph component
paragraphFontFamily string Lato-Regular Font Family of the Paragraph component
numberOfParagraphLines number 4 Number of lines of Paragraph component

Modules

Date Pickers
Simple date picker

## Simple date picker

Simple date picker is a ready component which has formated data and validation rules for date mark. Simple date picker is build with TextField component.

import React, { Component } from 'react'
 
import { SimpleDatePicker } from 'liquid-design-react-native'
 
class Example extends Component {
  render() {
    return (
      <SimpleDatePicker />
    )
  }
}

### Available Props

Prop Type Default Description
disabled bool false If true will display component with disabled state.
withLabel bool true If true will display label element above text input.
labelText string Start date Text of the label element.
errorMessage string * Error Message Text of the error message when incorrect data is provided.
onEndEditing func () => {} Function called after end editing text input.
Single date picker

## Single date picker

Single date picker is a ready component which has formated data, validation rules and calendar for date mark. Single date picker is build with TextField and SmallCalendar components.

import React, { Component } from 'react'
 
import { SingleDatePicker } from 'liquid-design-react-native'
 
class Example extends Component {
  render() {
    return (
      <SingleDatePicker />
    )
  }
}

### Available Props

Prop Type Default Description
disabled bool false If true will display component with disabled state.
withLabel bool true If true will display label element above text input.
labelText string Start date Text of the label element.
errorMessage string * Error Message Text of the error message when incorrect data is provided.
onEndEditing func () => {} Function called after end editing text input.
calendarXPosition number If provided will display calendar element on different position on x axis.
Multi date picker

## Multi date picker

Multi date picker is a ready component which has formated data, validation rules and calendar for date mark. Multi date picker is build with TextField and SmallCalendar components.

import React, { Component } from 'react'
 
import { MultiDatePicker } from 'liquid-design-react-native'
 
class Example extends Component {
  render() {
    return (
      <MultiDatePicker />
    )
  }
}

### Available Props

Prop Type Default Description
disabled bool false If true will display component with disabled state.
withLabel bool true If true will display label element above text input.
labelStartText string Start date Text of the label element (first input).
labelEndText string End date Text of the label eleme (second input).
errorMessage string * Error Message Text of the error message when incorrect data is provided.
onEndStartEditing func () => {} Function called after end editing text input (start date).
onEndEndStartEditing func () => {} Function called after eediting text input (end date).
firstDay string 1 (Monday) Start of the week.
FAQs

FAQs

FAQ is a ready module which enables to make headline with description and sections of questions. FAQ contains Headline and Accordion components.

import { FAQ } from '@liquid-design/liquid-design-react-native'
 
const MULTIPLE_SECTIONS = [
  {
    title: 'Section Title',
    content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam  eiusmod tempor incididunt ut labore et dolore magna aliqua.'
  },
  {
    title: 'Section Title',
    content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam  eiusmod tempor incididunt ut labore et dolore magna aliqua.'
  },
  {
    title: 'Section Title',
    content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam  eiusmod tempor incididunt ut labore et dolore magna aliqua.'
  }
]
 
class Example extends Component {
  state = {
    activeSections: []
  }
 
  setSections(sections) {
    this.setState({ activeSections: sections })
  }
 
  render() {
    return (
      <FAQ
        expandMultiple
        onChange={this.setSections.bind(this)}
        activeSections={this.state.activeSections}
        sections={MULTIPLE_SECTIONS}
        headlineText='Headline Title'
        description='Do you have any questions?'
      />
    )
  }
}

Available Props

Prop Type Default Description
expandMultiple bool false If provided, will display a multiple accordions.
activeSections [number] string
sections array (isRequired) An array of sections passed to the render methods.
initiallyActiveSection number If provided, will open chosen section on start.
onChange func Called everytime when one of sections is clicked.
width number 335 Width of the accordion.
duration number 200 Duration of open/hide content animation.
onAnimationEnd func () => {} Callback that is called when the animation is ended.
disabled bool false Determines when disabled is displayed.
borderColor string #e9e9ed The color used for the borders on top and bottom.
titleFontFamily string Lato Black Font family of section title.
titleFontSize number 16 Font size of the section title.
titleFontWeight number Font weight of the section title.
titleLineHeight number 20 Line height of the section title.
inactiveTitleColor string #1b1b25 Color of the section title when section is closed.
activeTitleColor string #2dbecd Color of the section title when section is opened.
contentFontFamily string Lato Regular Font family of section content.
contentFontSize number 14 Font size of the section content.
contentFontWeight number Font weight of the section content.
contentLineHeight number 24.5 Line height of the section content.
contentColor string #1b1b25 Color of the section content.
contentWidth string 100% Width of the section content.
contentHeight number 125 Height of the section content, will remove word-break effect when animating (iOS only).
moduleWidth string 100% Width of the Headline and description section.
descriptionFontFamily string Lato Regular Font family of the description.
descriptionFontSize number 14 Font size of the description.
descriptionLineHeight number 24.5 Line height of the description.
descriptionColor string #a4a4ae Color of the description.
description string Text of the description under Headline.
headlineType string H3 Type of the Headline component.
headlineText string Headline Insert Text of the Headline.
headlineColor string #a4a4ae Color of the Headline.
Footers

Footers

Footer is a ready module which enables to make headline with labels and icons. Footer contains Headline component. Labels and icons can be clickable.

import { Footer } from '@liquid-design/liquid-design-react-native'
 
class Example extends Component {
 
  render() {
    return (
      <Footer
        labels={[
          { key: 1, title: 'Label Text', onPress: () => {} },
          { key: 2, title: 'Label Text', onPress: () => {} },
          { key: 3, title: 'Label Text', onPress: () => {} }
        ]}
      />
    )
  }
}

Available Props

Prop Type Default Description
labels arrayOf(shape({ key: number, title: string, onPress: func})) (isRequired) Array of label objects.
labelFontFamily string Lato Regular Font family of the label.
labelFontSize number 12 Font size of the label.
labelLineHeight number 15 LineHeight of the label.
labelColor string #1b1b25 Color of the label.
headlineType string H4 Type of the headline element.
headlineText string Get started today(...) Text of the headline element.
lineColor string #d5d5d9 Color of the line element.
lineHeight number 1 Height of the line element.
lineWidth string 100% Width of the line element.
footerWidth number device width Width of the whole footer.
backgroundColor string #f8f8fc Background color of the whole footer.
primaryIconName string placeholder Name of the primary icon (single on left).
primaryIconSize number 24 Size of the primary icon (single on left).
primaryIconColor string #1b1b25 Size of the primary icon (single on left).
onPrimaryIconPress func () => {} Called everytime when primary icon (single on left) is clicked.
secondaryLeftIconName string placeholder Name of the secondary icon (left).
secondaryLeftIconSize number 24 Size of the secondary icon (left).
secondaryLeftIconColor string #1b1b25 Size of the secondary icon (left).
onSecondaryLeftIconPress func () => {} Called everytime when secondary icon (left) is clicked.
secondaryCenterIconName string placeholder Name of the secondary icon (center).
secondaryCenterIconSize number 24 Size of the secondary icon (center).
secondaryCenterIconColor string #1b1b25 Size of the secondary icon (center).
onSecondaryCenterIconPress func () => {} Called everytime when secondary icon (center) is clicked.
secondaryRightIconName string placeholder Name of the secondary icon (right).
secondaryRightIconSize number 24 Size of the secondary icon (right).
secondaryRightIconColor string #1b1b25 Size of the secondary icon (right).
onSecondaryRightIconPress func () => {} Called everytime when secondary icon (right) is clicked.
Forms

Forms

Forms can be constructed with TextField, Checkbox, Button, and Dropdown elements. The logic of the forms is up to the user, this library provides just the UI components.

import React, { Component } from 'react'
 
import {
  TextField,
  Checkbox,
  GhostButton,
  Button
} from '@liquid-design/liquid-design-react-native'
 
class Example extends Component {
 
  render() {
    return (
      <View>
        <TextField
          placeholder="john.doe@internet.com"
          textInputLabel="E-Mail Adress"
        />
        <TextField
          placeholder="Enter your password"
          textInputLabel="Password"
        />
        <Checkbox
          checked={false}
          title="Keep me logged in" />
        <GhostButton title="Cancel" />
        <Button
          title="Login"
        />
      </View>
    )
  }
}
Light Boxes

Light Boxes

Light Box is a component to create a fancy box for content utilizing the Modal component.

import React, { Component } from 'react'
 
import LightBox from '@liquid-design/liquid-design-react-native'
 
class Example extends Component {
  state = {
    visibleModal: null
  }
 
  renderButton = (text, onPress) => (
    <Button
      title={text}
      onPress={onPress}
    />
  )
 
  render() {
    return (
      {this.renderButton('Default modal', () =>
      this.setState({ visibleModal: 1 }))}
      <LightBox
        isVisible={this.state.visibleModal === 1}
        contentText='Example text'
        buttonText='Accept'
        cancelText='Cancel'
        onCancelPress={() => this.setState({ visibleModal: null })}
      />
      }
    )
  }
}

Available Props

Prop Type Default Description
isVisible bool false Determines when Light Box is displayed.
needScroll bool false If provided, will display a Light Box in ScrollView.
duration number 200 Duration of animation on show/close Modal.
backdropColor string #1b1b25 Color of the backdrop.
backdropOpacity number 0.7 Opacity of the backdrop.
onBackButtonPress func () => {} Function called on request close.
withGraphic bool false If provided, will display a different styled component - with image.
withCta bool false If provided, will display a different styled component - with buttons.
withTextField bool false If provided, will display a different styled component - with text field.
headerTitle string Header Label Title of the header.
headlineText string Headline Text Headline of the content.
headlineType string H3 Type of the headline.
contentText string Lorem ipsum dolor sit amet, consetetur sadipscing elitr(...) Text of the content.
buttonText string Button Text Title of the primary button.
cancelText string Cancel Text Title of the secondary button.
onButtonPress func () => {} Function called when primary button is pressed.
onCancelPress func () => {} Function called when secondary button or closing icon is pressed.
placeholder string Add Placeholder Text here Text of the placeholder in modal with TextField.
errorMessage string Error Message Text of the error message in modal with TextField.
onError bool false Determines when error message is displayed in modal with TextField.
onChangeText func () => {} Function called when text is changes in modal with TextField.
onFocus func () => {} Function called when TextField is focused in modal with TextField.
onBlur func () => {} Function called when TextField is blurred in modal with TextField.
modalWidth number 350 Width of the modal.
imagePath node Path of the image in modal with Graphic.
contentBgColor string #ffffff Background color of the modal content.
contentColor string #1b1b25 Color of the modal content text.
contentFontFamily string Lato Regular Font family of the modal content text.
contentFontWeight number Font weight of the modal content text.
contentFontSize number 16 Font size of the modal content text.
contentLineHeight number 28 Line height of the modal content text.
headerBgColor string #f8f8fc Backgroud color of the modal header.
headerTitleColor string #1b1b25 Color of the modal header title.
headerFontFamily string Lato Regular Font family of the modal header title.
headerFontWeight number Font weight of the modal header title.
headerFontSize number 12 Font size of of the modal header title.
headerLineHeight number 15 Line height of the modal header title.
iconSize number 20 Size of the closing X icon.
Headers

Headers

Header is a ready module which enables to make the intros of every screen. Header contains Search bar component.

import { Header } from '@liquid-design/liquid-design-react-native/src'
 
const searchOptions = [
  { text: 'Search Result 1 Search Result 1 Search Result 1' },
  { text: 'Search Result 2' },
  { text: 'Search Result 3' },
  { text: 'Search Result 4' },
  { text: 'Search Result 5' },
  { text: 'Search Result 6' },
  { text: 'Search Result 7' }
]
 
class Example extends Component {
 
  constructor(props) {
    super(props)
    this.state = {
      searchTermDefault: ''
    }
  }
 
  render() {
    return (
      <Header
        searchOptions={searchOptions}
        searchProperty='text'
        searchTerm={this.state.searchTermDefault}
        onChangeText={(text) => {
        this.setState({ searchTermDefault: text })
        }}
      />
    )
  }
}

Avaliable Props

Prop Type Default Description
headerWidth number device width Width of the whole Header module.
headerHeight number 60 Height of the whole Header module.
backgroundColor string #2dbecd Background color of the whole Header module.
logoColor string #ffc832 Color of the logo element.
searchOptions array (isRequired) Array of the options to search.
searchTerm string Search term for search bar component.
onChangeText func () => {} Function called when text is changed in Search bar.
searchProperty string (isRequired) Property which specify by which property search array.
withIcons bool false If provided, will display a Header with icons.
withButton bool false If provided, will display a Header with button.
withLabel bool false If provided, will display a Header with labels.
iconsColor string #ffffff Colors of the icons in Header with icons.
buttonIconName string placeholder Name of the icon in Header with button.
leftIconName string bell Name of the left icon in Header with icons.
middleIconName string information1 Name of the middle icon in Header with icons.
rightIconName string settings Name of the right icon in Header with icons.
onLeftIconPress func () => {} Function called when left icon is pressed in Header with icons.
onMiddleIconPress func () => {} Function called when middle icon is pressed in Header with icons.
onRightIconPress func () => {} Function called when right icon is pressed in Header with icons.
labelFontFamily string Lato Regular Font family of the label text in Header with labels.
labelFontSize number 12 Font size of the label text in Header with labels.
labelLineHeight number 15 Line height of the label text in Header with labels.
labelColor string #ffffff Color of the label text in Header with labels.
label1 string Text of the first label in Header with labels.
label2 string Text of the second label in Header with labels.
Navigations

Navigations

Navigation is a ready module that allows to create a drawer with customizable elements

import React, { Component } from 'react'
 
import Navigation from '@liquid-design/liquid-design-react-native'
 
class Example extends Component {
  constructor(props) {
    super(props)
    this.state = {
      open: true,
      tabs: [
        {
          title: 'title-01',
          icon: 'placeholder',
          label: 'Nav title',
          contentView: this.contentView()
        },
        {
          title: 'title-02',
          icon: 'placeholder',
          label: 'Nav title',
          contentView: this.contentView()
        },
        {
          title: 'title-03',
          icon: 'placeholder',
          label: 'Nav title',
          contentView: this.contentView()
        }
      ]
    }
  }
 
  contentView = () => (
    <View>
      <Text> Tab content </Text>
    </View>
  )
 
  onDrawerClose = () => {
    this.setState({ open: false })
  }
 
  render() {
    const { tabs, open } = this.state
    return (
      <Navigation
        imagePath='src/assets/image.png'
        title='Title 01'
        tabs={tabs}
        open={open}
        onClose={this.onDrawerClose}
      />
    )
  }
}

Avaliable Props

Prop Type Default Description
imagePath node Path to the image - visible in the bottom part of the navigation.
title string Title of the menu - visible in the bottom part of the navigation.
tabs array [] Array of navigation items - objects with title, icon and label.
isOpen bool false Value that determines whether the navigation is opened or closed.
openMenuOffset number 60 Value that determines the offset of the menu.
edgeHitWidth number 300 Value that determines the width of the swipable region.
bounceBackOnOverdraw bool false Value that tells whether to bounce back when overswiped or not.
onClose func Function that determines what should happen when the navigation closes.
navigationBody.navigationFontFamily string Default bold font Font family of the navigation
navigationBody.navigationFontSize number 7.5 Font size of the navigation
navigationBody.navigationFontColor string '#a4a4ae' Font color of the navigation
navigationBody.navigationLineHeight number 9.4 Line height of the navigation
navigationBody.activeTabFontFamily string Default bold font Font family of the active tab
navigationBody.activeTabFontColor string '#2dbecd' Font color of the active tab
navigationBody.tabFontFamily string Default regular font Font family of the inactive tab
navigationBody.tabFontSize number 10 Font size of the inactive tab
navigationBody.tabFontColor string '#a4a4ae' Font color of the inactive tab
navigationBody.tabLineHeight number 9.4 Line height of the inactive tab
navigationBody.iconColor string '#a4a4ae' Color of inactive icon
navigationBody.iconSize number 24 Size of icons
navigationBody.activeIconColor string '#2dbecd' Color of active icons
Small Calendars

Small Calendars

Small Calendar is a ready module that allows to create a custom calendar with appointments

import React, { Component } from 'react'
 
import SmallCalendar from '@liquid-design/liquid-design-react-native'
 
class Example extends Component {
  render() {
    return (
      <SmallCalendar
        firstDay='2018-10-10'
        appointments={{
          '2018-10-06': { time: '16:00', description: 'dinner with Mom' }
        }}
      />
    )
  }
}

Avaliable Props

Prop Type Default Description
firstDay string 1 (Monday) Start of the week.
appointments object {} Object of appointments where keys are date strings in ISO 8601 format and values are objects of the shape: { time: '16:00', description: 'dinner with Mom' }.

Contributing

see CONTRIBUTING.md

Technology stack

Technology Version
React 16.3.2
React Native 0.50.0

Keywords

Install

npm i @liquid-design/liquid-design-react-native

DownloadsWeekly Downloads

4

Version

1.0.5

License

SEE LICENSE IN LICENSE.md

Unpacked Size

15.5 MB

Total Files

332

Last publish

Collaborators

  • avatar