{"id":25931163,"url":"https://github.com/nicotroia/react-native-floating-action-menu","last_synced_at":"2025-07-03T07:05:06.665Z","repository":{"id":40832325,"uuid":"263820509","full_name":"nicotroia/react-native-floating-action-menu","owner":"nicotroia","description":"Simple floating action menu for react-native","archived":false,"fork":false,"pushed_at":"2024-01-29T08:37:55.000Z","size":52652,"stargazers_count":28,"open_issues_count":13,"forks_count":4,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-06-03T04:56:24.220Z","etag":null,"topics":["actions","animation","javascript","menu","react-native","ui","ui-components"],"latest_commit_sha":null,"homepage":null,"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/nicotroia.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,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-05-14T05:07:55.000Z","updated_at":"2025-02-14T15:52:49.000Z","dependencies_parsed_at":"2024-06-21T05:44:47.092Z","dependency_job_id":"66e5a2a9-8a72-445d-b31a-9cfeeb2d41fc","html_url":"https://github.com/nicotroia/react-native-floating-action-menu","commit_stats":{"total_commits":73,"total_committers":3,"mean_commits":"24.333333333333332","dds":0.0273972602739726,"last_synced_commit":"176bf91724edfb7a1198f023df88a26cf7450a9d"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nicotroia%2Freact-native-floating-action-menu","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nicotroia%2Freact-native-floating-action-menu/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nicotroia%2Freact-native-floating-action-menu/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nicotroia%2Freact-native-floating-action-menu/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nicotroia","download_url":"https://codeload.github.com/nicotroia/react-native-floating-action-menu/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nicotroia%2Freact-native-floating-action-menu/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":258841413,"owners_count":22766300,"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":["actions","animation","javascript","menu","react-native","ui","ui-components"],"created_at":"2025-03-03T23:58:16.176Z","updated_at":"2025-07-03T07:05:06.605Z","avatar_url":"https://github.com/nicotroia.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n  \u003ch1\u003ereact-native-floating-action-menu\u003c/h1\u003e\n  \n  \u003cdiv\u003eB-Y-O-I (bring your own icon) javascript component for react-native. No dependencies. Inspired by material-design's Floating Action Button. Please customize to your needs and enjoy. PRs are welcome!\u003c/div\u003e\n  \n  \u003cbr/\u003e\n\n  \u003cimg src=\"example/src/assets/readme-0.gif\" alt=\"Floating Action Menu demo\" height=\"480\" /\u003e\n\u003c/div\u003e\n\n## Installation\n\n```\nnpm install --save react-native-floating-action-menu\n```\n\n## Usage\n\n```JSX\nimport { FloatingMenu } from 'react-native-floating-action-menu';\n\nconst items = [\n  { label: 'Do a little dance' },\n  { label: 'Make a lil love' },\n  { label: 'Get down tonight' },\n];\n\n\u003cFloatingMenu\n  items={items}\n  isOpen={this.state.isMenuOpen}\n  onMenuToggle={this.handleMenuToggle}\n  onItemPress={this.handleItemPress}\n/\u003e\n```\n\n## Item Config\n\n_FloatingItem_\n\n| Prop       | description                                                                                                                     | type     | required |\n| ---------- | ------------------------------------------------------------------------------------------------------------------------------- | -------- | -------- |\n| label      | Text to display alongside button                                                                                                | string   | ✔︎      |\n| labelStyle | Style for the Text element                                                                                                      | object   |\n| isPending  | Will display ActivityIndicator in place of icon when `isPending` is true                                                        | boolean  |\n| isDisabled | Will disable the item when `isDisabled` is true                                                                                 | boolean  |\n| onPress    | Callback function called when this item is pressed. This will override the default `onItemPress` callback given to FloatingMenu | function |\n\nExample:\n\n```JSX\n{\n  label: 'Hello world',\n  isPending: false,\n  isDisabled: false,\n  onPress: (item, index) =\u003e {}, // (optional, can also be handled via `onItemPress`)\n  // Anything else you want goes here\n}\n```\n\n## Menu Config\n\n| Prop                | description                                                                                                                                                                                    | type           | default                             |\n| ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- | ----------------------------------- |\n| items               | Array of `Item`s (See above). Items are positioned by their order in this array and start closest to the menu button.                                                                          | FloatingItem[] | []                                  |\n| isOpen              | Control the menu open/closed state                                                                                                                                                             | boolean        | false                               |\n| position            | \"top-left\" \\| \"top-right\" \\| \"bottom-left\" \\| \"bottom-right\"                                                                                                                                   | string         | \"bottom-right\"                      |\n| top                 | Position in px away from top edge                                                                                                                                                              | number         | 38                                  |\n| left                | Position in px away from left edge                                                                                                                                                             | number         | 38                                  |\n| right               | Position in px away from right edge                                                                                                                                                            | number         | 38                                  |\n| bottom              | Position in px away from bottom edge                                                                                                                                                           | number         | 38                                  |\n| primaryColor        | Hex color string used for backgrounds, borders, and icons                                                                                                                                      | string         | \"#213A77\"                           |\n| backgroundUpColor   | Override background color for menu and items UP state. Defaults to `#ffffff`.                                                                                                                  | string (hex)   | -                                   |\n| backgroundDownColor | Override background color for menu and items DOWN state. Defaults to `primaryColor` value.                                                                                                     | string (hex)   | -                                   |\n| borderColor         | Override border color for menu and items. Defaults to `primaryColor` value.                                                                                                                    | string (hex)   | -                                   |\n| iconColor           | Override icon color for menu and items. Defaults to `primaryColor` value.                                                                                                                      | string (hex)   | -                                   |\n| buttonWidth         | Width (and also height) of the button                                                                                                                                                          | number         | 50                                  |\n| innerWidth          | Width (and also height) of the inner element of the button                                                                                                                                     | number         | -                                   |\n| dimmerStyle         | Style the background dimmer element                                                                                                                                                            | object         | -                                   |\n| openEase            | Easing function used for the opening animation (see [js easing functions](https://gist.github.com/gre/1650294))                                                                                | function       | \u003cpre\u003e`t =\u003e (--t) * t * t + 1`\u003c/pre\u003e |\n| closeEase           | Easing function used for the closing animation (see [js easing functions](https://gist.github.com/gre/1650294))                                                                                | function       | \u003cpre\u003et =\u003e t _ t _ t\u003c/pre\u003e           |\n| renderMenuIcon      | Function used to render the icon for menu button. Receives current menu state as an argument. (see below example)                                                                              | function       | -                                   |\n| renderItemIcon      | Function used to render the icon for the items. Receives item, index, and current menu state as arguments. (see below example)                                                                 | function       | -                                   |\n| onMenuToggle        | Callback function called when the menu has been toggled open or closed. Receives a boolean value                                                                                               | function       | -                                   |\n| onItemPress         | Callback function called when a menu item has been pressed. Receives item and index. If an item specifies its own `onPress` function, it will take priority, and this function will be ignored | function       | -                                   |\n\n## Gif Demos\n\n\u003ctable\u003e\n\u003cthead /\u003e\n\u003ctbody\u003e\n\u003ctr\u003e\n  \u003ctd width=\"25%\"\u003e\n    \u003cp\u003e\u003cb\u003ePositions\u003c/b\u003e\u003c/p\u003e\n    \u003cimg src=\"example/src/assets/readme-2.gif\" alt=\"Positions\" height=\"auto\" style=\"max-width: 100%;\" /\u003e\n  \u003c/td\u003e\n  \u003ctd width=\"25%\"\u003e\n    \u003cp\u003e\u003cb\u003eFontAwesome\u003c/b\u003e\u003c/p\u003e\n    \u003cimg src=\"example/src/assets/readme-3.gif\" alt=\"Positions\" height=\"auto\" style=\"max-width: 100%;\" /\u003e\n  \u003c/td\u003e\n  \u003ctd width=\"25%\"\u003e\n    \u003cp\u003e\u003cb\u003eColors\u003c/b\u003e\u003c/p\u003e\n    \u003cimg src=\"example/src/assets/readme-4.gif\" alt=\"Positions\" height=\"auto\" style=\"max-width: 100%;\" /\u003e\n  \u003c/td\u003e\n  \u003ctd width=\"25%\"\u003e\n    \u003cp\u003e\u003cb\u003eList lengths\u003c/b\u003e\u003c/p\u003e\n    \u003cimg src=\"example/src/assets/readme-5.gif\" alt=\"Positions\" height=\"auto\" style=\"max-width: 100%;\" /\u003e\n  \u003c/td\u003e\n\u003c/tr\u003e\n\u003c/tbody\u003e\n\u003c/table\u003e\n\n## Quick Start Example\n\n```JSX\nimport React from 'react';\nimport { StyleSheet } from 'react-native';\nimport { FloatingMenu } from 'react-native-floating-action-menu';\n\nconst items = [\n  { label: 'Do a little dance' },\n  { label: 'Make a lil love' },\n  { label: 'Get down tonight' },\n];\n\nclass MyScreen extends React.Component {\n  state = {\n    isMenuOpen: false,\n  };\n\n  handleMenuToggle = isMenuOpen =\u003e\n    this.setState({ isMenuOpen });\n\n  handleItemPress = (item, index) =\u003e\n    console.log('pressed item', item);\n\n  render() {\n    return (\n      \u003cView style={styles.container}\u003e\n        \u003cFloatingMenu\n          isOpen={this.state.isMenuOpen}\n          items={items}\n          onMenuToggle={this.handleMenuToggle}\n          onItemPress={this.handleItemPress}\n        /\u003e\n      \u003c/View\u003e\n    );\n  }\n};\n\nconst styles = StyleSheet.create({\n  container: {\n    width: '100%',\n    height: '100%',\n    position: 'relative',\n  },\n});\n\nexport default MyScreen;\n\n```\n\n## Example rendering icons (FontAwesome, regular Images)\n\n```JSX\nimport { Image } from 'react-native';\nimport { FloatingMenu } from 'react-native-floating-action-menu';\nimport { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome';\nimport { faBars, faTimes, faUserPlus } from '@fortawesome/free-solid-svg-icons';\n\n// Specify data required to render the icon\nconst items = [\n  {\n    label: 'First is an icon',\n    fa: faUserPlus\n  },\n  {\n    label: 'Second is an image',\n    image: require('../assets/img-0.png')\n  },\n];\n// Optional color to be silly\nconst primaryColor = '#09f';\n\nclass MyScreen extends React.Component {\n  state = {};\n\n  renderMenuIcon = (menuState) =\u003e {\n    const { menuButtonDown } = menuState;\n\n    return menuButtonDown\n      ? \u003cImage source={require('./btn-down.png')} /\u003e\n      : \u003cImage source={require('./btn-up.png')} /\u003e;\n  }\n\n  renderItemIcon = (item, index, menuState) =\u003e {\n    const { itemsDown, dimmerActive } = menuState;\n\n    const isItemPressed = itemsDown[index];\n    const color = isItemPressed ? '#fff' : primaryColor;\n\n    // Icons can be rendered however you like.\n    // Here are some examples, using data from the item object:\n\n    if (item.fa) {\n      return (\n        \u003cFontAwesomeIcon\n          icon={item.fa}\n          size={25}\n          color={color}\n        /\u003e\n      );\n    }\n    else if (item.image) {\n      return (\n        \u003cImage\n          source={item.image}\n          style={{ tintColor: color }}\n          resizeMode=\"contain\"\n        /\u003e\n      );\n    }\n\n    return null;\n  };\n\n  ...\n\n```\n\n## Run Example\n\n- `git clone https://github.com/nicotroia/react-native-floating-action-menu`\n- `cd react-native-floating-action-menu/example`\n- `npm install`\n- `npm run ios` # or android\n\n## Develop\n\n- `npm pack`\n- `cd example`\n- `npm install ../react-native-floating-action-menu.tgz --save`\n- `npm run ios` # or android\n\n## License\n\nMIT © 2019-2024 [internet-nico](https://nicotroia.com)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnicotroia%2Freact-native-floating-action-menu","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnicotroia%2Freact-native-floating-action-menu","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnicotroia%2Freact-native-floating-action-menu/lists"}