Animated Credit Card Form in React Native

A fully functional and animated credit card form library for React Native.

Features:

• Works on iOS and Android.
• Validations.
• Card icon animation with Lottie.
• Card flip animation with react-native-card-flip.
• Possible to access all react-hook-form methods.
• TypeScript code base.
• Works on Expo.

Basic usage:

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

Preview:

Download Details:

Author: halilb

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/halilb/rn-credit-card

License: MIT

#react-native #react #reactjs