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

2. 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')
   

3. 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

Prop name	Description	Type	Default value
style	Style for the container of the button	object	{}
checked	Checked or not. In case it's checked after mounting it will play the animation	bool	false
activeImageSrc	Source of the active image	{uri: '...'} or require('image.png')	none
inactiveImageSrc	Source of the inactive image	{uri: '...'} or require('image.png')	none
activeImageTint	Tint color to apply to active image	color	none
inactiveImageTint	Tint color to apply to inactive image	color	none
primaryColor	Primary color for the explosion	color	none
secondaryColor	Secondary color for the explosion	color	none
animationSpeed	Speed of the explosion	number	1.0
touchableProps	Props for the Touchable that wraps the button internally	object	none
onCheckedChange	Called when the checked state changes	function	none
onPress	Called when the button is pressed	function	none

Methods

Method name	Params	Description
playAnimation	none	Play the explosion animation