List Items

React Native Food Ordering App UI template some components to render different kinds to list view item which are developed after considering some UI/UX case for store applications.

ListItem

Sample

<ListItem 
    icon={<Icon name={global.nextIcon} color={config.defaultFontColor} size={18} />} 
    onPress={() => console.log('do something ...')}
>
    <P nomargin={true}>Edit Profile</P>
</ListItem>

<ListItem 
    icon={<Icon name={global.nextIcon} color={config.defaultFontColor} size={18} />} 
    onPress={() => console.log('do something ...')}
>
    <P nomargin={true}>Transaction History</P>
</ListItem>

<ListItem 
    icon={<Icon name={global.nextIcon} color={config.defaultFontColor} size={18} />} 
    onPress={() => console.log('do something ...')}
>
    <P nomargin={true}>Login</P>
</ListItem>

Props	Required	Type
icon	No	Component
onPress	Yes	Callback

Output

SimpleListItem

Sample

<SimpleListItem onPress={() => this.props.navigation.navigate('OrderDetail', {order: item})}>    <Row>        <Column flex={0.5}>          <P style={{ color: config.primaryColor }}>Order # SO-10003</P>					<Sm style={{ color: '#888888', marginBottom: 0 }}>2019/12/12</Sm>        </Column>        <Column flex={0.5} align={'flex-end'}>            <P style={{ fontWeight: 'bold' }}>$1000</P>					<View style={{flexDirection: 'row'}}>						<Icon name={"x"} />						<Sm style={{ color: '#888888' }}>Cancelled</Sm>					</View>        </Column>    </Row></SimpleListItem>

Props	Required	Type
onPress	Yes	Callback

Output

SelectableList

Sample

<SelectableList 		onSelect={(item) => this.setState(			{selectedFilters: 				{					...this.state.selectedFilters, 					...{color: item.id}				}			}		)}		isSelected={(item) => this.state.selectedFilters.color == item.id}		items={sample_data.filters.colors}/>

Props	Required	Type
onSelect	Yes	Function
isSelected	Yes	Function
items	Yes	Array

Output