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>
);

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>
);