A photo gift card that tilts toward your finger and flips to reveal its code.
Pro<GiftCard />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 |
|---|---|---|
| amount Formatted amount, e.g. "₹2,000". | string | — |
| brand Store / brand, top-left. | string | — |
| message Short note on the front. | string | — |
| from / to Who sent it and who it's for. | string | — |
| code Redeem code, revealed on the back (grouped in fours). | string | — |
| validity Expiry line on the back. | string | — |
| onCopy Shows a Copy button — wire it to expo-clipboard. | (code: string) => void | — |
| image Card art — a photo or texture (require() or { uri }). | ImageSourcePropType | deep plum |
| tone Light text for dark art, dark text for pale art. | "light" | "dark" | "light" |
| redeemed Dim the card with a Redeemed label. | boolean | false |
| 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 | "#2a1630" |
| labels Every built-in string, for translation. | { tag?, for?, from?, redeemed?, code?, back?, copy?, copied? } | English |
| style Style for the root. | StyleProp<ViewStyle> | — |
Behaviour & accessibility
- Touch
- Tap the card to flip it over to the redeem code. The copy button calls onCopy and reads "Copied ✓" for a moment.
- 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, amount and redeemed state; the code is added to the label once it is flipped.
Source
Did you like the content?