react-native-awesome-card

1. Install

npm install --save react-native-awesome-card

2. Usage

Basic usage

import {AwesomeCard} from 'react-native-awesome-card';
...
<AwesomeCard>
    <View>
	    <Text>
		    Example
	    </Text>
    </View>
</AwesomeCard>
...

Custom usage

import {AwesomeCard} from 'react-native-awesome-card';
...
<AwesomeCard  
	color={'#aad34f'}  
	margin={10}  
	padding={10}  
	radius={4}  
	shadowColor={'#aad34f'} // IOS only  
	shadowOpacity={0.4}  // IOS only 
	shadowRadius={4}  // IOS only 
	shadowHeight={0}  // IOS only 
	shadowWidth={1}  // IOS only 
	androidElevation={6}  // Android only 
	>  
	 <View>  
		 <Text>Example</Text>  
	 </View>  
</AwesomeCard>
...

Props

Prop	Type	Default	Description
color	string (color format)	'white'	Color Of Card
radius	int	4	radius of card's corners
margin	int	10	margin props is the margin of card which calculates best size for different devices with different resolutions
padding	int	15	padding props is the padding of card which calculates best size for different devices with different resolution
shadowColor	string (color format)	'#000000'	(IOS ONLY)
shadowOpacity	float	0.35	(IOS ONLY)
shadowRadius	int	4	(IOS ONLY)
shadowHeight	int	0	(IOS ONLY)
shadowWidth	int	1	(IOS ONLY)
androidElevation	int	4	(Android ONLY) it is an alternative of shadow props for android ( you have less controll on card shadow in Android )

Screenshots

IOS	Android