Different customizable animated and 3D buttons of React Native

Different customizable animated and 3D buttons of React Native

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

AttributesTypeDefaultDescription
activityColorString#FFFFFFButton activity indicator color
activeOpacityNumber1Button active state opacity
backgroundActiveString#C0C0C0Button active state background-color
backgroundColorString#C0C0C0Button content background-color
backgroundDarkerString#9F9F9FButton bottom-front-face background-color
backgroundShadowString#C0C0C0Button bottom shaddow background-color
backgroundPlaceholderString#C0C0C0Button placeholder background-color
backgroundProgressString#C0C0C0Button progress bar background-color
borderColorStringnullButton border-color
borderRadiusNumber4Button border-radius
borderWidthNumber0Button border-width
heightNumber50Button height
widthNumbernullSetting width to null mirrors an auto behaviour
paddingHorizontalNumber12Sets the button horizontal padding
paddingTopNumber0Sets the button padding top
paddingBottomNumber0Sets the button padding bottom
stretchBooleanfalseWhen set to true together with width set to null the button fills it's parent component width
disabledBooleantrueButton disabled state: cancels animation and onPress func
raiseLevelNumber4Button 3D raise level
ExtraContentNodenullRenders a custom component inside the button content body
springReleaseBooleantrueButton uses spring on the release animation
onPress              Function  nullButton onPress function. It receives a next argument when the progress prop is set to true
progress            Boolean   falseWhen set to true enables progress animation
progressLoadingTime  Number   3000Number in ms for the maximum progress bar animation time
textColorString#FFFFFFButton default label text color
textLineHeightNumber20Button default label text line height
textSizeNumber16Button default label text font size
textFontFamilyStringnullButton 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.

Check it on GitHub