rn-cc-input

This package contains a React Native component to input a credit card data.
Example of code:

import React from 'react';
import {SafeAreaView} from 'react-native';
import CreditCard from 'rn-cc-input';
import styles from './styles';

export default () => (
    <SafeAreaView>
        <CreditCard style={[{margin:10}, styles.textInput]} />
    </SafeAreaView>
);

The display:

Props

All props are optional. There are some props dealing with style. You must use them carefully to prevent the messed layout.

Name	Type	Description	Default Value
cardHolderText	string	The text that will be displayed on the card holder field	"Card holder name"
ifValidNumberNext	boolean	When you type a value for a field and it reaches the max	false
		length for that field, the focus will move to the next
		field. But sometimes for card number, before it reaches
		the max length, the number has been considered as a
		valid value. If this prop is true, when the number is
		already valid, the focus will move to the next field
		(CVC field) even if it doesn't reach the max length yet.
numberText	string	The text that will be displayed on the card number field	"Card number"
placeholderTextColor	ColorValue	The color of placeholder text on all fields
placeholderTextColorError	ColorValue	The color of placeholder text on all fields when the
		input is invalid
postalCodeText	string	The text that will be displayed on the postal code field	"Postal code"
showCardHolder	boolean	Whether to show the card holder field or not	false
		(true is to show it)
showPostalCode	boolean	Whether to show the postal code field or not	false
		(true is to show it)
style	TextInput style	The style for input. All style properties that are
		applicable to View component will be set to the
		input's top container and the rest to all field inputs
		(card number, expiry date, CVV, holder name and postal
		code)
styleArrow	View style	The style for the scrolling button. If the credit card
		input can't display all fields, there will be the
		scrolling button(s) to slide to the right and to the
		left
styleArrowError	View style	The style for the scrolling button when the input is
		invalid
styleError	TextInput style	The style for input. All style properties that are
		applicable to View component will be set to the
		input's top container and the rest to all field inputs
styleField	TextInput style	The style for all field inputs. It overrides style
		props
styleFieldError	TextInput style	The style for all field inputs when invalid. It
		overrides styleError prop
styleIcon	Image style	The style for the card image

Properties and method of ref object

Properties

• isValid is true if all fields are valid, false if any invalid field.
• value can be null or an object whose the following properties:

    {
        number: string,
        expired: {
            month: number,
            year: number,
        },
        cvc: string,
        cardHolder: string,
        postalCode: string,
    }
  

Method

• setValidationError(isError) is to set the validity status of credit card input. If isError is true then the status is invalid, the input appearance will use the error style specified in props.

The example of usage:

import React from 'react';
import {Button, SafeAreaView} from 'react-native';
import CreditCard from 'rn-cc-input';
import server from './server';

export default () => (
    const cc = React.useRef(null);

    <SafeAreaView>
        {
           //.... Here, there may be the other inputs for transaction 
        }
        <CreditCard ref={cc} />

        <Button title="Send" onPress={async () => {
            const ccInput = cc.current;
            if (ccInput.isValid) { //passes client-side validation
                ccInput.setValidationError(false);
                if (await server.sendTransaction({
                    ccData: ccInput.value,
                    //... collects the other input data
                })) {
                    //The transaction is succesfull. It may be redirected to another page
                }
                else {
                    //Not successfull. If it's because credit card data is invalid (exceeds the limit, wrong holder name, etc.)
                    //We can show the validity status
                    ccInput.setValidationError(true);
                }
            }
            else {
                ccInput.setValidationError(true);
            }
        }} />
    </SafeAreaView>
);