Nothing Precedes Matter

    react-native-really-awesome-button
    TypeScript icon, indicating that this package has built-in type declarations

    1.6.0 • Public • Published

    React Native <AwesomeButton />

    Travis NPM

    react-native-really-awesome-button is a performant, extendable, production ready React Native component that renders an animated set of 3D UI buttons.

    Run the live demo @ expo.io.

    Figma File

    Import it directly into your Figma project.

    Installation

    npm install --save react-native-really-awesome-button
    

    Usage

    Basic

    import AwesomeButton from "react-native-really-awesome-button";
     
    function Button() {
      return <AwesomeButton>Text</AwesomeButton>;
    }

    Progress

    import AwesomeButton from "react-native-really-awesome-button";
     
    function Button() {
      return (
        <AwesomeButton
          progress
          onPress={next => {
            /** Do Something **/
            next();
          }}
        >
          Text
        </AwesomeButton>
      );
    }

    Custom Children

    import AwesomeButton from "react-native-really-awesome-button";
     
    function Button() {
      return (
        <AwesomeButton>
          <Image source="require('send-icon.png)" />
          <Text>Send it</Text>
        </AwesomeButton>
      );
    }

    Importing a specific theme

      import AwesomeButtonRick from 'react-native-really-awesome-button/src/themes/rick';
     
      function Button() {
        return (
         <AwesomeButtonRick type="primary">Rick's Primary Button</AwesomeButtonRick>
         <AwesomeButtonRick type="secondary">Rick's Secondary Button</AwesomeButtonRick>
        );
      }

    Extra Content placement

    You can use the Extra Content prop to render a component inside the button content body. This could be useful to render an image or gradient background

    import AwesomeButton from "react-native-really-awesome-button";
    import LinearGradient from "react-native-linear-gradient";
     
    function Button() {
      return (
        <AwesomeButton
          ExtraContent={
            <LinearGradient
              colors={["#4C63D2", "#BC3081", "#F47133", "#FED576"]}
            />
          }
        >
          <Text>Instagram</Text>
        </AwesomeButton>
      );
    }

    Props

    Attributes Type Default Description
    activityColor String #FFFFFF Button activity indicator color
    activeOpacity Number 1 Button active state opacity
    backgroundActive String #C0C0C0 Button active state background-color
    backgroundColor String #C0C0C0 Button content background-color
    backgroundDarker String #9F9F9F Button bottom-front-face background-color
    backgroundShadow String #C0C0C0 Button bottom shaddow background-color
    backgroundPlaceholder String #C0C0C0 Button placeholder background-color
    backgroundProgress String #C0C0C0 Button progress bar background-color
    borderColor String null Button border-color
    borderRadius Number 4 Button border-radius
    borderWidth Number 0 Button border-width
    height Number 50 Button height
    width Number null Setting width to null mirrors an auto behaviour
    paddingHorizontal Number 12 Sets the button horizontal padding
    paddingTop Number 0 Sets the button padding top
    paddingBottom Number 0 Sets the button padding bottom
    stretch Boolean false When set to true together with width set to null the button fills it's parent component width
    disabled Boolean true Button disabled state: cancels animation and onPress func
    raiseLevel Number 4 Button 3D raise level
    ExtraContent Node null Renders a custom component inside the button content body
    springRelease Boolean true Button uses spring on the release animation
    onPress Function null Button onPress function. It receives a next argument when the progress prop is set to true
    progress Boolean false When set to true enables progress animation
    progressLoadingTime Number 3000 Number in ms for the maximum progress bar animation time
    textColor String #FFFFFF Button default label text color
    textLineHeight Number 20 Button default label text line height
    textSize Number 16 Button default label text font size
    textFontFamily String null Button default label text font family
    style Style null Button container custom styles

    Web version

    Checkout the web version of the Awesome Button UI component at rcaferati/react-awesome-button

    About the Author

    Rafael Caferati

    License

    MIT. Copyright (c) 2018 Rafael Caferati.

    Install

    npm i react-native-really-awesome-button

    DownloadsWeekly Downloads

    395

    Version

    1.6.0

    License

    MIT

    Unpacked Size

    323 kB

    Total Files

    23

    Last publish

    Collaborators

    • rcaferati