{"id":3944,"url":"https://github.com/mastermoo/react-native-action-button","last_synced_at":"2025-05-14T05:09:55.594Z","repository":{"id":41155374,"uuid":"44631742","full_name":"mastermoo/react-native-action-button","owner":"mastermoo","description":"customizable multi-action-button component for react-native","archived":false,"fork":false,"pushed_at":"2023-02-26T09:04:59.000Z","size":361,"stargazers_count":2525,"open_issues_count":97,"forks_count":571,"subscribers_count":34,"default_branch":"master","last_synced_at":"2025-05-11T18:41:07.738Z","etag":null,"topics":["actionbutton","component","fab","react-native"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/mastermoo.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}},"created_at":"2015-10-20T20:01:55.000Z","updated_at":"2025-05-07T06:37:02.000Z","dependencies_parsed_at":"2023-02-07T06:06:56.606Z","dependency_job_id":"476ce068-25b3-406c-923c-23a23aa5e58c","html_url":"https://github.com/mastermoo/react-native-action-button","commit_stats":{"total_commits":194,"total_committers":62,"mean_commits":3.129032258064516,"dds":0.5463917525773196,"last_synced_commit":"ad8c7e5d482296ab4f92aebcf9dcfd28481d7e15"},"previous_names":[],"tags_count":67,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mastermoo%2Freact-native-action-button","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mastermoo%2Freact-native-action-button/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mastermoo%2Freact-native-action-button/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mastermoo%2Freact-native-action-button/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mastermoo","download_url":"https://codeload.github.com/mastermoo/react-native-action-button/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253617958,"owners_count":21936896,"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":["actionbutton","component","fab","react-native"],"created_at":"2024-01-05T20:16:56.089Z","updated_at":"2025-05-14T05:09:55.461Z","avatar_url":"https://github.com/mastermoo.png","language":"JavaScript","readme":"# react-native-action-button\ncustomizable multi-action-button component for react-native\n\n![react-native-action-button demo](http://i.giphy.com/26BkMir9IcAhqe4EM.gif)\n![react-native-action-button demo](http://i.giphy.com/xTcnTeW9BBXh8wMhLq.gif)\n![react-native-action-button demo](http://i.giphy.com/l0K7psuhDQGLeT3d6.gif)\n![react-native-action-button demo](http://i.giphy.com/xTcnSOtuet39cM46s0.gif)\n\n### Known Issues\n- Doesn't Work While Android Debugging. See issue [#79](https://github.com/mastermoo/react-native-action-button/issues/79).\n\n### Installation\n```bash\nnpm i react-native-action-button --save\n```\nLink `react-native-vector-icons` native dependencies to your project with:\n```bash\nreact-native link react-native-vector-icons\n```\nor just:\n```bash\nreact-native link\n```\nto link all libraries with native dependencies in your project.\n\n### Usage\n\nFirst, require it from your app's JavaScript files with:\n```bash\nimport ActionButton from 'react-native-action-button';\n```\n\n##### ActionButton\n`ActionButton` component is the main component which wraps everything and provides a couple of props (see Config below).\n\n##### ActionButton.Item\n`ActionButton.Item` specifies an Action Button. You have to include at least 1 `ActionButton.Item`.\n\n\n### Example\n_The following Basic example can be found in `example/Basic`._\n\n```js\nimport React, { Component } from 'react';\nimport { StyleSheet, View } from 'react-native';\nimport ActionButton from 'react-native-action-button';\nimport Icon from 'react-native-vector-icons/Ionicons';\n\n\nclass App extends Component {\n\n  render() {\n    return (\n      \u003cView style={{flex:1, backgroundColor: '#f3f3f3'}}\u003e\n        {/* Rest of the app comes ABOVE the action button component !*/}\n        \u003cActionButton buttonColor=\"rgba(231,76,60,1)\"\u003e\n          \u003cActionButton.Item buttonColor='#9b59b6' title=\"New Task\" onPress={() =\u003e console.log(\"notes tapped!\")}\u003e\n            \u003cIcon name=\"md-create\" style={styles.actionButtonIcon} /\u003e\n          \u003c/ActionButton.Item\u003e\n          \u003cActionButton.Item buttonColor='#3498db' title=\"Notifications\" onPress={() =\u003e {}}\u003e\n            \u003cIcon name=\"md-notifications-off\" style={styles.actionButtonIcon} /\u003e\n          \u003c/ActionButton.Item\u003e\n          \u003cActionButton.Item buttonColor='#1abc9c' title=\"All Tasks\" onPress={() =\u003e {}}\u003e\n            \u003cIcon name=\"md-done-all\" style={styles.actionButtonIcon} /\u003e\n          \u003c/ActionButton.Item\u003e\n        \u003c/ActionButton\u003e\n      \u003c/View\u003e\n    );\n  }\n\n}\n\nconst styles = StyleSheet.create({\n  actionButtonIcon: {\n    fontSize: 20,\n    height: 22,\n    color: 'white',\n  },\n});\n```\n\nThis will create a floating Button in the bottom right corner with 3 action buttons.\nAlso this example uses `react-native-vector-icons` for the button Icons.\n\n### FAB Example\n```js\n\u003cActionButton\n  buttonColor=\"rgba(231,76,60,1)\"\n  onPress={() =\u003e { console.log(\"hi\")}}\n/\u003e\n```\n\n### Show/hide the FAB on scroll\nTake a look at [this gist](https://gist.github.com/mmazzarolo/cfd467436f9d110e94a685b06eb3900f) for showing and hiding the floating action button depending on the scroll direction.\n\n### Configuration\n\n##### ActionButton:\n| Property      | Type          | Default             | Description |\n| ------------- |:-------------:|:------------:       | ----------- |\n| size          | number        | 56                  | use this to change the size of the Button\n| resetToken    | any           | null                | use this to reset the internal component state (expand/collapse) in a re-render cycle. Synchronize the component state.\n| active        | boolean       | false               | action buttons visible or not\n| autoInactive  | boolean       | true                | Auto hide ActionButtons when ActionButton.Item is pressed.\n| hideShadow    | boolean       | false               | use this to hide the default elevation and boxShadow\n| position      | string        | \"right\" / \"center\"  | one of: `left` `center` and `right`\n| bgColor       | string        | \"transparent\"       | background color when ActionButtons are visible\n| buttonColor   | string        | \"rgba(0,0,0,1)\"     | background color of the +Button **(must be rgba value!)**\n| spacing       | number        | 20                  | spacing between the `ActionButton.Item`s\n| offsetX       | number        | 30                  | offset from the left/right side of the screen\n| offsetY       | number        | 30                  | offset from the bottom/top of the screen\n| btnOutRange   | string        | props.buttonColor   | button background color to animate to\n| outRangeScale | number        | 1                   | changes size of button during animation\n| onPress       | function      | null                | fires, when ActionButton is tapped\n| onPressIn     | function      | null                | fires, before ActionButton is released\n| onPressOut    | function      | null                | fires, after ActionButton is released\n| onLongPress   | function      | null                | fires, when ActionButton is long pressed\n| renderIcon    | function      | null                | Function to render the component for ActionButton Icon. It is passed a boolean, `active`, which is true if the FAB has been expanded, and false if it is collapsed, allowing you to show a different icon when the ActionButton Items are expanded.\n| icon          | Component     | +                   | **Deprecated, use `renderIcon`** Custom component for ActionButton Icon\n| backdrop      | Component     | false               | Custom component for use as Backdrop (i.e. [BlurView](https://github.com/react-native-fellowship/react-native-blur#blur-view), [VibrancyView](https://github.com/react-native-fellowship/react-native-blur#vibrancy-view))\n| degrees       | number        | 135                 | degrees to rotate icon\n| buttonText    | string        | +                   | use this to set a different text on the button\n| buttonTextStyle | style         | null                | use this to set the textstyle of the button's text\n| onReset       | function      | null                | use this to set the callback that will be called after the button reset's it's items\n| verticalOrientation | string  | \"up\"                | direction action buttons should expand.  One of: `up` or `down`\n| backgroundTappable | boolean  | false               | make background tappable in active state of ActionButton\n| activeOpacity | number        | 0.85                | activeOpacity props of TouchableOpacity\n| shadowStyle   | style         | null                | The custom shadow style you want to pass in the action button\n| useNativeFeedback | boolean   | true                | Android: Whether to use a TouchableNativeFeedback\n| fixNativeFeedbackRadius | boolean   | false         | Android: Activate this to fix TouchableNativeFeedback Ripple UI problems\n| nativeFeedbackRippleColor | string   | 'rgba(255,255,255,0.75)'         | Android: Pass a color to the Ripple Effect of a TouchableNativeFeedback\n\n\n##### ActionButton.Item:\n| Property      | Type          | Default             | Description |\n| ------------- |:-------------:|:------------:       | ----------- |\n| size          | number        | parentSize          | use this to change the size of the Button\n| title         | string        | undefined           | the title shown next to the button. When `undefined` the title is not hidden\n| onPress       | func          | null                | **required** function, triggers when a button is tapped\n| buttonColor   | string        | same as + button    | background color of the Button\n| titleColor    | string        | \"#444\"              | color of title, *removed* in v2.5. use `textStyle` instead\n| titleBgColor  | string        | \"white\"             | background color of title, *removed* in v2.5. use `textStyle` instead\n| textContainerStyle  | style   | null                | use this to set the textstyle of the button's item text container\n| textStyle     | style         | null                | use this to set the textstyle of the button's item text\n| spaceBetween  | number        | 15                  | use this to set the space between the Button and the text container\n| numberOfLines  | number        | 1                  | use this to set the number of lines on the button's item text\n| activeOpacity | number        | 0.85                | activeOpacity props of TouchableOpacity\n| hideLabelShadow | boolean     | same as hideShadow  | use this to hide the button's label default elevation and boxShadow\n| shadowStyle   | style         | null                | The custom shadow style you want to pass in the action button item\n| useNativeFeedback | boolean   | true                | Android: Whether to use a TouchableNativeFeedback\n| fixNativeFeedbackRadius | boolean   | false         | Android: Activate this to fix TouchableNativeFeedback Ripple UI problems\n| nativeFeedbackRippleColor | string   | 'rgba(255,255,255,0.75)'         | Android: Pass a color to the Ripple Effect of a TouchableNativeFeedback\n","funding_links":[],"categories":["Components","组件","JavaScript","Others"],"sub_categories":["UI","Button"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmastermoo%2Freact-native-action-button","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmastermoo%2Freact-native-action-button","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmastermoo%2Freact-native-action-button/lists"}