What it is

react-native-credit-card-input is a TypeScript component library for React Native that provides a credit-card input form for Android, iOS, and Web. It lives in the React Native ecosystem and is distributed under the MIT license.

The project solves the problem of building a card entry form without writing each field, validation rule, formatting behavior, and navigation flow from scratch. It gives developers a form that accepts card number, expiry, and CVC values, recognizes common card brands, and returns sanitized state to an application handler.

Key capabilities

• The package exports CreditCardInput and LiteCreditCardInput components, plus CardView, for different visual presentations of a credit-card form.
• The full component uses a skeuomorphic card appearance, while the Lite variant provides a compact layout for smaller screens.
• The form validates and formats input while the user types, and onChange returns sanitized values such as number, expiry, cvc, and detected type.
• Returned state includes a valid flag and per-field status values of incomplete, invalid, or valid, which can control form submission.
• Card type detection covers visa, master-card, american-express, diners-club, discover, jcb, unionpay, and maestro, with null when no type is recognized.
• The form is navigatable using the keypad, and LiteCreditCardInput animations require LayoutAnimation to be enabled on Android.

Who uses it and how

• React Native developers can add the component to an Android, iOS, or Web payment flow and use onChange to decide when the submit action should be enabled.
• Teams building proof-of-concept checkout screens can use the provided example and Expo Snack to evaluate the component before integrating it into a larger application.
• Developers who need a compact card form can use LiteCreditCardInput, while those who want a more visual card presentation can use CreditCardInput.

Getting started

Install the package with yarn add react-native-credit-card-input, then import CreditCardInput or LiteCreditCardInput into React Native code. The repository also provides a local example that can be run with yarn install and yarn example ios, yarn example android, or yarn example web.

When to use it — and when not to

Use the package when a React Native app needs a quick credit-card input component or proof-of-concept payment form and the supplied UI fits the product. Avoid it when the project requires a deeply customized form system, because the README recommends using a form library such as react-hook-form together with card-validator in that case. The component handles input presentation and validation state, but it does not provide payment processing, storage, backend infrastructure, or hosted deployment details.

<CreditCardInput />
// or
<LiteCreditCardInput />

yarn add react-native-credit-card-input

import { CreditCardInput, LiteCreditCardInput } from "react-native-credit-card-input";

<CreditCardInput onChange={_onChange} />
// or
<LiteCreditCardInput onChange={_onChange} />

// Note: You'll need to enable LayoutAnimation on android to see LiteCreditCardInput's animations
// UIManager.setLayoutAnimationEnabledExperimental(true);

_onChange => form => console.log(form);

// will print:
{
  valid: true, // will be true once all fields are "valid" (time to enable the submit button)
  values: { // will be in the sanitized and formatted form
  	number: "4242 4242",
  	expiry: "06/19",
  	cvc: "300",
  	type: "visa", // will be one of [null, "visa", "master-card", "american-express", "diners-club", "discover", "jcb", "unionpay", "maestro"]
  },
  status: {  // will be one of ["incomplete", "invalid", and "valid"]
	number: "incomplete",
	expiry: "incomplete",
	cvc: "incomplete",
  },
};

yarn install

yarn example ios
# or
yarn example android
# or
yarn example web