DEV Community

Cover image for React Native Animated Credit Card Library
Halil Bilir
Halil Bilir

Posted on

React Native Animated Credit Card Library

I built a new library upon the tutorials I posted about React Native forms, and published it on Github.

I won't go into the implementation details this time. You can check out the source code and let me know about any questions you might have.


  • 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.


Install the library first:

npm install rn-credit-card
// OR
yarn add rn-credit-card
Enter fullscreen mode Exit fullscreen mode

Install react-hook-form:

npm install react-hook-form
// OR
yarn add react-hook-form
Enter fullscreen mode Exit fullscreen mode

You also need to install lottie-react-native if you want to display card icon animations. Please note that this is optional, and the library will display simple card icons if Lottie is not present:

npm install lottie-react-native
// OR
yarn add lottie-react-native
Enter fullscreen mode Exit fullscreen mode

If you'd like to use the library on Android, make sure you're using a lottie-react-native version greater than 3.0.0. The animations are not working on 2.x.x versions.

Additional steps might be needed depending on your platform. Please check lottie-react-native documentation.

Configuring Fonts

The library uses Roboto Mono font by default. If you'd like to keep it that way, you need to import RobotoMono_400Regular and RobotoMono_700Bold fonts to your project. Please see Expo or this post for more information.

You may also use custom fonts with this library. Please see #fonts section.


You need to create a react-hook-form and pass it down to the CreditCardForm through FormProvider context. This structure helps you accessing every propery and method of the form so you can build some features on top of the library.

The library is written in TypeScript, and types are also available out of the box. You may use FormModel to type your form.

Here is a fully functional example with KeyboardAvodingView, which manages the scroll position when keyboard is open.

import React from 'react'
import { FormProvider, useForm } from 'react-hook-form'
import {
} from 'react-native'
import LottieView from 'lottie-react-native'
import CreditCardForm, { Button, FormModel } from 'rn-credit-card'

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}>
          behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
              labelText: {
                marginTop: 16,
        {formState.isValid && (
            title={'CONFIRM PAYMENT'}

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

export default App
Enter fullscreen mode Exit fullscreen mode

If you are not using TypeScipt on your project, simply remove FormModel references from the example above.

Available Props


This prop takes the default exported value of lottie-react-native library. This is optional because Lottie might require additional configuration steps. The library will display simple png card icons if this prop is not provided.

Please remember you need a lottie-react-native version greater than 3.x.x to make it work on Android.

type default required platform
any undefined NO iOS/Android


import LottieView from 'lottie-react-native'
<CreditCardForm LottieView={LottieView} />
Enter fullscreen mode Exit fullscreen mode


This makes the form start with a horizontal scroll. This is the default behaviour.

This feature is not working on Android due to a weird problem happening when the ScrollView is switched from horizontal.

type default required platform
boolean true NO iOS only

This is the outcome when horizontalStart is false:



You may use this prop to replace the background image of the card preview.

type default required platform
React.ReactNode undefined NO iOS/Android


        position: 'absolute',
        width: '100%',
        height: '100%',
        borderRadius: 12,
Enter fullscreen mode Exit fullscreen mode


fonts props take an object with two fields:

field type default required
fonts.regular string RobotoMono_400Regular NO
fonts.bold string RobotoMono_700Bold NO

Please note that you should use a Monospaced font for the best user experience. The fixed width helps maintaining the same card number width while the user types.


    regular: 'RobotoMono_400Regular',
    bold: 'RobotoMono_700Bold',
Enter fullscreen mode Exit fullscreen mode


You may modify the TextInput colors using this. It's an object with three optional fields:

field type default required
focused string #080F9C NO
errored string #B00020 NO
regular string #B9C4CA NO


    focused: '#080F9C',
    errored: '#B00020',
    regular: '#B9C4CA',
Enter fullscreen mode Exit fullscreen mode


An optional object that takes a string for each displayed text on the library. You may use it to modify any or all of those displayed texts.

type default required platform
Translations undefined NO iOS/Android


  // those are the default values
    cardNumber: 'Card Number',
    cardHolderName: 'Cardholder Name',
    nameSurname: 'Name Surname',
    mmYY: 'MM/YY',
    expiration: 'Expiration',
    securityCode: 'Security Code',
    next: 'Next',
    done: 'Done',
    cardNumberRequired: 'Card number is required.',
    cardNumberInvalid: 'This card number looks invalid.',
    cardHolderNameRequired: 'Cardholder name is required.',
    cardHolderNameInvalid: 'This cardholder name looks invalid.',
    expirationRequired: 'Expiration date is required.',
    expirationInvalid: 'This expiration date looks invalid.',
    securityCodeRequired: 'Security code is required.',
    securityCodeInvalid: 'This security date looks invalid.',
Enter fullscreen mode Exit fullscreen mode


This props might be used to override some component styles within the library. All fields are optional.

field type
cardPreview ViewStyle or TextStyle
labelText TextStyle
cardHolderPreview TextStyle
expirationPreview ViewStyle or TextStyle
outline ViewStyle
input ViewStyle
labelContainer ViewStyle
inputLabel TextStyle
errorText TextStyle

Top comments (6)

sayonaraguit profile image

Amazing job! I love what you have done from the side of a developer and designer because I am working in a financial service and I know how important it is to create something that will be easy to use for users and will help them to get what they want. For example, on a website that I am working it will be useful to add something like this. Thanks again!

varghesejose2020 profile image
Varghese Jose • Edited

Nice one
How to add OTP like this

halilb profile image
Halil Bilir

Thanks for the feedback! The library just handles the form and UI part. So how to handle the rest is up to the app developer who imports the library.

varghesejose2020 profile image
Varghese Jose


jcvidela profile image
Juan Videla

is this available for react native applications that don't use expo?

halilb profile image
Halil Bilir

Yes, it works with both Expo and React Native CLI versions.