[](https://travis-ci.org/rcaferati/react-native-really-awesome-button) 
npm install really-awsome-button-react-native !NPM
react-native-really-awesome-button is a performant, extendable, production ready React Native component that renders an animated set of 3D UI buttons.
Run the live demo @ expo.io.



Import it directly into your Figma project.
```
npm install --save react-native-really-awesome-button
`jsx
import AwesomeButton from "react-native-really-awesome-button";
function Button() {
return
}
`
`jsx
import AwesomeButton from "react-native-really-awesome-button";
function Button() {
return (
onPress={next => {
/ Do Something /
next();
}}
>
Text
);
}
`
`jsx
import AwesomeButton from "react-native-really-awesome-button";
function Button() {
return (
);
}
`
`jsx
import AwesomeButtonRick from 'react-native-really-awesome-button/src/themes/rick';
function Button() {
return (
);
}
`
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";
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 |#### Rafael Caferati
- Checkout my Full-Stack Web Developer Website
- Other open source projects @ Code Laboratory
- A scope of my work @ Web Developer Portfolio
MIT. Copyright (c) 2018 Rafael Caferati.