ScratchCard

Features

• Scratch-off effect using pan gesture
• Customizable overlay and behind content
• Supports dynamic layout size
• Self-contained and copy-paste friendly

Dependencies

This component requires React Native Reanimated, Skia, and Gesture Handler:

npx expo install react-native-reanimated react-native-gesture-handler @shopify/react-native-skia

Usage

This component is self-contained and can be used by simply copying the file.

Steps

1. Copy and paste the ScratchCard.tsx file into your project

2. Use it inside your component:

   import ScratchCard from "./ScratchCard"
   
   export default function App() {
     return (
       <ScratchCard containerStyle={{ width: 300, height: 300 }}>
         <ScratchCard.Behind>
           {/* Content shown after scratching */}
           <Image source={require("./gift.png")} style={{ width: 300, height: 300 }} />
         </ScratchCard.Behind>
         <ScratchCard.Overlay>
           {/* Scratchable surface */}
           <Rect
             x={0}
             y={0}
             width={300}
             height={300}
             color="#ccc"
           />
         </ScratchCard.Overlay>
       </ScratchCard>
     )
   }

Props

ScratchCard Props

ScratchCard.Overlay

Defines the top layer that the user scratches off. Can be any Skia element or function receiving layout size.

ScratchCard.Behind

Defines the hidden content revealed during scratching. Can be any RN element.

Made with love by niche.guys