List Items

React Native Store 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