Components

Components are stateless rect elements. They render what you pass to them and call function as callbacks. Components are essential part of the app. Here's the list of available components:

Button

Regular Button can be rendered like this:

<Button
style={styles.demoButton}
primary
caption="Button"
onPress={this.buttonClicked}
/>

Button component takes the following props:

Prop name

Type

Description

primary

boolean

Make button BG primary colored

secondary

boolean

Make button BG secondary colored

bordered

boolean

Button without bg, but with borders

rounded

boolean

Adds border radius to componen

small

boolean

Renders small button

icon

‚Äč

Icon for the button

caption

string

Button's label

onPress

function

onPress handler

bgColor

string

Background color

textColor

string

Text color

bgGradientStart

string

Color of gradient bg start

bgGradientEnd

string

Color of gradient bg end

action

boolean

Renders action button

loading

boolean

Renders loading indicator

Radio Group

Renders a tab-style radio group.

Can be rendered:

<RadioGroup
style={styles.demoItem}
items={['One', 'Two', 'Three']}
selectedIndex={props.radioGroupsState[0]}
onChange={index => props.setRadioGroupsState({ ...props.radioGroupsState, 0: index })}
/>

Component's props:

Prop name

Type

Description

items

array[string]

Items to render on the Radio button

secondary

boolean

Renders secondary-styles radio group

rounded

boolean

Renders radio group with rounded corners

underline

boolean

Renders underline-styled radio button

onChange

function

Called when the button in the group is clicked

selectedIndex

number

Index of selected item

Use the dropdown this way:

<Dropdown
onSelect={() => {}}
items={['option 1', 'option 2']}
/>

Dropdown's props:

Prop name

Type

Description

onSelect

function

Callback that called after the item is selected

items

array[string]

Items for the dropdown