Premium Gym Membership Card in React Native Skia — Hologram Shimmer + Card Flip
A premium gym membership card with a 3-layer radial gradient hologram shimmer in Skia Canvas (each at a different phase), a diagonal shine sweep on loop, a 180° card flip via Reanimated perspective, and a full QR code from pure Skia Rect primitives — zero image assets.
Premium Gym Membership Card in React Native Skia 💪
Hologram shimmer. Shine sweep. 180° card flip. QR code from primitives. Zero image assets.
3-layer hologram shimmer
// 3 radial gradients, each at a different phase offset
const phases = [0, (2 * Math.PI) / 3, (4 * Math.PI) / 3];
phases.forEach((phase, i) => {
const t = (animValue.value + phase) % (2 * Math.PI);
const cx = CARD_W * 0.5 + Math.cos(t) * CARD_W * 0.3;
const cy = CARD_H * 0.4 + Math.sin(t) * CARD_H * 0.2;
canvas.drawCircle(cx, cy, 60, shimmerPaint); // RadialGradient paint
});Three independent radial gradients orbit the card surface at equal phase offsets, creating the iridescent hologram effect.
Diagonal shine sweep
shineProg.value = withRepeat(withTiming(1, { duration: 2400, easing: Easing.in(Easing.ease) }), -1, false);
// In Skia draw:
const shineX = interpolate(shineProg.value, [0, 1], [-CARD_W, CARD_W * 2]);
// Draw a thin rotated Rectangle at shineX position180° card flip — Reanimated perspective
const frontStyle = useAnimatedStyle(() => ({
transform: [
{ perspective: 1200 },
{ rotateY: `${interpolate(flip.value, [0, 1], [0, 90])}deg` },
],
opacity: flip.value < 0.5 ? 1 : 0,
}));QR code from Skia Rect primitives
The back-side QR is a 15×15 binary grid of Skia Rects — no QR library, no image. Same pattern as the SVG QR approach but drawn directly on the Skia canvas.
Stack: React Native · @shopify/react-native-skia · Reanimated 3 · TypeScript
I'm available for freelance & contract React Native work — apps, features, UI implementation, you name it.