Gathering detailed insights and metrics for @chuhoanglong/rn-really-awesome-button
Gathering detailed insights and metrics for @chuhoanglong/rn-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. 📱
Installations
npm install @chuhoanglong/rn-really-awesome-buttonDeveloper Guide
BETA
Typescript
No
Module System
CommonJS
Node Version
16.13.0
NPM Version
8.1.0
Releases
4
Languages
2
TypeScript
JavaScript
TypeScript (88.37%)
JavaScript (11.63%)
Developer
Download Statistics
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
GitHub Statistics
MIT License
1,254 Stars
162 Commits
127 Forks
15 Watchers
24 Branches
3 Contributors
Updated on Jul 14, 2025
Maintainers
1
Package Meta Information
Latest Version
1.0.6
Package Id
@chuhoanglong/rn-really-awesome-button@1.0.6
Unpacked Size
57.48 kB
Size
11.43 kB
File Count
24
NPM Version
8.1.0
Node Version
16.13.0
Total Downloads
Cumulative downloads
Total Downloads
NaN
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
1
Peer Dependencies
2
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.
Run the live demo @ expo.io.
 |  |  |
|---|
Figma File
Import it directly into your Figma project.
Installation
npm install --save react-native-really-awesome-button
Usage
Basic
1import AwesomeButton from "react-native-really-awesome-button"; 2 3function Button() { 4 return <AwesomeButton>Text</AwesomeButton>; 5}
Progress
1import AwesomeButton from "react-native-really-awesome-button"; 2 3function Button() { 4 return ( 5 <AwesomeButton 6 progress 7 onPress={next => { 8 /** Do Something **/ 9 next(); 10 }} 11 > 12 Text 13 </AwesomeButton> 14 ); 15}
Custom Children
1import AwesomeButton from "react-native-really-awesome-button"; 2 3function Button() { 4 return ( 5 <AwesomeButton> 6 <Image source="require('send-icon.png)" /> 7 <Text>Send it</Text> 8 </AwesomeButton> 9 ); 10}
Importing a specific theme
1 import AwesomeButtonRick from 'react-native-really-awesome-button/src/themes/rick'; 2 3 function Button() { 4 return ( 5 <AwesomeButtonRick type="primary">Rick's Primary Button</AwesomeButtonRick> 6 <AwesomeButtonRick type="secondary">Rick's Secondary Button</AwesomeButtonRick> 7 ); 8 }
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
1import AwesomeButton from "react-native-really-awesome-button"; 2import LinearGradient from "react-native-linear-gradient"; 3 4function Button() { 5 return ( 6 <AwesomeButton 7 ExtraContent={ 8 <LinearGradient 9 colors={["#4C63D2", "#BC3081", "#F47133", "#FED576"]} 10 /> 11 } 12 > 13 <Text>Instagram</Text> 14 </AwesomeButton> 15 ); 16}
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 |
Web version
Checkout the web version of the Awesome Button UI component at rcaferati/react-awesome-button
About the Author
Rafael Caferati
- Checkout my Full-Stack Web Developer Website
- Other open source projects @ Code Laboratory
- A scope of my work @ Web Developer Portfolio
License
MIT. Copyright (c) 2018 Rafael Caferati.
No vulnerabilities found.
Reason
no binaries found in the repo
Reason
license file detected
Details
- Info: project has a license file: LICENSE:0
- Info: FSF or OSI recognized license: MIT License: LICENSE:0
Reason
Found 1/19 approved changesets -- score normalized to 0
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
- Warn: no security policy file detected
- Warn: no security file to analyze
- Warn: no security file to analyze
- Warn: no security file to analyze
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Reason
branch protection not enabled on development/release branches
Details
- Warn: branch protection not enabled for branch 'master'
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
- Warn: 0 commits out of 20 are checked with a SAST tool
Reason
40 existing vulnerabilities detected
Details
- Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8
- Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92
- Warn: Project is vulnerable to: GHSA-c2jc-4fpr-4vhg
- Warn: Project is vulnerable to: GHSA-crh6-fp67-6883
- Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7
- Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw
- Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
- Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
- Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq
- Warn: Project is vulnerable to: GHSA-78xj-cgh5-2h22
- Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp
- Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h
- Warn: Project is vulnerable to: GHSA-76p3-8jx3-jpfq
- Warn: Project is vulnerable to: GHSA-3rfm-jhwj-7488
- Warn: Project is vulnerable to: GHSA-hhq3-ff78-jv3g
- Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
- Warn: Project is vulnerable to: GHSA-mwcw-c2x4-8c55
- Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp
- Warn: Project is vulnerable to: GHSA-rxrc-rgv4-jpvx
- Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
- Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg
- Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p
- Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36
- Warn: Project is vulnerable to: GHSA-fhg7-m89q-25r3
- Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q
- Warn: Project is vulnerable to: GHSA-776f-qx25-q3cc
- Warn: Project is vulnerable to: GHSA-h6q6-9hqw-rwfv
- Warn: Project is vulnerable to: GHSA-5fg8-2547-mr8q
- Warn: Project is vulnerable to: GHSA-h5c3-5r3r-rr8q
- Warn: Project is vulnerable to: GHSA-rmvr-2pp2-xj38
- Warn: Project is vulnerable to: GHSA-xx4v-prfh-6cgc
- Warn: Project is vulnerable to: GHSA-rc47-6667-2j5j
- Warn: Project is vulnerable to: GHSA-7jxr-cg7f-gpgv
- Warn: Project is vulnerable to: GHSA-xj72-wvfv-8985
- Warn: Project is vulnerable to: GHSA-ch3r-j5x3-6q2m
- Warn: Project is vulnerable to: GHSA-p5gc-c584-jj6v
- Warn: Project is vulnerable to: GHSA-whpj-8f3w-67p5
- Warn: Project is vulnerable to: GHSA-cchq-frgv-rjh5
- Warn: Project is vulnerable to: GHSA-g644-9gfx-q4q4
- Warn: Project is vulnerable to: GHSA-j8xg-fqg3-53r7
Score
1.7
/10
Last Scanned on 2025-07-07
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More