Skip to content
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. 📱
JavaScript
Branch: master
Clone or download

Latest commit

rcaferati Merge pull request #37 from coreplane/fix-onpress-type
TypeScript fix for AwesomeButtonProps.onPress
Latest commit 26c331b Mar 6, 2020

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo add indepentend control for border radius Nov 24, 2019
src Fix doublepress Dec 15, 2019
.babelrc implement basic test strategy Aug 19, 2018
.eslintrc.json refactor animation strategy Mar 21, 2018
.gitignore update snapshots Feb 5, 2019
.npmignore initial commit Mar 6, 2018
.travis.yml Pump CI node version Nov 21, 2019
LICENSE initial commit Mar 6, 2018
README.md Update README.md Nov 21, 2019
index.d.ts adjust type for AwesomeButtonProps.onPress Jan 27, 2020
package-lock.json 1.6.0 Jan 24, 2020
package.json 1.6.0 Jan 24, 2020
yarn.lock snapshot update Nov 3, 2019

README.md

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.

You can’t perform that action at this time.