Skip to content

Latest commit

 

History

History
65 lines (49 loc) · 5.24 KB

README.md

File metadata and controls

65 lines (49 loc) · 5.24 KB
Raw

react-native-credit-card-display

Credit Card Component for React Native -- Display Only. At the moment, it only supports Android and iOS, since react-native-flip-card only supports those two platforms.

Installation

npm install react-native-credit-card-display

or

yarn add react-native-credit-card-display

Usage

import CreditCardDisplay from 'react-native-credit-card-display';

// ...

return (
  <CreditCardDisplay
    number={4242424242424242}
    cvc={123}
    expiration="04/21"
    name="John J. Doe"
    since="2004"
  />
);

Props

Prop Description Default Value Required Notes
number Number to display on the front of the card undefined Yes can be a number or a string.
name Name to display on the front of the card undefined Yes
expiration Expiration Date to display on the front of the card undefined Yes if passed a number (e.g. 0621), it will be formatted, otherwise displayed as given.
cvc CVC to display on the back of the card undefined Yes can be a number or a string.
since Year for Customer Since undefined no can be a number or a string.
flipped Is the card flipped? false no Use this to programmatically toggle the card.
friction Friction for the card flip 6 no I couldn't figure out what this does, but I'm just passing it to react-native-flip-card if anyone wants it.
fontSize Base font size to use 20 no will scale all displayed text
fontColor Color to use for the numbers and letters #FFFFFF no
height Height for card 190 no
width Width for card 300 no
cardStyles Additional styles to apply to the component from react-native-flip-card {} no
frontStyles Additional styles to apply to the front of the card {} no
backStyles Additional styles to apply to the back of the card {} no
frontImage Alternate image to use for the front of the card purple card image no
backImage Alternate image to use for the back of the card purple card image no
borderRadius Border Radius to use on the images 20 no

Note: flipped only toggles the flip, not sets it absolutely (this is a limitation of the library used, react-native-flip-card).

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT