rcaferati / react-native-really-awesome-button

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. 📱

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.

react-native-really-awesome-button's Issues

Progress Loading Time

the onPress function gets invoked just when the button is touched

Hi. My problem is that when I touch the button, it invokes the function but I need the function to get invoked after the user is done holding the button. Any solutions?

[Feature request] Add typescript types

Your plugin seems awesome, it will be great if you'd consider to have typescript declaration file.

Gradient Background?

Thanks for this component!

However, is it possible to use a Linear Gradient background for the awesome button?

Button onPress gets delayed by animation

I think the animation is postponing the onPress. Im doing a simple alert and it takes like 0.5 second for the alert appear before i click the button.Is there a way to make it quicker?why is it happening?your button on expo seems quicker

here is a gif of what's happening
https://gyazo.com/21e978e2c26554e800cf2f4c0fe32ea3

How to stop Progress Animation?

When i click the button the animation start the problem is that its continue without stopping after a while?

Buttons unresponsive in Expo SDK 39

Updated the SDK this morning, buttons were working perfectly yesterday, totally unresponsive after updating the Expo SDK

Running on android emulator

fontFamily or textFontFamily?

Thanks for the nice button 👍

textFontFamily prop doesn't work correctly in 1.6.0

I think there is a confusion with textFamily

https://github.com/rcaferati/react-native-really-awesome-button/blob/master/src/index.js#L66

https://github.com/rcaferati/react-native-really-awesome-button/blob/master/src/index.js#L103

A document problem

hey:
stretch
type Boolean
default false
When set to true together with width set to null the button fills it's parent component width

I set the stretch as true and witdh as null,the typescript show a error,

Type 'number | null' is not assignable to type 'number | undefined'

I set witdh as undefined fix this problem

so , I think docs where null maybe is undefined 😋

Problem with the colors?

Hi! Is there a bug with colors?

Because I cannot get the proper colors, despite I enter them correctly. My goal button is this:

However, I get this, I believe it is the use of the react-native-linear-gradient that fails? Also the text "Play" is not centered.

This is my component:

<AwesomeButton
      // size="small"
      // type="primaryFlat"
      activityColor="#FFFFFF"
      activeOpacity={1}
      // backgroundColor="red"
      backgroundDarker="#143254"
      backgroundShadow="#143254"
      backgroundPlaceholder="#143254"
      backgroundProgress="#C0C0C0"
      borderColor="#143254"
      borderRadius={5}
      borderWidth={3}
      height={50}
      width={null}
      paddingHorizontal={20}
      paddingTop={0}
      paddingBottom={0}
      stretch={false}
      disabled={false}
      raiseLevel={3}
      // ExtraContent={null}
      springRelease={true}
      onPress={null}
      progress={false}
      progressLoadingTime={3000}
      textColor="#FFFFFF"
      textLineHeight={20}
      textSize={14}
      textFontFamily="Proxima Nova Regular"
      ExtraContent={<LinearGradient colors={['#143254', '#3D638E', '#3D638E']} />}
    >
      {text}
    </AwesomeButton>

Thanks!

is there a Input component with the same animations/styles/borderBottom 3d effect ?

Issue with the documentation @textFamily

Hey man, I would like to first thank you for his awesome contribution! really nice keep them coming perhaps maybe next we can make icons look like these buttons!

I would like you to fix something in the documentation please. it says to change the fontFamily use textFamily prop. However, it is actually textFontFamily. Also, it says its of type number while it is actually a string.

Hope this helps!

Hair trigger when overlaying other button

Situation: Using a start and pause button, one "covering" the other using inline conditional control
Issue: The pause and start onPress-handlers accidentally fires when the other button is pressed (hair trigger).
Troubleshooting: Using react native Button-element removes the issue.

{!isPaused ?
    <AwesomeButton
                    ripple
                    onPress={() => timerStart()}
                    disabled={!isValid}
                        > Start
     </AwesomeButton>
                    : 
    <AwesomeButton
                            backgroundColor="crimson"
                            backgroundDarker="darkred"
                            ripple
                            onPress={() => dispatch(pauseTimer())}
                                > Paused
       </AwesomeButton>
 }

