Home

Awesome

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.

<img width="240" src='https://raw.githubusercontent.com/rcaferati/react-native-really-awesome-button/master/assets/demo-button-blue-new.gif?raw=true' /><img width="240" src='https://raw.githubusercontent.com/rcaferati/react-native-really-awesome-button/master/assets/demo-button-rick.gif?raw=true' /><img width="240" src='https://raw.githubusercontent.com/rcaferati/react-native-really-awesome-button/master/assets/demo-button-cartman.gif?raw=true' />

Snack on Expo

Access the snack at expo.dev.

<img src="https://caferati.me/images/github/expo-snack.png" width="800" />

Figma File

Import it directly into your Figma project.

<img src="https://caferati.me/images/github/figma-awesome-button.png" width="800" />

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={async (next) => {
        /** await for something; then: **/
        next();
      }}
    >
      Text
    </AwesomeButton>
  );
}

Importing a specific theme

  import { ThemedButton } from 'react-native-really-awesome-button';

  function ButtonWithTheme() {
    return (
      <>
        <ThemedButton name="rick" type="primary">Rick's Primary Button</ThemedButton>
        <ThemedButton name="rick" type="secondary">Rick's Secondary Button</ThemedButton>
      </>
    );
  }

Custom Children

import AwesomeButton from "react-native-really-awesome-button";

function ButtonWithCustomChildren() {
  return (
    <AwesomeButton>
      <Image source="require('send-icon.png)" />
      <Text>Send it</Text>
    </AwesomeButton>
  );
}

Adding content before and after the button label

Useful for handling icons or any other inlined content which animates together with the button text.

  import { ThemedButton } from 'react-native-really-awesome-button';
  import { FontAwesome } from "@expo/icons";

  function ButtonWithIcon() {
    return (
      <ThemedButton
        name="bruce"
        type="primary"
        before={<FontAwesome name="twitter" />}>
        Rick's Primary Button
      </ThemedButton>
    );
  }

Extra content placement

You can use the extra prop to render a component inside the button content body; this should be useful to render an image or gradient background

import { StyleSheet } from "react-native";
import AwesomeButton from "react-native-really-awesome-button";
import LinearGradient from "react-native-linear-gradient";

function ButtonWithExtraContent() {
  return (
    <AwesomeButton
      extra={
        <LinearGradient
          colors={["#4C63D2", "#BC3081", "#F47133", "#FED576"]}
          style={{ ...StyleSheet.absoluteFillObject }}
        />
      }
    >
      <Text>Instagram</Text>
    </AwesomeButton>
  );
}

Full event control

Added a set of controlling events on v2, giving control of every animation stage like onPressedIn and onPressedOut which are triggered on the Animated callback.

import { StyleSheet } from "react-native";
import AwesomeButton from "react-native-really-awesome-button";
import LinearGradient from "react-native-linear-gradient";

function ButtonWithExtraEvents() {
  return (
    <>
      <AwesomeButton
        onPressIn={handlePressIn}
        onPressedIn={handlePressedIn}
        onPressOut={handlePressOut}
        onPressedOut={handlePressedOut}
      >
        Label
      </AwesomeButton>
      <AwesomeButton
        progress
        onProgressStart={handleOnProgressStart}
        onProgressEnd={handleOnProgressEnd}
        onPress={handleOnPress}
      >
        Label
      </AwesomeButton>
    </>
  );
}

Props

AttributesTypeDefaultDescription
activityColorString#FFFFFFButton activity indicator color
activeOpacityNumber1Button active state opacity
animatedPlaceholderBooleantrueWhen set to false removes the placeholder animation loop
backgroundActiveString#C0C0C0Button active state background-color
backgroundColorString#C0C0C0Button content background-color
backgroundDarkerString#9F9F9FButton bottom-front-face background-color
backgroundShadowString#C0C0C0Button bottom shadow background-color
backgroundPlaceholderString#C0C0C0Button placeholder background-color
backgroundProgressString#C0C0C0Button progress bar background-color
borderColorStringnullButton border-color
borderRadiusNumber4Button border-radius
borderWidthNumber0Button border-width
dangerouslySetPressablePropsPressablePropsnullExposes the PressableProps of the Pressable wrapper; it can overwrite all props except onPressIn and onPressOut
debouncedPressTimeNumber0Configure onPress function debounce time
disabledBooleantrueButton disabled state: cancels animation and onPress func
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
raiseLevelNumber4Button 3D raise level
beforeReactNodenullRenders a custom component before the button content Text
afterReactNodenullRenders a custom component after the button content Text
extraReactNodenullRenders a custom component inside the button content body
springReleaseBooleantrueButton uses elastic spring on the release animation
progressBooleanfalseWhen set to true enables progress animation
progressLoadingTime  Number3000Number 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
styleStylenull  Button container custom styles
onPressFunctionnullButton onPress function. It receives a next argument when the progress prop is set to true
onPressInFunctionnullTriggered with the onPressIn native event
onPressedInFunctionnullTriggered once the press animation has finished
onPressOutFunctionnullTriggered with the onPressOut native event
onPressedOutFunctionnullTriggered once the release animation has finished
onProgressStartFunctionnullTriggered before the progress animation has started
onProgressEndFunctionnullTriggered after the progress animation has finished

Web version

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

<img src="https://caferati.me/images/github/awesome-button-web.png" width="800" />

About the Author

Rafael Caferati

License

MIT. Copyright (c) 2022 Rafael Caferati.