rn-credit-card-ui v1.1.0

rn-credit-card-ui :

A Credit Card React-Native UI component, it uses react-native-flip-card to flip the UI component smoothly and creditcardutils to validate the given credit card number.

If no type was detected (invalid number), no logo will be shown.

Screens :

Installation :

npm i rn-credit-card-ui
# or if you're using yarn : 
yarn add rn-credit-card-ui

Usage :

import CreditCardUI from "rn-credit-card-ui";

export default function Example(){
    return (
        <CreditCardUI 
            cardNumber="4242424242424242"
            cvc="123"
            holderGender="miss"
            holderName="Maria James"
            expiryDate="11/23"
            bankName={"Bank of Sky"}
            bankLogo={{
                uri:"https://upload.wikimedia.org/wikipedia/commons/thumb/6/6f/Earth_Eastern_Hemisphere.jpg/1024px-Earth_Eastern_Hemisphere.jpg"
            }}
            bankLogoStyle={{
                borderRadius:100
            }}
            isCardNumberShown={false}
            isHorizontalFlipEnabled={true}
            isVerticalFlipEnabled={false}
            dateLabel="VALID"
        />
    )
}

You can also check a more complete example from here

Props :

Contribution :

Feel free to contribute to this project by sending your custom PR here.