1.0.9 • Published 5 years ago

react-native-awesome-card v1.0.9

Weekly downloads
3
License
ISC
Repository
github
Last release
5 years ago

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

PropTypeDefaultDescription
colorstring (color format)'white'Color Of Card
radiusint4radius of card's corners
marginint10margin props is the margin of card which calculates best size for different devices with different resolutions
paddingint15padding props is the padding of card which calculates best size for different devices with different resolution
shadowColorstring (color format)'#000000'(IOS ONLY)
shadowOpacityfloat0.35(IOS ONLY)
shadowRadiusint4(IOS ONLY)
shadowHeightint0(IOS ONLY)
shadowWidthint1(IOS ONLY)
androidElevationint4(Android ONLY) it is an alternative of shadow props for android ( you have less controll on card shadow in Android )

Screenshots

IOSAndroid
iosandroid