npm:react-native-awesome-card

README

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 |

Usage no npm install needed!