in

Credit cards and other payment icons in React Native


There wasn’t a package for showing up credit cards and other payment icons in React Native. Wasn’t!

We use SVGs that are transormed into React Native JSX, so there isn’t a loading time to show them up.

The SVGs are compressed / optimized by ~60%. It uses the Flat Rounded images of aaronfagan/svg-credit-card-payment-icons, and I intend to support other icon packs in the future, in a tree-shakable way.

If you need to discover the card type (visa, mastercard etc), you can use the credit-card-type package.

  1. react-native-svg

  2. Install this package:

npm install react-native-payment-icons
# or
yarn add react-native-payment-icons

aaronfagan/svg-credit-card-payment-icons

  • You shall define either width or height. No need to define both, as it has aspectRatio: 780 / 500, the width / height of the SVGs. If neither is defined, width defaults to 35.

  • It also accepts all the props of the Svg component.

  • svgo to compress the SVGs. The best here is -p 0 which sets the precision to 0, decreasing the total size from 96KB to 38KB. The quality loss isn’t noticeable unless comparing, except in mastercard and diners that have some artifacts, so we set precision 1 for them. There are other svgo plugins set in svgo.config.js file, that are automatically applied when running svgo at the same cwd.

npx svgo -f ./svgsSrc -o ./svgsCompressed -p 0

npx svgo -p 1 ./svgsSrc/mastercard.svg ./svgsSrc/diners.svg -o ./svgsCompressed/mastercard.svg ./svgsCompressed/diners.svg

  • Then, transform them into React Native format using svgr. --native for generating code for React Native, --typescript for .tsx. We store them under src/components:

npx @svgr/cli ./svgsCompressed --out-dir src/components --native --typescript

There may happen some errors in the RN convertion you may need to deal manually. If happens, npm run build will throw them up.

  • An index.tsx will be automatically created re-exporting all the components.

  • If adding or removing images, you will need to change src/index.tsx to add / remove the components in the dictionary.

  • If you want to compile the TS files into JS, npm run build.

GitHub

View Github


A flexible command and option parser for Go

Joint learning of images and text via maximization of mutual information