React Native <AwesomeButton />

 !NPM

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

$3

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!

$3

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

Usage

$3

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

function Button() {
return Text;
}
`

$3

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

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

);
}
`

$3

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

function Button() {
return (


Send it

);
}
`

$3

`jsx
import AwesomeButtonRick from 'react-native-really-awesome-button-fixed/src/themes/rick';

function Button() {
return (
Rick's Primary Button
Rick's Secondary Button
);
}
`

$3

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

`jsx
import AwesomeButton from "react-native-really-awesome-button-fixed";
import LinearGradient from "react-native-linear-gradient";

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

);
}
`

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.