react-native-controls

Components:

• Grid
• CodeInput
• Select
• MultiSelect

Grid

Based on react-native FlatList component, is called to simplify lazy load implementation

Prop	Type	Required	Default	Description
multi	bool		false	If true Component is MultiSelect, else Select
data	array	+		Data to show
loadMoreData	function			Called when additional data should be load. Input params: { offset: number }
refreshData	function			Called when data should be re-load
indicatorColor	string		blue
loadDataOnInit	bool		false	Should call refreshData on mount
propagateDataErrors	bool		false	Should encapsulate error handling in directly in component
renderError	function			Custom error component
renderLoading	function			Custom loading component
renderEmpty	function			Custom empty list component
isLoading	bool		false	Show loading indicator
isRefreshing	bool		false	Show refreshing indicator
dataError	any		null

Basic usage

import { Grid } from "react-native-controls";

const data = [
    { id: 'item1', value: 5 },
    { id: 'item2', value: 11 },
    ...
];

<Grid
    data={data}
    keyExtractor={item => item.id}
    renderItem={({ item }) => <Text>{item.value}</Text>}
/>;

CodeInput

Set of inputs optimized for SMS codes.

Prop	Type	Required	Default	Description
size	number	+	4	Count of inputs
initialValue	string			Initial value for input (code: string)
onChange	function			Called on value change. Structure: { valid: bool, code: string, raw: array }
renderSeparator	function			Render custom separator items. Input params: { index: number }

Basic usage

import { CodeInput } from 'react-native-controls';

<CodeInput size={5} onChange={({ code }) => this.setState({ code })} />;

Select

Select based on modal

Prop	Type	Required	Default	Description
items	array	+		Select options
selected	any		null	Selected items
onSelect	function			Called on selection change with selected items as a param
onItemPress	function			Called on item component press event with item as a param
keyExtractor	function			Should return uniq item identifier
labelExtractor	function			Should return item label to show
renderHeader	function			Render custom select header. Input params: { onCancel: function, onSubmit: function, onSearch: function, onClear: function }
renderDivider	function			Render custom items divider
renderSelectedMarker	function			Render marker for selected items
innerContainerStyles	object
outerContainerStyles	object
itemStyle	object
textStyle	object
ItemsContainer	element		FlatList
disabled	boolean		false
autoClose	boolean		false	Auto close select, after selection item

Basic usage

import { Select } from "react-native-controls";

state = {
    options: [
        { id: 'option1', label: 'Option #1' },
        { id: 'option2', label: 'Option #2' },
        ...
    ]
};

<Select
    items={options}
    selected={selected}
    keyExtractor={item => item.id}
    labelExtractor={item => item.label}
    onSelect={selected => this.setState({
        selected
    })}
/>;

MultiSelect

Based on Select component

Prop	Type	Required	Default	Description
Select props...
selected	array		[]	Selected items
renderHeader	function			Render custom select header. Input params: { onCancel: function, onSubmit: function, onSearch: function, onClear: function, onSelectAll:function }

Basic usage

import { Select } from "react-native-controls";

state = {
    options: [
        { id: 'option1', label: 'Option #1' },
        { id: 'option2', label: 'Option #2' },
        ...
    ]
};

<Select
    multi={true}
    items={options}
    selected={selected}
    keyExtractor={item => item.id}
    labelExtractor={item => item.label}
    onSelect={selected => this.setState({
        selected
    })}
/>;