Card

React Native Store UI template provides flexibility to create different kinds of card elements

Simple Card Item

<Card>
	<CardContent padding={15}>
		<H3>React Tutorial For Beginners</H3>
		<P>This tutorial is considerably created for those who have at least basic knowledge of HTML, CSS, JavaScript, ES6, DOM, node, and npm.</P>
	</CardContent>
	<CardFooter padding={15}>
		<Left>
			<Btn label={'Read more'} onPress={() => console.log("do something")} />
		</Left>
		<Right></Right>
	</CardFooter>
</Card>

Output

Card Item With Image

Sample

<Card>
	<CardImage 
		source={{uri: 'http://intelvue.com/demo/app-template/item-3.jpg'}}
	/>
	<CardContent>
		<H3>Card Title ...</H3>
		<P>Card Description ...</P>
	</CardContent>
	<CardFooter>
		<Left><P>Left</P></Left>
		<Right><P>Right</P></Right>
	</CardFooter>
</Card>

Output

Product Grid Sample

<Card style={this.props.style} onPress={() => this.props.onPress(this.props.item)}>
	<CardImage 
		source={{uri: this.props.item.images[0]}}
	/>
	<CardContent>
		<View>
			<Sm>{this.props.item.name}</Sm>
		</View>
	</CardContent>
	<CardFooter>
		<Left >
			<View>
				<StarRating rating={this.props.item.rating} />
				<Price price={this.props.item.price} specialPrice={this.props.item.special_price} />
			</View>
		</Left>
		<Right>
			<Touchable onPress={() => {}} style={[config.style.iconBtn, config.style.gridCartBtn]}>
				<Icon name={'shopping-cart'} size={20} color={config.style.iconBtnColor} />
			</Touchable>
		</Right>
	</CardFooter>
</Card>

Product Grid Output

Components

Card

Card is a implement on top of Touchable component which accept all props that apply on React Native TouchableOpacity

Props	Required
onPress	Yes
style	no

CardContent

Props	Required	Default
padding	No	10
style	No

CardFooter

Props	Required	Default
padding	No	10
style	No

CardImage

CardImage is implemented on top of React Native Image component

Props	Required
style	No