React Native Health Card 🏥💳

npm badge

React Native Health Card is a module that displays a look-a-like health fund card on your react native view!

rn-health-card

Inspiration from @sonnylazuardi and @jessepollak

Usage

  • npm install react-native-health-card --save
  • Now you can require the health card by import HealthCard from 'react-native-health-card'!

Available Props

PropertyTypeDefaultDescription
bgColorstring#419dffThe background color of the health card of type generic.
cardHolderNamestringJohn SmithName of the card holder.
cardNumberstringN/AThe card number. Note: Only applicable for type bupa.
cardNumberLengthstringN/AThe card number length. Note: Only applicable for type bupa.
heightnumber180The height of the card.
focusstringallThe attribute to focus on. Available options: allmemberNumberissueNumberrankissueDatecardHolderName.
issueDatestringN/AThe card issue date. E.g. 12/12/2015
issueDateFormatstringdd/mm/yyyyFormat of the issue date in the format of dm, and y.
issueNumberstringN/AThe issue number to display on the card.
issueNumberLengthstring2The length of the issue number.
memberNumberstringN/AThe member number to display on the card.
memberNumberLengthstring8The member number length.
rankstringN/AThe card rank.
rankLengthstring2The card rank length.
showBackboolfalseShows the back of the card.
showCardHolderNamebooltrueShows the name of the card holder.
showCardNumberbooltrueShows the card number. Note: Only applicable for type bupa.
showIssueDatebooltrueShows the card issue date.
showIssueNumberbooltrueShows the issue number.
showMembershipNumberbooltrueShows the membership number.
showSwipeBarbooltrueWhether or not to show the black swipe bar on the back of the card.
showRankbooltrueShows the rank.
typestringgenericType of health fund card. Available options: genericahmbupambphcf. (More coming soon)
widthnumber300The width of the card.

Example

To run the example in the example/ folder:

  • Ensure you have react-native installed globally.
  1. cd example/
  2. npm install
  3. react-native run-ios
import HealthCard from 'react-native-health-card';

...
<HealthCard
  showSwipeBar
  focus="memberNumber"
  memberNumber="123456789"
  memberNumberLength={10}
  issueDate="01/01/2015"
  rank="01"
  issueNumber="02"
  showRank={false}
  type="medibank"
/>
...