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

License

MIT. Copyright (c) 2022 Rafael Caferati.