{"_id":"react-native-payment-card-icons","_rev":"4-5c24adf450f93a5e0c9ece097ed8420a","name":"react-native-payment-card-icons","dist-tags":{"latest":"1.0.3"},"versions":{"1.0.1":{"name":"react-native-payment-card-icons","version":"1.0.1","keywords":["react-native","ios","android","expo","react-native-web","payment","cards","icons","svg","visa","mastercard","amex","american-express","maestro","discover","jcb","unionpay","paypal","alipay","elo","hipercard","hiper","mir","diners","credit-card","debit-card","payment-icons","brand-icons","components","library"],"author":{"url":"https://github.com/julekgwa","name":"Junius Lekgwara","email":"phutigravel@gmail.com"},"license":"MIT","_id":"react-native-payment-card-icons@1.0.1","maintainers":[{"name":"julekgwa","email":"phutigravel@gmail.com"}],"homepage":"https://github.com/julekgwa/react-native-payment-card-icons#readme","bugs":{"url":"https://github.com/julekgwa/react-native-payment-card-icons/issues"},"dist":{"shasum":"f55c720c8425efa08f24602442a3551284e485aa","tarball":"https://registry.npmjs.org/react-native-payment-card-icons/-/react-native-payment-card-icons-1.0.1.tgz","fileCount":319,"integrity":"sha512-2t5Ta8oFb3yRvk7SQOufm12ZR1HpJIyS7SJvFbUI/0NEEC5CG9gw+JmumkkI+FgOKZ/8EwAQft80EZdoC2JS5A==","signatures":[{"sig":"MEUCIDv8HgbTT55lkDMxztBMChc7ewhKR+IGbwDEs+kiuXJUAiEA/+k8r0Re4mm5WyS3UwnmulC0zeIldl+1F44IfAbjH/U=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":1201833},"jest":{"preset":"react-native","testMatch":["**/__tests__/**/*.(test|spec).(js|jsx|ts|tsx)","**/?(*.)(test|spec).(js|jsx|ts|tsx)"],"setupFilesAfterEnv":["/jest.setup.js"],"collectCoverageFrom":["src/**/*.{js,jsx,ts,tsx}","!src/**/*.d.ts","!src/icons/index.ts"],"modulePathIgnorePatterns":["/example/node_modules","/lib/"]},"main":"./lib/module/index.js","types":"./src/index.tsx","exports":{".":{"types":"./src/index.tsx","source":"./src/index.tsx","default":"./lib/module/index.js"},"./package.json":"./package.json"},"gitHead":"6143df7c78fd806c297a9ad14ce9f6d0c3c8b7a9","scripts":{"lint":"eslint \"src/**/*.{js,ts,tsx}\"","test":"jest","build":"bob build","clean":"del-cli lib","example":"yarn workspace react-native-payment-card-icons-example","prepack":"yarn clean && yarn build","prepare":"bob build","release":"release-it","test:ci":"jest --coverage --watchAll=false --passWithNoTests","lint:fix":"eslint \"src/**/*.{js,ts,tsx}\" --fix","test:all":"yarn typecheck && yarn lint && yarn test","typecheck":"tsc --noEmit","test:watch":"jest --watch","release:dry":"release-it --dry-run","test:update":"jest -u","test:coverage":"jest --coverage","generate-icons":"ts-node scripts/generate-icons.ts"},"_npmUser":{"name":"julekgwa","actor":{"name":"julekgwa","type":"user","email":"phutigravel@gmail.com"},"email":"phutigravel@gmail.com"},"prettier":{"useTabs":false,"tabWidth":2,"quoteProps":"consistent","singleQuote":true,"trailingComma":"es5"},"commitlint":{"extends":["@commitlint/config-conventional"]},"release-it":{"git":{"tagName":"v${version}","commitMessage":"chore: release v${version}","requireBranch":"main"},"npm":{"publish":true},"hooks":{"after:bump":"yarn build","before:init":["yarn test:all"]},"github":{"release":true,"releaseName":"v${version}"},"plugins":{"@release-it/conventional-changelog":{"infile":"CHANGELOG.md","preset":{"name":"angular"}}}},"repository":{"url":"git+https://github.com/julekgwa/react-native-payment-card-icons.git","type":"git"},"workspaces":["example"],"_npmVersion":"11.3.0","description":"A collection of high-quality, customizable payment card brand icons (Visa, Mastercard, Maestro, Amex, and more) as React Native SVG components — fully compatible with React Native, Expo, and React Native Web for seamless cross-platform use.","directories":{},"_nodeVersion":"24.2.0","dependencies":{"react-native-svg":"*"},"publishConfig":{"registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"packageManager":"yarn@3.6.1","devDependencies":{"jest":"^29.7.0","react":"19.0.0","eslint":"^9.22.0","del-cli":"^5.1.0","ts-node":"^10.9.2","prettier":"^3.0.3","@svgr/cli":"^8.1.0","@eslint/js":"^9.22.0","commitlint":"^19.6.1","release-it":"^17.10.0","typescript":"^5.8.3","@types/jest":"^29.5.5","@types/node":"^24.0.10","@types/react":"^19.0.12","react-native":"0.79.5","@eslint/compat":"^1.2.7","@eslint/eslintrc":"^3.3.0","@svgr/plugin-jsx":"^8.1.0","@svgr/plugin-svgo":"^8.1.0","@aaronfagan/ccicons":"^0.1.1","react-test-renderer":"19.0.0","@svgr/plugin-prettier":"^8.1.0","@evilmartians/lefthook":"^1.5.0","eslint-config-prettier":"^10.1.1","eslint-plugin-prettier":"^5.2.3","react-native-builder-bob":"^0.40.12","@react-native/babel-preset":"0.78.2","@react-native/eslint-config":"^0.78.0","@testing-library/jest-native":"^5.4.3","@testing-library/react-native":"^13.2.0","@commitlint/config-conventional":"^19.6.0","@release-it/conventional-changelog":"^9.0.2"},"peerDependencies":{"react":"*","react-native":"*"},"_npmOperationalInternal":{"tmp":"tmp/react-native-payment-card-icons_1.0.1_1751841360633_0.7430076319806767","host":"s3://npm-registry-packages-npm-production"},"react-native-builder-bob":{"output":"lib","source":"src","targets":[["module",{"esm":true}]]},"create-react-native-library":{"type":"library","version":"0.51.1","languages":"js"}},"1.0.2":{"name":"react-native-payment-card-icons","version":"1.0.2","keywords":["react-native","ios","android","expo","react-native-web","payment","cards","icons","svg","visa","mastercard","amex","american-express","maestro","discover","jcb","unionpay","paypal","alipay","elo","hipercard","hiper","mir","diners","credit-card","debit-card","payment-icons","brand-icons","components","library"],"author":{"url":"https://github.com/julekgwa","name":"Junius Lekgwara","email":"phutigravel@gmail.com"},"license":"MIT","_id":"react-native-payment-card-icons@1.0.2","maintainers":[{"name":"julekgwa","email":"phutigravel@gmail.com"}],"homepage":"https://github.com/julekgwa/react-native-payment-card-icons#readme","bugs":{"url":"https://github.com/julekgwa/react-native-payment-card-icons/issues"},"dist":{"shasum":"d890fdd42c0f38da3b9c44d3263e3846e0d54486","tarball":"https://registry.npmjs.org/react-native-payment-card-icons/-/react-native-payment-card-icons-1.0.2.tgz","fileCount":214,"integrity":"sha512-wip512Uh9xsR+AXkaZK4gTVYWMhueRhi+CaErogfF6KBUIES0igUPDeCX2a3eOlhn2URbrk9pJyeLurdRa1nAQ==","signatures":[{"sig":"MEUCIQDylkLzfrD808drg6tMyqhHJVFTb42bx0OdW7KKuuXGGgIgOfPlW8TlsOAJAIj4yzRQe1jcRers7ORXwufMJJe6iJ8=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":674009},"jest":{"preset":"react-native","testMatch":["**/__tests__/**/*.(test|spec).(js|jsx|ts|tsx)","**/?(*.)(test|spec).(js|jsx|ts|tsx)"],"setupFilesAfterEnv":["/jest.setup.js"],"collectCoverageFrom":["src/**/*.{js,jsx,ts,tsx}","!src/**/*.d.ts","!src/icons/index.ts"],"modulePathIgnorePatterns":["/example/node_modules","/lib/"]},"main":"./lib/module/index.js","types":"./src/index.tsx","exports":{".":{"types":"./src/index.tsx","source":"./src/index.tsx","default":"./lib/module/index.js"},"./package.json":"./package.json"},"gitHead":"ad436f3d478704a76b27ec95165c5d228f89ba92","scripts":{"lint":"eslint \"src/**/*.{js,ts,tsx}\"","test":"jest","build":"bob build","clean":"del-cli lib","example":"yarn workspace react-native-payment-card-icons-example","prepack":"yarn clean && yarn build","prepare":"bob build","release":"release-it","test:ci":"jest --coverage --watchAll=false --passWithNoTests","lint:fix":"eslint \"src/**/*.{js,ts,tsx}\" --fix","test:all":"yarn typecheck && yarn lint && yarn test","typecheck":"tsc --noEmit","test:watch":"jest --watch","release:dry":"release-it --dry-run","test:update":"jest -u","test:coverage":"jest --coverage","generate-icons":"ts-node scripts/generate-icons.ts"},"_npmUser":{"name":"julekgwa","actor":{"name":"julekgwa","type":"user","email":"phutigravel@gmail.com"},"email":"phutigravel@gmail.com"},"prettier":{"useTabs":false,"tabWidth":2,"quoteProps":"consistent","singleQuote":true,"trailingComma":"es5"},"commitlint":{"extends":["@commitlint/config-conventional"]},"release-it":{"git":{"tagName":"v${version}","commitMessage":"chore: release v${version}","requireBranch":"main"},"npm":{"publish":true},"hooks":{"after:bump":"yarn build","before:init":["yarn test:all"]},"github":{"release":true,"releaseName":"v${version}"},"plugins":{"@release-it/conventional-changelog":{"infile":"CHANGELOG.md","preset":{"name":"angular"}}}},"repository":{"url":"git+https://github.com/julekgwa/react-native-payment-card-icons.git","type":"git"},"workspaces":["example"],"_npmVersion":"11.3.0","description":"A collection of high-quality, customizable payment card brand icons (Visa, Mastercard, Maestro, Amex, and more) as React Native SVG components — fully compatible with React Native, Expo, and React Native Web for seamless cross-platform use.","directories":{},"_nodeVersion":"24.2.0","dependencies":{"react-native-svg":"*"},"publishConfig":{"registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"packageManager":"yarn@3.6.1","devDependencies":{"jest":"^29.7.0","react":"19.0.0","eslint":"^9.22.0","del-cli":"^5.1.0","ts-node":"^10.9.2","prettier":"^3.0.3","@svgr/cli":"^8.1.0","@eslint/js":"^9.22.0","commitlint":"^19.6.1","release-it":"^17.10.0","typescript":"^5.8.3","@types/jest":"^29.5.5","@types/node":"^24.0.10","@types/react":"^19.0.12","react-native":"0.79.5","@eslint/compat":"^1.2.7","@eslint/eslintrc":"^3.3.0","@svgr/plugin-jsx":"^8.1.0","@svgr/plugin-svgo":"^8.1.0","@aaronfagan/ccicons":"^0.1.1","react-test-renderer":"19.0.0","@svgr/plugin-prettier":"^8.1.0","@evilmartians/lefthook":"^1.5.0","eslint-config-prettier":"^10.1.1","eslint-plugin-prettier":"^5.2.3","react-native-builder-bob":"^0.40.12","@react-native/babel-preset":"0.78.2","@react-native/eslint-config":"^0.78.0","@testing-library/jest-native":"^5.4.3","@testing-library/react-native":"^13.2.0","@commitlint/config-conventional":"^19.6.0","@release-it/conventional-changelog":"^9.0.2"},"peerDependencies":{"react":"*","react-native":"*"},"_npmOperationalInternal":{"tmp":"tmp/react-native-payment-card-icons_1.0.2_1751843047894_0.14682095413505558","host":"s3://npm-registry-packages-npm-production"},"react-native-builder-bob":{"output":"lib","source":"src","targets":[["module",{"esm":true}]]},"create-react-native-library":{"type":"library","version":"0.51.1","languages":"js"}},"1.0.3":{"name":"react-native-payment-card-icons","version":"1.0.3","keywords":["react-native","ios","android","expo","react-native-web","payment","cards","icons","svg","visa","mastercard","amex","american-express","maestro","discover","jcb","unionpay","paypal","alipay","elo","hipercard","hiper","mir","diners","credit-card","debit-card","payment-icons","brand-icons","components","library"],"author":{"url":"https://github.com/julekgwa","name":"Junius Lekgwara","email":"phutigravel@gmail.com"},"license":"MIT","_id":"react-native-payment-card-icons@1.0.3","maintainers":[{"name":"julekgwa","email":"phutigravel@gmail.com"}],"homepage":"https://github.com/julekgwa/react-native-payment-card-icons#readme","bugs":{"url":"https://github.com/julekgwa/react-native-payment-card-icons/issues"},"dist":{"shasum":"91cbc466b55e0280569c267b6daa951d9d762130","tarball":"https://registry.npmjs.org/react-native-payment-card-icons/-/react-native-payment-card-icons-1.0.3.tgz","fileCount":427,"integrity":"sha512-NuKrH4tA1Qj4NbpJowplIAEBiLa9C6GS48tJ+wWxozpV9m789iULTQ+1X5a0r00d5mqdGp+Pt3Zk5C3EhSN8dQ==","signatures":[{"sig":"MEUCIDalLpXWJ0Nl29GVgQJEZ6Svw6K1Z7hVm/9CLPX3RwMqAiEAidG+qxhYF94lWkrsLgYjqLwZSt5QTopSJzj04FM6GB0=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":736383},"jest":{"preset":"react-native","testMatch":["**/__tests__/**/*.(test|spec).(js|jsx|ts|tsx)","**/?(*.)(test|spec).(js|jsx|ts|tsx)"],"setupFilesAfterEnv":["/jest.setup.js"],"collectCoverageFrom":["src/**/*.{js,jsx,ts,tsx}","!src/**/*.d.ts","!src/icons/index.ts"],"modulePathIgnorePatterns":["/example/node_modules","/lib/"]},"main":"./lib/module/index.js","types":"./lib/typescript/src/index.d.ts","exports":{".":{"types":"./lib/typescript/src/index.d.ts","source":"./src/index.tsx","default":"./lib/module/index.js"},"./package.json":"./package.json"},"gitHead":"a6aee97b23c4f9c275ea9e020b0b9dc8fd65b8d1","scripts":{"lint":"eslint \"src/**/*.{js,ts,tsx}\"","test":"jest","build":"bob build","clean":"del-cli lib","example":"yarn workspace react-native-payment-card-icons-example","prepack":"yarn clean && yarn build","prepare":"bob build","release":"release-it","test:ci":"jest --coverage --watchAll=false --passWithNoTests","lint:fix":"eslint \"src/**/*.{js,ts,tsx}\" --fix","test:all":"yarn typecheck && yarn lint && yarn test","typecheck":"tsc --noEmit","test:watch":"jest --watch","release:dry":"release-it --dry-run","test:update":"jest -u","test:coverage":"jest --coverage","generate-icons":"ts-node scripts/generate-icons.ts"},"_npmUser":{"name":"julekgwa","actor":{"name":"julekgwa","type":"user","email":"phutigravel@gmail.com"},"email":"phutigravel@gmail.com"},"prettier":{"useTabs":false,"tabWidth":2,"quoteProps":"consistent","singleQuote":true,"trailingComma":"es5"},"commitlint":{"extends":["@commitlint/config-conventional"]},"release-it":{"git":{"tagName":"v${version}","commitMessage":"chore: release v${version}","requireBranch":"main"},"npm":{"publish":true},"hooks":{"after:bump":"yarn build","before:init":["yarn test:all"]},"github":{"release":true,"releaseName":"v${version}"},"plugins":{"@release-it/conventional-changelog":{"infile":"CHANGELOG.md","preset":{"name":"angular"}}}},"repository":{"url":"git+https://github.com/julekgwa/react-native-payment-card-icons.git","type":"git"},"workspaces":["example"],"_npmVersion":"11.3.0","description":"A collection of high-quality, customizable payment card brand icons (Visa, Mastercard, Maestro, Amex, and more) as React Native SVG components — fully compatible with React Native, Expo, and React Native Web for seamless cross-platform use.","directories":{},"_nodeVersion":"24.2.0","dependencies":{"react-native-svg":"*"},"publishConfig":{"registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"packageManager":"yarn@3.6.1","devDependencies":{"jest":"^29.7.0","react":"19.0.0","eslint":"^9.22.0","del-cli":"^5.1.0","ts-node":"^10.9.2","prettier":"^3.0.3","@svgr/cli":"^8.1.0","@eslint/js":"^9.22.0","commitlint":"^19.6.1","release-it":"^17.10.0","typescript":"^5.8.3","@types/jest":"^29.5.5","@types/node":"^24.0.10","@types/react":"^19.0.12","react-native":"0.79.5","@eslint/compat":"^1.2.7","@eslint/eslintrc":"^3.3.0","@svgr/plugin-jsx":"^8.1.0","@svgr/plugin-svgo":"^8.1.0","@aaronfagan/ccicons":"^0.1.1","react-test-renderer":"19.0.0","@svgr/plugin-prettier":"^8.1.0","@evilmartians/lefthook":"^1.5.0","eslint-config-prettier":"^10.1.1","eslint-plugin-prettier":"^5.2.3","react-native-builder-bob":"^0.40.12","@react-native/babel-preset":"0.78.2","@react-native/eslint-config":"^0.78.0","@testing-library/jest-native":"^5.4.3","@testing-library/react-native":"^13.2.0","@commitlint/config-conventional":"^19.6.0","@release-it/conventional-changelog":"^9.0.2"},"peerDependencies":{"react":"*","react-native":"*"},"_npmOperationalInternal":{"tmp":"tmp/react-native-payment-card-icons_1.0.3_1751920469962_0.27548352789237107","host":"s3://npm-registry-packages-npm-production"},"react-native-builder-bob":{"output":"lib","source":"src","targets":[["module",{"esm":true}],["typescript",{"project":"tsconfig.build.json"}]]},"create-react-native-library":{"type":"library","version":"0.51.1","languages":"js"}}},"time":{"created":"2025-07-06T22:36:00.631Z","modified":"2025-11-04T11:14:19.465Z","1.0.1":"2025-07-06T22:36:00.844Z","1.0.2":"2025-07-06T23:04:08.123Z","1.0.3":"2025-07-07T20:34:30.172Z"},"bugs":{"url":"https://github.com/julekgwa/react-native-payment-card-icons/issues"},"author":{"url":"https://github.com/julekgwa","name":"Junius Lekgwara","email":"phutigravel@gmail.com"},"license":"MIT","homepage":"https://github.com/julekgwa/react-native-payment-card-icons#readme","keywords":["react-native","ios","android","expo","react-native-web","payment","cards","icons","svg","visa","mastercard","amex","american-express","maestro","discover","jcb","unionpay","paypal","alipay","elo","hipercard","hiper","mir","diners","credit-card","debit-card","payment-icons","brand-icons","components","library"],"repository":{"url":"git+https://github.com/julekgwa/react-native-payment-card-icons.git","type":"git"},"description":"A collection of high-quality, customizable payment card brand icons (Visa, Mastercard, Maestro, Amex, and more) as React Native SVG components — fully compatible with React Native, Expo, and React Native Web for seamless cross-platform use.","maintainers":[{"email":"phutigravel@gmail.com","name":"junius09"}],"readme":"

\n react-native-payment-card-icons\n

\nA collection of high-quality, customizable payment card brand icons (Visa, Mastercard, Maestro, Amex, and more) as React Native SVG components, fully compatible with React Native, Expo, and React Native Web for seamless cross-platform use.\n

\n \n \"npm\n \n \n \"npm\n \n \n \"license\"/\n \n \n \"stars\"/\n \n

\n\n## Table of Contents\n\n- [Table of Contents](#table-of-contents)\n- [Features](#features)\n- [Installation](#installation)\n - [Prerequisites](#prerequisites)\n- [Usage](#usage)\n - [Basic Usage with PaymentIcon Component](#basic-usage-with-paymenticon-component)\n - [Using Individual Icon Components](#using-individual-icon-components)\n- [API Reference](#api-reference)\n - [PaymentIcon Props](#paymenticon-props)\n - [Supported Payment Types](#supported-payment-types)\n - [Supported Variants](#supported-variants)\n- [Examples](#examples)\n - [Visual Showcase](#visual-showcase)\n - [Live Example App](#live-example-app)\n - [Dynamic Payment Form](#dynamic-payment-form)\n - [Card Grid Display](#card-grid-display)\n - [Custom Themed Icons](#custom-themed-icons)\n- [Platform Support](#platform-support)\n - [Expo Support](#expo-support)\n - [React Native Web Support](#react-native-web-support)\n - [TypeScript Support](#typescript-support)\n- [Performance](#performance)\n- [Troubleshooting](#troubleshooting)\n - [Common Issues](#common-issues)\n- [Contributing](#contributing)\n - [Development](#development)\n- [License](#license)\n- [Acknowledgments](#acknowledgments)\n\n## Features\n\n- 🎨 **Multiple styles**: flat, flatRounded, logo, logoBorder, mono, monoOutline\n- 💳 **Comprehensive coverage**: Supports 17+ payment providers\n- 📱 **Cross-platform**: Works with React Native, Expo, and React Native Web\n- 🔧 **Fully customizable**: Size, color, and styling options\n- 🎯 **TypeScript support**: Complete type definitions included\n- 📦 **Zero dependencies**: Only requires `react-native-svg`\n\n## Installation\n\n```sh\nnpm install react-native-payment-card-icons\n# or\nyarn add react-native-payment-card-icons\n```\n\n### Prerequisites\n\nThis library requires `react-native-svg` to be installed and configured in your project:\n\n```sh\nnpm install react-native-svg\n# or\nyarn add react-native-svg\n```\n\nFor React Native 0.60+, run `npx pod-install` (iOS only) after installation.\n\n## Usage\n\n### Basic Usage with PaymentIcon Component\n\nThe easiest way to use the library is with the `PaymentIcon` component:\n\n```tsx\nimport React from 'react';\nimport { View } from 'react-native';\nimport { PaymentIcon } from 'react-native-payment-card-icons';\n\nexport default function App() {\n return (\n \n {/* Basic usage */}\n \n\n {/* With custom styling */}\n \n\n {/* Monochrome style with custom color */}\n \n \n );\n}\n```\n\n### Using Individual Icon Components\n\nYou can also import and use individual icon components directly:\n\n```tsx\nimport React from 'react';\nimport { View } from 'react-native';\nimport {\n VisaFlat,\n MastercardLogo,\n AmexMono\n} from 'react-native-payment-card-icons';\n\nexport default function App() {\n return (\n \n \n \n \n \n );\n}\n```\n\n## API Reference\n\n### PaymentIcon Props\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| `type` | `PaymentIconType` | **required** | The payment card brand |\n| `variant` | `PaymentIconStyle` | `'flat'` | The icon style variant |\n| `width` | `number \\| string` | `24` | Icon width |\n| `height` | `number \\| string` | `24` | Icon height |\n| `fill` | `string` | `undefined` | Fill color (mainly for mono variants) |\n\n### Supported Payment Types\n\n| Type | Description |\n|------|-------------|\n| `'visa'` | Visa |\n| `'mastercard'` | Mastercard |\n| `'amex'` | American Express |\n| `'maestro'` | Maestro |\n| `'discover'` | Discover |\n| `'jcb'` | JCB |\n| `'diners'` | Diners Club |\n| `'unionpay'` | UnionPay |\n| `'elo'` | Elo |\n| `'hiper'` | Hiper |\n| `'hipercard'` | Hipercard |\n| `'mir'` | Mir |\n| `'alipay'` | Alipay |\n| `'paypal'` | PayPal |\n| `'generic-card'` | Generic Card |\n| `'security-code'` | Security Code (CVV) |\n| `'security-code-front'` | Security Code Front |\n\n### Supported Variants\n\n| Variant | Description | Best Use Case |\n|---------|-------------|---------------|\n| `'flat'` | Flat design with brand colors | Modern UI, cards display |\n| `'flatRounded'` | Flat design with rounded corners | Card forms, modern UI |\n| `'logo'` | Official brand logo | Marketing, branding |\n| `'logoBorder'` | Logo with border | Professional docs, forms |\n| `'mono'` | Monochrome filled | Custom branded UI |\n| `'monoOutline'` | Monochrome outline | Minimalist UI, wireframes |\n\n## Examples\n\n### Visual Showcase\n\n

\n \"Payment\n

\n\nThe library supports multiple variants for each payment method. Above shows Visa cards in all 6 available styles: flat, flatRounded, logo, logoBorder, mono, and monoOutline.\n\n### Live Example App\n\nExpo snack example: [https://snack.expo.dev/@lekgwaraj/react-native-payment-card-icons](https://snack.expo.dev/@lekgwaraj/react-native-payment-card-icons)\n\n### Dynamic Payment Form\n\n

\n \"Dynamic\n

\n\nThis example shows how to create a dynamic payment form that automatically detects the card type as the user types:\n\n```tsx\nimport React, { useState } from 'react';\nimport { View, TextInput, StyleSheet } from 'react-native';\nimport { PaymentIcon } from 'react-native-payment-card-icons';\n\n// Simple card type detection (you might want a more robust solution)\nconst detectCardType = (number: string) => {\n if (number.startsWith('4')) return 'visa';\n if (number.startsWith('5') || number.startsWith('2')) return 'mastercard';\n if (number.startsWith('3')) return 'amex';\n return 'generic-card';\n};\n\nexport default function PaymentForm() {\n const [cardNumber, setCardNumber] = useState('');\n const cardType = detectCardType(cardNumber);\n\n return (\n \n \n \n \n \n \n );\n}\n\nconst styles = StyleSheet.create({\n container: {\n padding: 20,\n },\n inputContainer: {\n flexDirection: 'row',\n alignItems: 'center',\n borderWidth: 1,\n borderColor: '#ddd',\n borderRadius: 8,\n paddingHorizontal: 15,\n },\n input: {\n flex: 1,\n height: 50,\n fontSize: 16,\n },\n});\n```\n\n### Card Grid Display\n\n

\n \"Supported\n

\n\nDisplay all supported payment methods in a clean grid layout:\n\n```tsx\nimport React from 'react';\nimport { View, Text, FlatList, StyleSheet } from 'react-native';\nimport { PaymentIcon } from 'react-native-payment-card-icons';\n\nconst supportedCards = [\n { type: 'visa', name: 'Visa' },\n { type: 'mastercard', name: 'Mastercard' },\n { type: 'amex', name: 'American Express' },\n { type: 'discover', name: 'Discover' },\n { type: 'paypal', name: 'PayPal' },\n];\n\nexport default function SupportedPayments() {\n return (\n \n We Accept\n (\n \n \n {item.name}\n \n )}\n keyExtractor={(item) => item.type}\n />\n \n );\n}\n\nconst styles = StyleSheet.create({\n container: {\n padding: 20,\n },\n title: {\n fontSize: 18,\n fontWeight: 'bold',\n marginBottom: 15,\n },\n cardItem: {\n flex: 1,\n alignItems: 'center',\n margin: 10,\n },\n cardName: {\n marginTop: 8,\n fontSize: 12,\n textAlign: 'center',\n },\n});\n```\n\n### Custom Themed Icons\n\n

\n \"Custom\n

\n\nCreate custom themes for your payment icons to match your app's design:\n\n```tsx\nimport React from 'react';\nimport { View, StyleSheet } from 'react-native';\nimport { PaymentIcon } from 'react-native-payment-card-icons';\n\nexport default function ThemedIcons() {\n return (\n \n {/* Dark theme */}\n \n \n \n \n \n\n {/* Brand theme */}\n \n \n \n \n \n \n );\n}\n\nconst styles = StyleSheet.create({\n container: {\n padding: 20,\n },\n section: {\n flexDirection: 'row',\n justifyContent: 'space-around',\n padding: 20,\n marginVertical: 10,\n borderRadius: 8,\n },\n darkTheme: {\n backgroundColor: '#333',\n },\n brandTheme: {\n backgroundColor: '#f8f9fa',\n borderWidth: 1,\n borderColor: '#dee2e6',\n },\n});\n```\n\n## Platform Support\n\n### Expo Support\n\nThis library works seamlessly with Expo. Make sure you have `react-native-svg` installed:\n\n```sh\nexpo install react-native-svg\n```\n\n### React Native Web Support\n\nThe library is fully compatible with React Native Web. No additional configuration required.\n\n### TypeScript Support\n\nThe library includes complete TypeScript definitions. All component props and types are exported:\n\n```tsx\nimport {\n PaymentIcon,\n PaymentIconType,\n PaymentIconStyle,\n PaymentIconProps\n} from 'react-native-payment-card-icons';\n\n// Type-safe usage\nconst cardType: PaymentIconType = 'visa';\nconst variant: PaymentIconStyle = 'flatRounded';\n```\n\n## Performance\n\n- **Optimized SVGs**: All icons are optimized for minimal bundle size\n- **Tree-shakable**: Import only the icons you need\n- **No bitmap images**: Crisp at any resolution\n- **Lightweight**: Minimal impact on bundle size\n\n## Troubleshooting\n\n### Common Issues\n\n**Icons not showing:**\n- Ensure `react-native-svg` is properly installed and linked\n- For React Native 0.60+, run `npx pod-install` on iOS\n\n**TypeScript errors:**\n- Make sure you're using the correct prop types\n- Update to the latest version of the library\n\n**Performance on large lists:**\n- Consider using `getItemLayout` for FlatList performance\n- Use appropriate icon sizes to avoid unnecessary rendering\n\n## Contributing\n\nSee the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.\n\n### Development\n\n```sh\n# Clone the repository\ngit clone https://github.com/julekgwa/react-native-payment-card-icons.git\n\n# Install dependencies\nyarn install\n\n# Run tests\nyarn test\n\n# Run the example app\nyarn example ios\n# or\nyarn example android\n```\n\n## License\n\nMIT © [Junius Lekgwara](https://github.com/julekgwa)\n\n## Acknowledgments\n\n- Icons based on [CC Icons](https://github.com/aaronfagan/svg-credit-card-payment-icons) by Aaron Fagan\n- Built with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)\n\n---\n","readmeFilename":"README.md"}