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

Screens

Last updated 2 years ago

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