Form

Input

React Native Store UI Template provides 2 types of input element to receive user input. These components are built on top of react native TextInput and accept all of TextInput props.

FloatingLabelInput

FloatingLabelInput accepts all props as react native TextInput along with 1 additional required props label to set label of input field.

Props	Type	Required
label	String	Yes
value	String	Yes

Sample

import React from 'react';
import { Wrapper, Container, FloatingLabelInput } from '../utils';

class App extends React.Component {
    render() {
        return (
            <Wrapper>
                <Container>
                    <FloatingLabelInput 
    										label="Name"  
    										onChangeText={(text) => this.setState({name: text})}
    										value={this.state.name}
    									/>
                </Container>
            </Wrapper>
        );
    }
}

Output

LabelIconInput

LabelIconInput accepts all props as react native TextInput along with 2 additional required props label and icon to set label and icon of input field.

Props	Type	Required
label	String	Yes
value	String	Yes
icon	String	Yes
afterInput	Component	No

Icons name can be taken from feather icons website.

Sample

import React from 'react';
import { Wrapper, Container, LabelIconInput } from '../utils';

class App extends React.Component {
    render() {
        return (
            <Wrapper>
                <Container>
                    <LabelIconInput 
    										label="Name"  
    										onChangeText={(text) => this.setState({name: text})}
    										value={this.state.name}
    										icon={'user'}
    								/>
                </Container>
            </Wrapper>
        )
    }
}

Output

Picker

React Native Store UI Template provides a custom picker Picker with auto search functionality same for both android and iOS. It can display with other form elements like FloatingLabelInput as it contains the same styles

Props	Type	Required	Description
label	String	Yes
value	String	Yes
items	Array	Yes	Every item of array must contain a plain object as following example: icon can be {"label": "United States", "icon": null} icon can be any component of null
afterInput	Component	No
onChangeItem	Callback	No	Accepts item parameter as selected item

Sample

import React from 'react';
import { Wrapper, Container, Picker } from '../utils';

class App extends React.Component {
    render() {
        return (
            <Wrapper>
                <Container>
                     <Picker 
    												label="Country"  
    												onChangeItem={(item) => this.setState({country: item.label})}
    												value={this.state.country}
    												items={countries}
    							    />
                </Container>
            </Wrapper>
        )
    }
}

Output

Checkbox

React Native Store UI Template provides a checkbox component including 2 props as follow

Props	Type
selected	Boolean
onPress	Callback

Sample

import React from 'react';
import { Wrapper, Container, Checkbox } from '../utils';

function App() {
    return (
        <Wrapper>
            <Container>
                 <Checkbox 
												onPress={() => this.setState({field: !this.state.field})}
							          selected={this.state.field === true}
							    />
            </Container>
        </Wrapper>
    )
}