React Native Health Card 🏥 💳
React Native Health Card is a module that displays a look-a-like health fund card on your react native view!
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
| Property | Type | Default | Description |
|---|---|---|---|
| bgColor | string | #419dff | The background color of the health card of type generic. |
| cardHolderName | string | John Smith | Name of the card holder. |
| cardNumber | string | N/A | The card number. Note: Only applicable for type bupa. |
| cardNumberLength | string | N/A | The card number length. Note: Only applicable for type bupa. |
| height | number | 180 | The height of the card. |
| focus | string | all | The attribute to focus on. Available options: all, memberNumber, issueNumber, rank, issueDate, cardHolderName. |
| issueDate | string | N/A | The card issue date. E.g. 12/12/2015 |
| issueDateFormat | string | dd/mm/yyyy | Format of the issue date in the format of d, m, and y. |
| issueNumber | string | N/A | The issue number to display on the card. |
| issueNumberLength | string | 2 | The length of the issue number. |
| memberNumber | string | N/A | The member number to display on the card. |
| memberNumberLength | string | 8 | The member number length. |
| rank | string | N/A | The card rank. |
| rankLength | string | 2 | The card rank length. |
| showBack | bool | false | Shows the back of the card. |
| showCardHolderName | bool | true | Shows the name of the card holder. |
| showCardNumber | bool | true | Shows the card number. Note: Only applicable for type bupa. |
| showIssueDate | bool | true | Shows the card issue date. |
| showIssueNumber | bool | true | Shows the issue number. |
| showMembershipNumber | bool | true | Shows the membership number. |
| showSwipeBar | bool | true | Whether or not to show the black swipe bar on the back of the card. |
| showRank | bool | true | Shows the rank. |
| type | string | generic | Type of health fund card. Available options: generic, ahm, bupa, mbp, hcf. (More coming soon) |
| width | number | 300 | The width of the card. |
Example
To run the example in the example/ folder:
- Ensure you have
react-nativeinstalled globally.
cd example/npm installreact-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" /> ...
