/react-native-really-awesome-button

React Native button component. Awesome Button is a 3D at 60fps, progress enabled, social ready, extendable, production ready component that renders an awesome animated set of UI buttons. 📱

Primary LanguageJavaScriptMIT LicenseMIT

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.