Rn-scratch-card - React Native Scratch Card which temporarily hides content from user

Overview

rn-scratch-card

React Native Scratch Card which temporarily hides content from a user

Scratch Sample

Check out it on dribble.

Installation

yarn add rn-scratch-card

https://nodei.co/npm/rn-scratch-card.png?downloads=true&downloadRank=true&stars=true

Usage

import { ScratchCard } from 'rn-scratch-card'

// ...
<ScratchCard
  source={require('./scratch_foreground.png')}
  brushWidth={50}
  onScratch={handleScratch}
  style={styles.scratch_card}
/>

Example project setup

cd rn-scratch-card
yarn install
cd example
yarn install

If you are launching project under iOS, please, also remember to

cd ios
pod install

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

You might also like...
Android Library to build a UI Card
Android Library to build a UI Card

Card Library Travis master: Travis dev: Card Library provides an easy way to display a UI Card using the Official Google CardView in your Android app.

A tinder like swipeable card stack component
A tinder like swipeable card stack component

AndroidSwipeableCardStack Change log: provide option to infinitly swipe in a loop card rotation setting card gravity setting undo animation Thanks for

A simple implementation of swipe card like StreetView

A simple implementation of swipe card like StreetView!! DONATIONS This project needs you! If you would like to support this project's further developm

Created a Tinder like Card Deck & Captain Train like Toolbar

TinderView Created A Simple and Beautiful Tinder like card deck & Captain Train like toolbar. This is heavily based on AndroidSwipeableCardStack, wenc

PCard  Add payment card screen made using JetPack Compose
PCard Add payment card screen made using JetPack Compose

PCard Add payment card screen made using JetPack Compose Find this repository useful? ❤️ Support it by joining stargazers for this repository. ⭐ And f

Card with swipe options in Jetpack Compose

SwipeableActionCard Card with swipe options in Jetpack Compose Tutorial: Click Here Import SwipeableActionCard library Add this in project level build

Android App to Teach the Card Counting Skill

card-counting Android App to Teach the Card Counting Skill. The skill can be used to make more informed decisions while playing games like Blackjack.

Android Card-Library
Android Card-Library

Android Card-Library Technology Stack Android Studio Bumblebe

:bread: Make your native android Toasts Tasty
:bread: Make your native android Toasts Tasty

TastyToast Make your native android toast look beautiful. Preview About Refer Here Wiki Grab the above demo app from here : Dependency Add dependency

Comments
  • scratch gesture not working on android

    scratch gesture not working on android

    Having no issues with package on ios, but the scratch gesture on android UI isn't working properly. Seems the drag gesture isn't registering on the Scratch grid. However, the initial tap gesture does update the grid. Below is the component calling the styled components utilizing the scratch card:

    ` <StyledView isCardEnabled={isCardEnabled} />

        <StyledImage source={require('../../images/john.jpg')} />
    
        <StyledScratchCard
          source={require('../../images/prize-wallpaper.png')}
          brushWidth={40}
          onScratch={(percentage) => {
            setStartedScratch(true)
            setActiveCard(card)
    
            if (percentage >= 20) {
              setRevealText(scratchText[0])
            }
    
            if (percentage >= 55) {
              setRevealText(scratchText[1])
              setEnabledCards([...enabledCards, cardToEnable])
              setCompletedCards(_.sortedUniq([...completedCards, card]))
            }
    
            if (percentage === 90) {
              setRevealText(scratchText[2])
            }
          }}
        />
      </CardContainer>`
    
    opened by jjenkins120 2
  • Prop for Images from URL

    Prop for Images from URL

    Hello!

    Thanks for the library <3

    im here with a question...can you implement a prop that accept an url for the image? this is because now im fetching the image from backend with react-native-fs, saving it on temp directory, get this file and parse it to base64 to show them.

    i mean its a nice feature but i don know how to code them in swift/kotlin to implement it (i try on swift, if i can do it, i write the code on a pr)

    Thanks you!

    opened by kloehz 2
  • Mutiple scratch card can't be having same source of image

    Mutiple scratch card can't be having same source of image

    Once the scratch is completed in a component, every other scratch card with the same source of image is showing like scratched, this is not getting resetted even after unmounting the component.

    Also another issue

    the image shown in the masonry list is not a scratch card but the same source of image used, it is getting scratched too

    image

    opened by prajeesh-splendre 2
  • Scratch Card does not scratch smoothly

    Scratch Card does not scratch smoothly

    It is getting scratched but, when i swipe from left to right side it only scratches as dots on each swipe, but when i try the same from right to left it scratches more smoothly than the left to right swipe

    image

    opened by prajeesh-splendre 0
Releases(1.0.0)
Owner
Sweatcoin
Sweatcoin converts movement into a currency that you can spend on real life goods, service and experiences, and makes movement more rewarding.
Sweatcoin
ScratchView 7.0 0.0 L4 Java repo is UX Design involving scratch cards like views which are scratched to reveal the information they conceal.

ScratchView Intro ScratchView repo is UX Design involving scratch cards like views which are scratched to reveal the information they conceal. There a

Harish Sridharan 1.1k Dec 24, 2022
ScratchView repo is UX Design involving scratch cards like views which are scratched to reveal the information they conceal.

ScratchView Intro ScratchView repo is UX Design involving scratch cards like views which are scratched to reveal the information they conceal. There a

Harish Sridharan 1.1k Dec 24, 2022
A View on which you can freely draw, customizing paint width, alpha and color, and take a screenshot of the content. Useful for note apps, signatures or free hand writing.

FreeDrawView A View that let you draw freely on it. You can customize paint width, alpha and color. Can be useful for notes app, signatures or hands-f

Riccardo Moro 643 Nov 28, 2022
Simple card app for Udacity's Android Basics: User Interface course

just-because-card Simple card app for Udacity's Android Basics: User Interface c

null 0 Jan 6, 2022
Inspired by Heinrich Reimer Material Intro and developed with love from scratch

Android Material Intro Screen Material intro screen is inspired by Material Intro and developed with love from scratch. I decided to rewrite completel

Tango Agency 2.7k Dec 19, 2022
💳 CreditCardView is an Android library that allows developers to create the UI which replicates an actual Credit Card.

CreditCard View CreditCardView is an Android library that allows developers to create the UI which replicates an actual Credit Card. Displaying and en

Vinay Gaba 769 Dec 14, 2022
A Tinder-like Android library to create the swipe cards effect. You can swipe left or right to like or dislike the content.

Swipecards Travis master: A Tinder-like cards effect as of August 2014. You can swipe left or right to like or dislike the content. The library create

Dionysis Lorentzos 2.3k Dec 9, 2022
Android View that displays different content based on its state

MultiStateView Android View that displays different content based on its state. Based off of MeetMe/MultiStateView The four different states the view

Kenny 1.2k Dec 16, 2022
Muirwik - a Material UI React wrapper written in Kotlin

Muirwik Welcome to Muirwik. Muirwik gets it name from being a Material UI React wrapper written in Kotlin. For more information, see the above links (

null 134 Nov 8, 2022
This a Ride User app in which in integrate almost every features of a Ride Share app.

My-Ride-App This a Ride app(User) in which I integrate almost every features of a Ride Share app. Here I use kotlin programing language, Google map SD

Khairul Islam 5 Apr 27, 2022