@zcorefinance/react-native-credit-card-display
    TypeScript icon, indicating that this package has built-in type declarations

    0.3.11 • Public • Published

    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

    Install

    npm i @zcorefinance/react-native-credit-card-display

    DownloadsWeekly Downloads

    2

    Version

    0.3.11

    License

    MIT

    Unpacked Size

    2.99 MB

    Total Files

    52

    Last publish

    Collaborators

    • zcorefinance