React Native: Shine Button (Android/iOS)

React Native Bridge for native ChadCSong/ShineButton & imwcl/WCLShineButton. Effects like shining.

Getting started

$ npm install react-native-shine-button --save
$ react-native link react-native-shine-button
$ react-native link react-native-vector-icons

Android

Please add below snippet to defaultConfig in your app build.gradlefile. This is with respect to ISSUE: 1:

jackOptions {
    enabled true
}

Please add below snippet above dependencies in your app build.gradle:

buildscript {
    repositories {
        jcenter()
        google()
        maven { url "https://jitpack.io" }
    }

}

allprojects {
    repositories {
        jcenter()
        google()
        maven { url "https://jitpack.io" }
    }
}

Note: This library is supported on Android SDK 27 > above

iOS

Run Command: cd ../node_modules/react-native-shine-button/ios && pod install. If it has error => try pod repo update then pod install
Add WCLShineButton.framework in Embedded Binaries & Linked Frameworks and Libraries. You can find this library from below path:

node_modules/react-native-shine-button/ios/WCLShineButton/WCLShineButton.xcodeproj
Now build your iOS app through Xcode
If you receive below error, please check video below in order to resolve the same:

SOLUTION

Usage

import RNShineButton from 'react-native-shine-button';

<RNShineButton shape={"heart"} color={"#808080"} fillColor={"#ff0000"} size={100} />

Vector Icons Usage

Now you can even provide custom vector icons by using react-native-vector-icons. Please use below snippet:

import RNShineButton from 'react-native-shine-button';
import Icon from 'react-native-vector-icons/FontAwesome'

let music = <Icon family={"FontAwesome"} name={"music"} color={"#808080"} />;

<RNShineButton shape={music} color={"#808080"} fillColor={"#ff0000"} size={100} />

Note:

We have added family prop for Icon class, please make sure that you pass the props

Props

Prop	Type	Note
`shape`	`string OR react-native-vector-icons`	The type of Shine Button you want. It's props are heart, like, star, smile. Even you are specify a react-native-vector-icons
`color`	`string: HEX-COLOR`	Color which you want then the Shine Button is not active
`fillColor`	`string: HEX-COLOR`	Fill Color then the Shine Button is clicked
`size`	`number`	Size of Shine Button
`disabled`	`bool`	Disabling the Shine Button
`value`	`bool`	Default value whether it is selected or not
`onChange`	`func`	It is invoke then the value of shine button is change

Credit

Android lib ChadCSong/ShineButton Android implement.
iOS lib imwcl/WCLShineButton iOS implement

Contribution

Contributions are welcome and are greatly appreciated! Every little bit helps, and credit will always be given.

License

RNShineButton is provided under the Apache License.

xuyuanzhou/react-native-shine-button