react-native-awesome-card

1.0.9 • Public • Published

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
ios android

Package Sidebar

Install

npm i react-native-awesome-card

Weekly Downloads

4

Version

1.0.9

License

ISC

Unpacked Size

9.85 kB

Total Files

8

Last publish

Collaborators

  • s-ebrahimi