How to implement a scratch card / view in react-native?

Question

I'm looking for a package to implement a scratch card in react-native. I have found this library https://github.com/thebylito/react-native-scratch-card but the problem is that it works only on android. Is there a library that works on both iOS and android, or can I implement this in pure javascript?

Answer 1

You can use a library I made: react-native-scratch

npm install react-native-scratch --save

This library supports both Android and iOS and enables you to use multiple scratch views in your app, for example - a FlatList with scratch cards.

Other functionality includes:

• Autofill the containing view to cover its content until you scratch
• User defined background color to use while the image is loading
• You can set an image from a url or from a resource file in your application (or no image at all)
• Image resize modes are supported (stretch/cover/contain)
• User defined brush size and scratch threshold
• Touch events (to stop a ScrollView/FlatList from scrolling while scratching)
• Progress report while scratching
• Fade animation (optional) when the scratch view reaches its scratch threshold

Answer 2

You can use this https://github.com/romangua/react-native-scratch-view library to implement the scratch card for both iOS and android.

Install it by running

npm install react-native-scratch-view --save

After that link it

react-native link react-native-scratch-view

In case if you get 404 not Found error in your terminal after running the install command. You can do this:

1- Open your package.json file

2- In your dependencies do something like this:

"dependencies":{
    "react-native-scratch-view": "romangua/react-native-scratch-view",
}

3- Run npm install after this and you can use it directly in your project by using import ScratchImageView from 'react-native-scratch-view';

I am using the same library for both Android and iOS and it's working on both.

Hope this helps!!

Answer 3

UPD 2022 Try this library https://www.npmjs.com/package/rn-scratch-card

It's implemented for Android and iOS.