react-native-scratch-card

react-native-scratch-card (Android Only)

#### Thanks for https://github.com/D-clock/ScratchView/

Installation

react-native >= 0.60.0

$3

$ yarn add react-native-scratch-card

or

$ npm install react-native-scratch-card --save

$3

xml

  package="com.myawesomeapp"

  xmlns:tools="http://schemas.android.com/tools" 

  ...

  >

$3

xml

      android:name=".MainApplication"

      android:label="@string/app_name"

      android:icon="@mipmap/ic_launcher"

      android:roundIcon="@mipmap/ic_launcher_round"

      android:allowBackup="false"

      tools:replace="android:allowBackup" 

        ...





That's is all!



react-native <= 0.59.0



$3



$3

$ yarn add react-native-scratch-card

$ react-native link react-native-scratch-card

or

$ npm install react-native-scratch-card --save

$ react-native link react-native-scratch-card

$3

xml

  package="com.myawesomeapp"

  xmlns:tools="http://schemas.android.com/tools" 

  ...

  >

$3

xml

      android:name=".MainApplication"

      android:label="@string/app_name"

      android:icon="@mipmap/ic_launcher"

      android:roundIcon="@mipmap/ic_launcher_round"

      android:allowBackup="false"

      tools:replace="android:allowBackup" 

        ...





$3



#### Android



1. Open up

android/app/src/main/java/[...]/MainApplication.java





- Add

import com.thebylito.RNScratchCardPackage;

 to the imports at the top of the file

- Add

new RNScratchCardPackage() to the list returned by the getPackages()

 method



2. Append the following lines to

android/settings.gradle



   include ':react-native-scratch-card'

   project(':react-native-scratch-card').projectDir = new File(rootProject.projectDir, 	'../node_modules/react-native-scratch-card/android')



3. Insert the following lines inside the dependencies block in

android/app/build.gradle



     compile project(':react-native-scratch-card')





Example

javascript

import React, { Component } from "react";

import { StyleSheet, Text, View, Image, Alert } from "react-native";

import ScratchCard from "react-native-scratch-card";



export default class App extends Component {

  state = { color: "red", status: 0 };

  render() {

    return (

      

        {this.state.status}

                  brushSize={125}

          getPercent={percent => {

            this.setState({ status: percent });

          }}

          onEnd={() => {

            Alert.alert("acabou!");

          }}

          maxPercent={50}

          style={{

            justifyContent: "center",

            alignItems: "center",

            width: 400,

            height: 400

          }}

          color={"gray"}

        >

          Hello World!!!

        

      

    );

  }

}



const styles = StyleSheet.create({

  container: {

    flex: 1,

    justifyContent: "center",

    alignItems: "center",

    backgroundColor: "#F5FCFF"

  }

});

Installation

react-native >= 0.60.0

$3

$ yarn add react-native-scratch-card

or

$ npm install react-native-scratch-card --save

$3

xml

  package="com.myawesomeapp"

  xmlns:tools="http://schemas.android.com/tools" 

  ...

  >

$3

xml

      android:name=".MainApplication"

      android:label="@string/app_name"

      android:icon="@mipmap/ic_launcher"

      android:roundIcon="@mipmap/ic_launcher_round"

      android:allowBackup="false"

      tools:replace="android:allowBackup" 

        ...





That's is all!



react-native <= 0.59.0



$3



$3

$ yarn add react-native-scratch-card

$ react-native link react-native-scratch-card

or

$ npm install react-native-scratch-card --save

$ react-native link react-native-scratch-card

$3

xml

  package="com.myawesomeapp"

  xmlns:tools="http://schemas.android.com/tools" 

  ...

  >

$3

xml

      android:name=".MainApplication"

      android:label="@string/app_name"

      android:icon="@mipmap/ic_launcher"

      android:roundIcon="@mipmap/ic_launcher_round"

      android:allowBackup="false"

      tools:replace="android:allowBackup" 

        ...





$3



#### Android



1. Open up

android/app/src/main/java/[...]/MainApplication.java





- Add

import com.thebylito.RNScratchCardPackage;

 to the imports at the top of the file

- Add

new RNScratchCardPackage() to the list returned by the getPackages()

 method



2. Append the following lines to

android/settings.gradle



   include ':react-native-scratch-card'

   project(':react-native-scratch-card').projectDir = new File(rootProject.projectDir, 	'../node_modules/react-native-scratch-card/android')



3. Insert the following lines inside the dependencies block in

android/app/build.gradle



     compile project(':react-native-scratch-card')

Example

javascript
import React, { Component } from "react";
import { StyleSheet, Text, View, Image, Alert } from "react-native";
import ScratchCard from "react-native-scratch-card";

export default class App extends Component {
state = { color: "red", status: 0 };
render() {
return (

{this.state.status}
brushSize={125}
getPercent={percent => {
this.setState({ status: percent });
}}
onEnd={() => {
Alert.alert("acabou!");
}}
maxPercent={50}
style={{
justifyContent: "center",
alignItems: "center",
width: 400,
height: 400
}}
color={"gray"}
>
Hello World!!!

);
}
}

const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center",
alignItems: "center",
backgroundColor: "#F5FCFF"
}
});