{"id":4031,"url":"https://github.com/rcaferati/react-native-really-awesome-button","last_synced_at":"2025-04-04T14:06:23.032Z","repository":{"id":30175164,"uuid":"123640551","full_name":"rcaferati/react-native-really-awesome-button","owner":"rcaferati","description":"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. 📱 ","archived":false,"fork":false,"pushed_at":"2023-08-18T13:40:29.000Z","size":8187,"stargazers_count":1245,"open_issues_count":15,"forks_count":129,"subscribers_count":15,"default_branch":"master","last_synced_at":"2025-03-28T13:07:34.695Z","etag":null,"topics":["animated","button","component","progress","react","react-native","share","social"],"latest_commit_sha":null,"homepage":"https://expo.io/@rcaferati/react-native-really-awesome-button","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rcaferati.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2018-03-02T23:11:39.000Z","updated_at":"2025-03-19T16:05:38.000Z","dependencies_parsed_at":"2024-01-13T05:22:21.235Z","dependency_job_id":null,"html_url":"https://github.com/rcaferati/react-native-really-awesome-button","commit_stats":{"total_commits":136,"total_committers":4,"mean_commits":34.0,"dds":"0.022058823529411797","last_synced_commit":"19f63342996ac9bfb8abf0bba74bbb24c1f3e963"},"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rcaferati%2Freact-native-really-awesome-button","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rcaferati%2Freact-native-really-awesome-button/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rcaferati%2Freact-native-really-awesome-button/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rcaferati%2Freact-native-really-awesome-button/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rcaferati","download_url":"https://codeload.github.com/rcaferati/react-native-really-awesome-button/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247190250,"owners_count":20898702,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["animated","button","component","progress","react","react-native","share","social"],"created_at":"2024-01-05T20:16:59.014Z","updated_at":"2025-04-04T14:06:23.015Z","avatar_url":"https://github.com/rcaferati.png","language":"TypeScript","funding_links":[],"categories":["Components","React Native Version","JavaScript","TypeScript","Please find below the links to awesome cheat-sheet and resources:"],"sub_categories":["UI","`AwesomeButtonSocial` specific props","Button","React/React-Native:"],"readme":"# React Native \u0026lt;AwesomeButton /\u0026gt;\n\n[![Travis](https://img.shields.io/travis/rcaferati/react-native-really-awesome-button/master.svg)](https://travis-ci.org/rcaferati/react-native-really-awesome-button) ![NPM](https://img.shields.io/npm/v/react-native-really-awesome-button.svg)\n\n`react-native-really-awesome-button` is a performant, extendable, production ready React Native component that renders an animated set of 3D UI buttons.\n\n| \u003cimg width=\"240\" src='https://raw.githubusercontent.com/rcaferati/react-native-really-awesome-button/master/assets/demo-button-blue-new.gif?raw=true' /\u003e  | \u003cimg width=\"240\" src='https://raw.githubusercontent.com/rcaferati/react-native-really-awesome-button/master/assets/demo-button-rick.gif?raw=true' /\u003e  | \u003cimg width=\"240\" src='https://raw.githubusercontent.com/rcaferati/react-native-really-awesome-button/master/assets/demo-button-cartman.gif?raw=true' /\u003e  |\n|---|---|---|\n\n## Snack on Expo\n\nAccess the snack at [expo.dev](https://snack.expo.dev/@rcaferati/react-native-awesome-button).\n\n[\u003cimg src=\"https://caferati.me/images/github/expo-snack.png\" width=\"800\" /\u003e](https://snack.expo.dev/@rcaferati/react-native-awesome-button)\n\n\n## Figma File\n\nImport it directly into your [Figma](https://www.figma.com/file/Ug8sNPzmevU3ZQus9Klu5aHq/react-awesome-button-theme-blue) project.\n\n[\u003cimg src=\"https://caferati.me/images/github/figma-awesome-button.png\" width=\"800\" /\u003e](https://www.figma.com/file/Ug8sNPzmevU3ZQus9Klu5aHq/react-awesome-button-theme-blue)\n\n### Installation\n\n```\nnpm install --save react-native-really-awesome-button\n```\n\n## Usage\n\n### Basic\n\n```jsx\nimport AwesomeButton from \"react-native-really-awesome-button\";\n\nfunction Button() {\n  return \u003cAwesomeButton\u003eText\u003c/AwesomeButton\u003e;\n}\n```\n\n### Progress\n\n```jsx\nimport AwesomeButton from \"react-native-really-awesome-button\";\n\nfunction Button() {\n  return (\n    \u003cAwesomeButton\n      progress\n      onPress={async (next) =\u003e {\n        /** await for something; then: **/\n        next();\n      }}\n    \u003e\n      Text\n    \u003c/AwesomeButton\u003e\n  );\n}\n```\n\n### Importing a specific theme\n\n```jsx\n  import { ThemedButton } from 'react-native-really-awesome-button';\n\n  function ButtonWithTheme() {\n    return (\n      \u003c\u003e\n        \u003cThemedButton name=\"rick\" type=\"primary\"\u003eRick's Primary Button\u003c/ThemedButton\u003e\n        \u003cThemedButton name=\"rick\" type=\"secondary\"\u003eRick's Secondary Button\u003c/ThemedButton\u003e\n      \u003c/\u003e\n    );\n  }\n```\n\n### Custom Children\n\n```jsx\nimport AwesomeButton from \"react-native-really-awesome-button\";\n\nfunction ButtonWithCustomChildren() {\n  return (\n    \u003cAwesomeButton\u003e\n      \u003cImage source=\"require('send-icon.png)\" /\u003e\n      \u003cText\u003eSend it\u003c/Text\u003e\n    \u003c/AwesomeButton\u003e\n  );\n}\n```\n\n### Adding content before and after the button label\nUseful for handling icons or any other inlined content which animates together with the button text.\n\n```jsx\n  import { ThemedButton } from 'react-native-really-awesome-button';\n  import { FontAwesome } from \"@expo/icons\";\n\n  function ButtonWithIcon() {\n    return (\n      \u003cThemedButton\n        name=\"bruce\"\n        type=\"primary\"\n        before={\u003cFontAwesome name=\"twitter\" /\u003e}\u003e\n        Rick's Primary Button\n      \u003c/ThemedButton\u003e\n    );\n  }\n```\n\n### Extra content placement\nYou 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\n\n```jsx\nimport { StyleSheet } from \"react-native\";\nimport AwesomeButton from \"react-native-really-awesome-button\";\nimport LinearGradient from \"react-native-linear-gradient\";\n\nfunction ButtonWithExtraContent() {\n  return (\n    \u003cAwesomeButton\n      extra={\n        \u003cLinearGradient\n          colors={[\"#4C63D2\", \"#BC3081\", \"#F47133\", \"#FED576\"]}\n          style={{ ...StyleSheet.absoluteFillObject }}\n        /\u003e\n      }\n    \u003e\n      \u003cText\u003eInstagram\u003c/Text\u003e\n    \u003c/AwesomeButton\u003e\n  );\n}\n```\n\n### Full event control\nAdded a set of controlling events on `v2`, giving control of every animation stage like `onPressedIn` and `onPressedOut` which are triggered on the `Animated` callback.\n\n```jsx\nimport { StyleSheet } from \"react-native\";\nimport AwesomeButton from \"react-native-really-awesome-button\";\nimport LinearGradient from \"react-native-linear-gradient\";\n\nfunction ButtonWithExtraEvents() {\n  return (\n    \u003c\u003e\n      \u003cAwesomeButton\n        onPressIn={handlePressIn}\n        onPressedIn={handlePressedIn}\n        onPressOut={handlePressOut}\n        onPressedOut={handlePressedOut}\n      \u003e\n        Label\n      \u003c/AwesomeButton\u003e\n      \u003cAwesomeButton\n        progress\n        onProgressStart={handleOnProgressStart}\n        onProgressEnd={handleOnProgressEnd}\n        onPress={handleOnPress}\n      \u003e\n        Label\n      \u003c/AwesomeButton\u003e\n    \u003c/\u003e\n  );\n}\n```\n\n## Props\n\n| Attributes            |     Type      |  Default  | Description                                               |\n| :-------------------- | :-----------: | :-------: | :-------------------------------------------------------- |\n| activityColor         | `String`      | `#FFFFFF` | Button activity indicator color                           |\n| activeOpacity         | `Number`      | `1`       | Button active state opacity                               |\n| animatedPlaceholder   | `Boolean`     | `true`    | When set to `false` removes the placeholder animation loop |\n| backgroundActive      | `String`      | `#C0C0C0` | Button active state background-color                      |\n| backgroundColor       | `String`      | `#C0C0C0` | Button content background-color                           |\n| backgroundDarker      | `String`      | `#9F9F9F` | Button bottom-front-face background-color                 |\n| backgroundShadow      | `String`      | `#C0C0C0` | Button bottom shadow background-color                     |\n| backgroundPlaceholder | `String`      | `#C0C0C0` | Button placeholder background-color                       |\n| backgroundProgress    | `String`      | `#C0C0C0` | Button progress bar background-color                      |\n| borderColor           | `String`      | `null`    | Button border-color                                        |\n| borderRadius          | `Number`      | `4`       | Button border-radius                                      |\n| borderWidth           | `Number`      | `0`       | Button border-width                                       |\n| dangerouslySetPressableProps | `PressableProps`    | `null`    | Exposes the `PressableProps` of the `Pressable` wrapper; it can overwrite all props except `onPressIn` and `onPressOut` |\n| debouncedPressTime    | `Number`      | `0`       | Configure onPress function debounce time                  |\n| disabled              | `Boolean`     | `true`    | Button disabled state: cancels animation and onPress func |\n| height                | `Number`      | `50`      | Button height                                             |\n| width                 | `Number`      | `null`    | Setting width to `null` mirrors an `auto` behaviour       |\n| paddingHorizontal     | `Number`      | `12`      | Sets the button horizontal padding                        |\n| paddingTop            | `Number`      | `0`       | Sets the button padding top                               |\n| paddingBottom         | `Number`      | `0`       | Sets the button padding bottom                            |\n| stretch               | `Boolean`     | `false`   | When set to `true` together with width set to `null` the button fills it's parent component width |\n| raiseLevel            | `Number`      | `4`       | Button 3D raise level                                     |\n| before                | `ReactNode`   | `null`    | Renders a custom component before the button content Text |\n| after                 | `ReactNode`   | `null`    | Renders a custom component after the button content Text  |\n| extra                 | `ReactNode`   | `null`    | Renders a custom component inside the button content body |\n| springRelease         | `Boolean`     | `true`    | Button uses elastic spring on the release animation       |\n| progress              | `Boolean`     | `false`   | When set to `true` enables progress animation             |\n| progressLoadingTime   | `Number`      | `3000`    | Number in `ms` for the maximum progress bar animation time |\n| textColor             | `String`      | `#FFFFFF` | Button default label text color                           |\n| textLineHeight        | `Number`      | `20`      | Button default label text line height                     |\n| textSize              | `Number`      | `16`      | Button default label text font size                       |\n| textFontFamily        | `String`      | `null`    | Button default label text font family                     |\n| style                 | `Style`       | `null`    | Button container custom styles                            |\n| onPress               | `Function`    | `null`    | Button onPress function. It receives a `next` argument when the `progress` prop is set to `true` |\n| onPressIn             | `Function`    | `null`    | Triggered with the `onPressIn` native event |\n| onPressedIn           | `Function`    | `null`    | Triggered once the press animation has finished |\n| onPressOut            | `Function`    | `null`    | Triggered with the `onPressOut` native event |\n| onPressedOut          | `Function`    | `null`    | Triggered once the release animation has finished |\n| onProgressStart       | `Function`    | `null`    | Triggered before the progress animation has started |\n| onProgressEnd         | `Function`    | `null`    | Triggered after the progress animation has finished |\n\n## Web version\nCheckout the web version of the `Awesome Button UI Component` at [rcaferati/react-awesome-button](https://github.com/rcaferati/react-awesome-button)\n\n[\u003cimg src=\"https://caferati.me/images/github/awesome-button-web.png\" width=\"800\" /\u003e](https://awesome-button.caferati.me)\n\n## About the Author\n\n#### Rafael Caferati\n\n- Checkout my \u003ca href=\"https://caferati.me\" title=\"Full-Stack Web Developer, UI/UX Javascript Specialist\" target=\"_blank\"\u003ePortfolio Website\u003c/a\u003e\n- Connect with me on `LinkedIn` \u003ca href=\"https://linkedin.com/in/rcaferati\" title=\"Full-Stack Web Developer, UI/UX Javascript Specialist\" target=\"_blank\"\u003e@rcaferati\u003c/a\u003e\n\n## License\n\nMIT. Copyright (c) 2022 Rafael Caferati.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frcaferati%2Freact-native-really-awesome-button","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frcaferati%2Freact-native-really-awesome-button","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frcaferati%2Freact-native-really-awesome-button/lists"}