Code Monkey home page Code Monkey logo

react-native-payment-icons's Introduction

npm TypeScript โ€‹npmโ€‹ PRs Welcome

react-native-payment-icons

There wasn't a package for displaying credit cards and other payment methods icons in React Native. Wasn't!

We use SVGs that were transormed into React Native JSX, so there isn't a loading time to show them up in Expo Go / Expo Dev Client, as images are transferred on demand.

The SVGs are compressed / optimized by ~60%. It uses the Flat Rounded images from 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.

My App using this package!

๐Ÿ’ฟ Installation

  1. Install react-native-svg

  2. Install this package:

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

๐Ÿ“– Usage

import { PaymentIcon } from 'react-native-payment-icons'

<PaymentIcon type='visa'/>
<PaymentIcon type='master' width={50}/>
<PaymentIcon type='paypal' height='30%'/>
  • You must set the type property to the desired credit card / payment method.

Available types and their images:

When there is more than one type for the same image, it's an alias!

Type Image
alipay
american-express
amex
diners-club
diners
discover
elo
hiper
hipercard
jcb
maestro
mastercard
master
mir
paypal
unionpay
visa
generic
cvv
code

Images from aaronfagan/svg-credit-card-payment-icons

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

  • It also accepts all the props of the Svg component, like style.

  • On invalid type, it defaults to generic.

๐Ÿ“ฐ Changelog

๐Ÿค– Dev

How to setup your own images! If you just want to use the package, you may ignore this!

  • To transform the SVGs, download the .svgs from svg-credit-card-payment-icons. I used the Flat Rounded styled images. Store them in ./svgsSrc/.

  • If you want to add your own images, be sure that their width are 780 and height 500, to have the same ratio as the others.

You may run npm run svg that executes the two steps below!

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

react-native-payment-icons's People

Contributors

srbrahma avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.