react-native-sparkbutton

A checked/button with Twitter's heart explosion like animation (for Android). Based on the Android library: https://github.com/varunest/SparkButton

Getting started

$ npm install react-native-sparkbutton --save

Mostly automatic installation

$ react-native link react-native-sparkbutton

Manual installation

Android

1. Open up android/app/src/main/java/[...]/MainActivity.java

• Add import com.github.godness84.RNSparkButton.RNSparkButtonPackage; to the imports at the top of the file
• Add new RNSparkButtonPackage() to the list returned by the getPackages() method

1. Append the following lines to android/settings.gradle:

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

2. Insert the following lines inside the dependencies block in android/app/build.gradle:

     compile project(':react-native-sparkbutton')
   

Usage

import { Component } from 'react';
import SparkButton from 'react-native-sparkbutton';
 
class MyExample extends Component {
  state = {
    checked: false
  }
 
  render() {
    const { checked } = this.state;
    return (
      <SparkButton        
        style={{ width: 100, height: 100 }}
        activeImageSrc={require('./assets/thumbs-up.png')}
        inactiveImageTint={'rgba(255,255,255,0.8)'}
        primaryColor={"yellow"}
        secondaryColor={"red"}
        animationSpeed={1}
        checked={checked}
        onCheckedChange={(checked) => this.setState({ checked })} />
    );
  }
}

Props

Methods