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

Dropdown

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