myntra-react-native-scratch
Getting started
$ npm install myntra-react-native-scratch --save
Mostly automatic installation
$ react-native link myntra-react-native-scratch
Manual installation
iOS
- In XCode, in the project navigator, right click
Libraries
➜Add Files to [your project's name]
- Go to
node_modules
➜myntra-react-native-scratch
and addRNScratch.xcodeproj
- In XCode, in the project navigator, select your project. Add
libRNScratch.a
to your project'sBuild Phases
➜Link Binary With Libraries
- Run your project (
Cmd+R
)<
Android
- Open up
android/app/src/main/java/[...]/MainActivity.java
- Add
import com.como.RNTScratchView.ScratchViewPackage;
to the imports at the top of the file - Add
new ScratchViewPackage()
to the list returned by thegetPackages()
method
- Append the following lines to
android/settings.gradle
:include ':myntra-react-native-scratch' project(':myntra-react-native-scratch').projectDir = new File(rootProject.projectDir, '../node_modules/myntra-react-native-scratch/android')
- Insert the following lines inside the dependencies block in
android/app/build.gradle
:implementation project(':myntra-react-native-scratch')
Usage
The ScratchView will fill its containing view and cover all other content untill you scratch it Just put it as the last component in your view
;; { // Do something } { // Do domething like showing the progress to the user } { // Do something } { // Example: change a state value to stop a containing // FlatList from scrolling while scratching this; } { return <View style= width: 300 height: 300 > <ComponentA> // will be covered by the ScratchView <ComponentB> // will be covered by the ScratchView <ScratchView id=1 // ScratchView id (Optional) brushSize=10 // Default is 10% of the smallest dimension (width/height) threshold=70 // Report full scratch after 70 percentage, change as you see fit. Default is 50 fadeOut=false // Disable the fade out animation when scratch is done. Default is true placeholderColor="#AAAAAA" // Scratch color while image is loading (or while image not present) imageUrl="http://yourUrlToImage.jpg" // A url to your image (Optional) resourceName="your_image" // An image resource name (without the extension like '.png/jpg etc') in the native bundle of the app (drawble for Android, Images.xcassets in iOS) (Optional) resizeMode="cover|contain|stretch" // Resize the image to fit or fill the scratch view. Default is stretch onImageLoadFinished=thisonImageLoadFinished // Event to indicate that the image has done loading onTouchStateChanged=thisonTouchStateChangedMethod // Touch event (to stop a containing FlatList for example) onScratchProgressChanged=thisonScratchProgressChanged // Scratch progress event while scratching onScratchDone=thisonScratchDone // Scratch is done event />} </View> } ;