React Native <AwesomeButton />

###This has been updated to make use of the new pressable components in react native. Make sure your using at least react-native 0.63!

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

Notice!!

This is a fork of Rafael Caferati react-native-really-awesome-button. It doesnt seem to be maintained anymore and so I have updated it with react natives new components and fixed various issues with the original release.

Heres a link to the original.

Please give all credit to Rafael as the bugfixing required was not immense(but unfortunately super necessary). And if you have further issues feel free to send me a message detailing your problems!

Installation

npm install --save react-native-really-awesome-button-fixed

Usage

Basic

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

function Button() {
  return <AwesomeButton>Text</AwesomeButton>;
}

Progress

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

function Button() {
  return (
    <AwesomeButton
      progress
      onPress={next => {
        /** Do Something **/
        next();
      }}
    >
      Text
    </AwesomeButton>
  );
}

Custom Children

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

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-fixed/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-fixed";
import LinearGradient from "react-native-linear-gradient";

function Button() {
  return (
    <AwesomeButton
      ExtraContent={
        <LinearGradient
          colors={["#4C63D2", "#BC3081", "#F47133", "#FED576"]}
        />
      }
    >
      <Text>Instagram</Text>
    </AwesomeButton>
  );
}

Props

| Attributes | Type | Default | Description | | :-------------------- | :-----------: | :-------: | :-------------------------------------------------------- | | activityColor | String | #FFFFFF | Button activity indicator color | | activeOpacity | Number | 1 | Button active state opacity | | 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 shaddow 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 | | 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 | | disabled | Boolean | true | Button disabled state: cancels animation and onPress func | | raiseLevel | Number | 4 | Button 3D raise level | | ExtraContent | Node | null | Renders a custom component inside the button content body | | springRelease | Boolean | true | Button uses spring on the release animation | | onPress               | Function   | null | Button onPress function. It receives a next argument when the progress prop is set to true | | 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 |

License

MIT. Copyright (c) 2018 Rafael Caferati.