Expo needs update please

This project uses Expo SDK v33.0.0. If you want to open this project, the author will need to update the project's SDK version.

Seems like a neat project!

The onPress function gets invoked when you scroll through it

If the button is inside a ScrollView, it invokes the onPress function just scrolling through the view when the gesture starts from the button. It is like when you touch and move, it acts like touch and release. Any idea on how to solve it?

Accept relative widths (percentages)

I'm testing out the component (which is great btw), but I lack support for relative widths.

In my scenario, I'd like to be able to provide percentages in order to fill the full screen width (100%) when having a simple action button in the screen footer, or 50% if I have an accept/cancel situation.

Would you find this useful?

"onPress" event only fired when I hold the button and not when touched

"onPress" event only fired when I hold the button and not when touched

Button fires on swiping

Love this repo but and have used it quite a lot. Thanks for the time and effort for putting it together!

Big issue though! It seems to work fine within the bounds of a View, (Mostly because you arent swiping up or down in a view)
But you place it within a ScrollView and youll see it fires everytime you try to swipe up or down and accidently hit it. Native buttons dont fire like that and has caused great annoyance to many of my users. Currently investigating a fix and will report back if i should find one.

Transparent picture button

This is a sad story. I tried to use activityColor activeOpacity backgroundActive backgroundColor backgroundDarker these parameters. But there is no way to make the background color transparent.

This library is generally good, but it does not meet the demand. Can only give up.

[ Feature ] add sound to the button

it will be cool if you add sounds to your buttons and it will make a better user experience

More detailed styling options for creating button groups

I'd like to smush a couple of react-native-really-awesome-buttons together into a row and make something like this:

But the styling options don't let me control border radius by corner instead of as a whole. Using the style property with fields like borderBottomRightRadius and borderTopRightRadius seems to have no effect. Can you expose border corner radiuses as properties, or at least make them work via the styles property?

Does it support non-expo ?

buttons are pressed on scroll

i have three large awesome buttons in a column. when i want to scroll the page, buttons are press and navigate to another page. this issue does not happen on react native touchable components.

Change default shadow when raiseLevel > 0

I'm tried to change shadow property when raiseLevel > 0 (default = 4),
But I'm failed, How to change it?

Web platform not support do to use of depreciated ViewPropTypes

This repo doesn't support React Native Web; ViewPropTypes is depreciated and already removed from RNW.

add support for hitSlop

Button is currently pretty finicky to interact with. It'd be great if really-awesome-button accepted all TouchableWithoutFeedback props, but hitSlop is a good start. PR incoming.

Crashes on Android

Whenever I run it on the Android simulator, I get java.lang.string cannot be cast to java.lang.double

is onPress memoized?

Is the onPress prop memoized? Because if it is, there is an issue since I am using state in onPress and it using the wrong state.

Using Expo SDK 46

It seems like onPressIn works because it is directly being passed into the component, but ideally I would like to use onPress as it is significantly better UX.

Here is a reproducible demo: https://snack.expo.dev/@anshnanda/awesomebutton-not-working

I can't change fontFamily

Hello,
I can't change fontFamily from button's props.

Question - textFamily

Hi, nice buttons really helpfull! I've a question. How can I set the textFamily? I've tried textFamily={Fonts.type.rock} where Fonts.type.rock returns a custom font that I've linked. The font is working in other View. Thanks in advance!

The expo demo is outdated and doesn't work

Hi all.

When I try to run the Expo demo on https://expo.io/@rcaferati/react-native-really-awesome-button then I get the following message:

This project needs an update
This project uses Expo SDK v32.0.0. If you want to open this project, the author will need to update the project's SDK version."

Could the author update the project? Thanks!

[Question] expose onPressOut method

Can the onPressOut method be exposed?

Also any plans on adding TypeScript support?

Text inside button gets cropped

I have used the button with the text Get this reward, however the button renders just Get this.

---

---

Is there something I could change to fix this? I have tried all the props already.

cannot read properties of undefined reading psbcr

After installing I have this error

"react-native": "0.73.2",
"react-native-really-awesome-button": "^2.0.4",