{"id":4046,"url":"https://github.com/geremih/react-native-circular-action-menu","last_synced_at":"2025-08-04T00:31:07.414Z","repository":{"id":45469337,"uuid":"62533990","full_name":"geremih/react-native-circular-action-menu","owner":"geremih","description":"Path-esque circular action menu inspired by CircularFloatingActionMenu.","archived":false,"fork":true,"pushed_at":"2020-07-07T08:25:17.000Z","size":272,"stargazers_count":468,"open_issues_count":5,"forks_count":88,"subscribers_count":16,"default_branch":"master","last_synced_at":"2024-04-25T00:51:19.314Z","etag":null,"topics":["react-native"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":"mastermoo/react-native-action-button","license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/geremih.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}},"created_at":"2016-07-04T05:31:27.000Z","updated_at":"2024-04-22T01:30:10.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/geremih/react-native-circular-action-menu","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/geremih%2Freact-native-circular-action-menu","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/geremih%2Freact-native-circular-action-menu/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/geremih%2Freact-native-circular-action-menu/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/geremih%2Freact-native-circular-action-menu/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/geremih","download_url":"https://codeload.github.com/geremih/react-native-circular-action-menu/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":228576892,"owners_count":17939645,"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":["react-native"],"created_at":"2024-01-05T20:16:59.451Z","updated_at":"2024-12-07T07:30:58.461Z","avatar_url":"https://github.com/geremih.png","language":"JavaScript","funding_links":[],"categories":["Components","JavaScript","Others"],"sub_categories":["UI"],"readme":"# react-native-circular-action-menu\nPath-esque circular action menu inspired by [CircularFloatingActionMenu](https://github.com/oguzbilgener/CircularFloatingActionMenu).\n\n![react-native-circular-action-menu demo](http://i.giphy.com/3o6Zt6hNHOd3kVx4aY.gif)\n\n### Installation\n```bash\nnpm i react-native-circular-action-menu --save\n```\n\n### Usage\n\nFirst, require it from your app's JavaScript files with:\n```bash\nimport ActionButton from 'react-native-circular-action-menu';\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, StyleSheet, View } from 'react-native';\nimport ActionButton from 'react-native-circular-action-menu';\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 App come 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=\"android-create\" style={styles.actionButtonIcon} /\u003e\n          \u003c/ActionButton.Item\u003e\n          \u003cActionButton.Item buttonColor='#3498db' title=\"Notifications\" onPress={() =\u003e {}}\u003e\n            \u003cIcon name=\"android-notifications-none\" style={styles.actionButtonIcon} /\u003e\n          \u003c/ActionButton.Item\u003e\n          \u003cActionButton.Item buttonColor='#1abc9c' title=\"All Tasks\" onPress={() =\u003e {}}\u003e\n            \u003cIcon name=\"android-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\n### Configuration\n\n##### ActionButton:\n| Property       | Type          | Default             | Description |\n| -------------  |:-------------:|:------------:       | ----------- |\n| active         | boolean       | false               | action buttons visible or not\n| autoInactive   | boolean       | true                | Auto hide ActionButtons when ActionButton.Item is pressed.\n| position       | string        |  \"center\"  | one of: `left` `center` and `right`\n| radius | number | 100 | radius of menu\n| bgColor   | string        | \"transparent\"       | color of overlay when ActionButtons are visible\n| buttonColor    | string        | \"rgba(0,0,0,1)\"     | background color of the +Button **(must be rgba value!)**\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| onLongPress    | function      | null                | fires, when ActionButton is long pressed\n| onOverlayPress | function      | null                | fires, when Overlay is pressed\n| icon           | Component     | +                   | 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\n##### ActionButton.Item:\n| Property      | Type          | Default             | Description |\n| ------------- |:-------------:|:------------:       | ----------- |\n| onPress       | func          | null                | **required** function, triggers when a button is tapped\n| buttonColor   | string        | same as + button    | background color of the Button\n| startDegree   | number        | 0   | degrees to start the rotation of the Item\n| endDegree   | number        | 720    | degrees to end the rotation of the Item\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgeremih%2Freact-native-circular-action-menu","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgeremih%2Freact-native-circular-action-menu","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgeremih%2Freact-native-circular-action-menu/lists"}