Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

    react-native-shine-buttonpublic

    PRs Welcome

    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 Default 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

    Contribution

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

    License

    Copyright @ Pranav Raj Singh Chauhan

    RNShineButton is provided under the Apache License.

    Keywords

    install

    npm i react-native-shine-button

    Downloadsweekly downloads

    47

    version

    0.0.9

    license

    MIT

    repository

    githubgithub

    last publish

    collaborators

    • avatar