A fully functional and animated credit card form library for React Native.
Expo
.1. Install and import the library.
# Yarn
$ yarn add rn-credit-card react-hook-form lottie-react-native
# NPM
$ npm i rn-credit-card react-hook-form lottie-react-nativeimport React from 'react'
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'
2. Basic usage.
const App: React.FC = () => {
const formMethods = useForm<FormModel>({
// to trigger the validation on the blur event
mode: 'onBlur',
defaultValues: {
holderName: '',
cardNumber: '',
expiration: '',
cvv: '',
},
})
const { handleSubmit, formState } = formMethods
function onSubmit(model: FormModel) {
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>
)
}
export default App
Author: halilb
Live Demo: View The Demo
Download Link: Download The Source Code
Official Website: https://github.com/halilb/rn-credit-card
License: MIT