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

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

It's implemented for Android and iOS.