React Native <AwesomeButton />

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

Snack on Expo

Access the snack at expo.dev.

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={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

Attributes	Type	Default	Description
activityColor	`String`	`#FFFFFF`	Button activity indicator color
activeOpacity	`Number`	`1`	Button active state opacity
animatedPlaceholder	`Boolean`	`true`	When set to `false` removes the placeholder animation loop
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 shadow 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
dangerouslySetPressableProps	`PressableProps`	`null`	Exposes the `PressableProps` of the `Pressable` wrapper; it can overwrite all props except `onPressIn` and `onPressOut`
debouncedPressTime	`Number`	`0`	Configure onPress function debounce time
disabled	`Boolean`	`true`	Button disabled state: cancels animation and onPress func
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
raiseLevel	`Number`	`4`	Button 3D raise level
before	`ReactNode`	`null`	Renders a custom component before the button content Text
after	`ReactNode`	`null`	Renders a custom component after the button content Text
extra	`ReactNode`	`null`	Renders a custom component inside the button content body
springRelease	`Boolean`	`true`	Button uses elastic spring on the release animation
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
onPress	`Function`	`null`	Button onPress function. It receives a `next` argument when the `progress` prop is set to `true`
onPressIn	`Function`	`null`	Triggered with the `onPressIn` native event
onPressedIn	`Function`	`null`	Triggered once the press animation has finished
onPressOut	`Function`	`null`	Triggered with the `onPressOut` native event
onPressedOut	`Function`	`null`	Triggered once the release animation has finished
onProgressStart	`Function`	`null`	Triggered before the progress animation has started
onProgressEnd	`Function`	`null`	Triggered after the progress animation has finished

Web version

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

About the Author

Rafael Caferati

Checkout my Portfolio Website
Connect with me on LinkedIn @rcaferati

rcaferati/react-native-really-awesome-button

rcaferati

Reviews

Repository Details