A points or stamp card on a shop photo that tilts and flips to a member code.
Pro<LoyaltyCard />3 variantsiOS · Android · Expo Go
9:41
Installation
One command copies the source into your app — you own the code and can change anything.
Usage
Colours, radius and light / dark come from
useKit(). Wrap your app in <KitProvider accent="#6366f1" radius={14}> to re-skin every component at once.Props
| Prop | Type | Default |
|---|---|---|
| brand Programme name, top-left. | string | — |
| member Member's name (bottom line). | string | — |
| memberId Shown on the back under the code. | string | — |
| tier Tier pill, e.g. "Gold". | string | — |
| points Points balance (ignored with stamps). | number | — |
| nextReward Draws progress toward the next reward. | { at: number; label: string } | — |
| stamps Stamp card instead of points. | { filled: number; total: number; reward?: string } | — |
| stampGlyph Glyph in a filled stamp ("☕"). | string | "✓" |
| image Card art — a photo of the shop, product or a texture. | ImageSourcePropType | — |
| renderCode Draw a real scannable code on the back. | (memberId: string) => ReactNode | — |
| flipped / defaultFlipped / onFlip Controlled or uncontrolled side. | boolean / boolean / (flipped) => void | — / false / — |
| tilt Tilt toward the finger. | boolean | true |
| radius Corner radius. | number | 18 |
| background Card colour when there is no image. | string | "#2b1f17" |
| labels Every built-in string, for translation ({n} and {reward} are filled in). | { ready?, more?, reward?, points?, toNext?, back? } | English |
| style Style for the root. | StyleProp<ViewStyle> | — |
Behaviour & accessibility
- Touch
- Tap the card to flip it to the member code for the till, and tap again to turn it back.
- Motion
- With tilt on (the default) the card leans toward your finger with a moving reflection, then turns over in 3D on a spring.
- Screen readers
- The card is a button labelled with the brand, member and their points or stamp count.
Source
Did you like the content?