4

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?

Ahmad S. Sadek
  • 106
  • 4
  • 9

3 Answers3

3

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
RoyBS
  • 1,241
  • 16
  • 16
3

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

It's implemented for Android and iOS.

Alexandr Egorov
  • 266
  • 2
  • 5
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!!

HarshitMadhav
  • 4,769
  • 6
  • 36
  • 45
  • that's great thank you. I had tried previously to npm install this package and I was getting the 404 Error, and I had even opened an issue about it on their GitHub repo. It didn't come to my mind to change it from the package.json file. Another workaround to download this package which I did was: `npm install romangua/react-native-scratch-view --save` – Ahmad S. Sadek Feb 17 '19 at 09:21
  • locate the package.json file in your project and just paste the dependencies line like above in that file and then run npm install it will be installed automatically – HarshitMadhav Feb 17 '19 at 09:36