halilb / rn-credit-card Goto Github PK

<CreditCardForm
          LottieView={LottieView}
          horizontalStart
          overrides={{
            labelText: {
              marginTop: 16
            }
          }}
          translations={{
            cardNumber: 'Numéro de Carte',
            cardHolderName: 'Titulaire de Carte',
            nameSurname: 'Nom et Prénom',
            mmYY: 'MM/AA',
            expiration: 'Expiration',
            securityCode: 'Code de Sécurité',
            next: 'Suivant',
            done: 'Terminer',
            cardNumberRequired: 'Numéro de Carte est obligatoire.',
            cardNumberInvalid: 'Ce numéro de carte est invalide.',
            cardHolderNameRequired: 'Nom de titulaire de la carte est obligatoire.',
            cardHolderNameInvalid: 'Ce nom de titulaire de la carte est invalide.',
            expirationRequired: "Date d'Expiration est obligatoire",
            expirationInvalid: "Cette date d'expiration est invalide.",


            securityCodeRequired: 'Code de Sécurité est obligatoire.',
            securityCodeInvalid: 'Ce code de Sécurité est invalide.'
          }}
        />

import { FormProvider, useForm } from 'react-hook-form'
import {
    Alert,
    StyleSheet,
    KeyboardAvoidingView,
    Platform,
    SafeAreaView,
} from 'react-native'
import LottieView from 'lottie-react-native'
import CreditCardForm, { Button, FormModel } from 'rn-credit-card'

const App = () => {
    const formMethods = useForm ({
        // to trigger the validation on the blur event
        mode: 'onBlur',
        defaultValues: {
            holderName: '',
            cardNumber: '',
            expiration: '',
            cvv: '',
        },
    })
    const { handleSubmit, formState } = formMethods

    function onSubmit(model) {
        Alert.alert('Success: ' + JSON.stringify(model, null, 2))
    }

    return (
        <FormProvider {...formMethods}>
            <SafeAreaView style={styles.container}>
                <KeyboardAvoidingView
                    style={styles.avoider}
                    behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
                >
                    <CreditCardForm
                        LottieView={LottieView}
                        horizontalStart
                        overrides={{
                            labelText: {
                                marginTop: 16,
                            },
                        }}
                    />
                </KeyboardAvoidingView>
                {formState.isValid && (
                    <Button
                        style={styles.button}
                        title={'CONFIRM PAYMENT'}
                        onPress={handleSubmit(onSubmit)}
                    />
                )}
            </SafeAreaView>
        </FormProvider>
    )
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    avoider: {
        flex: 1,
        padding: 36,
    },
    button: {
        margin: 36,
        marginTop: 0,
    },
})

export default App