https://github.com/nicotroia/react-native-floating-action-menu
Simple floating action menu for react-native
https://github.com/nicotroia/react-native-floating-action-menu
actions animation javascript menu react-native ui ui-components
Last synced: 12 months ago
JSON representation
Simple floating action menu for react-native
- Host: GitHub
- URL: https://github.com/nicotroia/react-native-floating-action-menu
- Owner: nicotroia
- License: mit
- Created: 2020-05-14T05:07:55.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2024-01-29T08:37:55.000Z (over 2 years ago)
- Last Synced: 2025-06-03T04:56:24.220Z (about 1 year ago)
- Topics: actions, animation, javascript, menu, react-native, ui, ui-components
- Language: TypeScript
- Size: 50.2 MB
- Stars: 28
- Watchers: 2
- Forks: 4
- Open Issues: 13
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
react-native-floating-action-menu
B-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!
## Installation
```
npm install --save react-native-floating-action-menu
```
## Usage
```JSX
import { FloatingMenu } from 'react-native-floating-action-menu';
const items = [
{ label: 'Do a little dance' },
{ label: 'Make a lil love' },
{ label: 'Get down tonight' },
];
```
## Item Config
_FloatingItem_
| Prop | description | type | required |
| ---------- | ------------------------------------------------------------------------------------------------------------------------------- | -------- | -------- |
| label | Text to display alongside button | string | ✔︎ |
| labelStyle | Style for the Text element | object |
| isPending | Will display ActivityIndicator in place of icon when `isPending` is true | boolean |
| isDisabled | Will disable the item when `isDisabled` is true | boolean |
| onPress | Callback function called when this item is pressed. This will override the default `onItemPress` callback given to FloatingMenu | function |
Example:
```JSX
{
label: 'Hello world',
isPending: false,
isDisabled: false,
onPress: (item, index) => {}, // (optional, can also be handled via `onItemPress`)
// Anything else you want goes here
}
```
## Menu Config
| Prop | description | type | default |
| ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- | ----------------------------------- |
| items | Array of `Item`s (See above). Items are positioned by their order in this array and start closest to the menu button. | FloatingItem[] | [] |
| isOpen | Control the menu open/closed state | boolean | false |
| position | "top-left" \| "top-right" \| "bottom-left" \| "bottom-right" | string | "bottom-right" |
| top | Position in px away from top edge | number | 38 |
| left | Position in px away from left edge | number | 38 |
| right | Position in px away from right edge | number | 38 |
| bottom | Position in px away from bottom edge | number | 38 |
| primaryColor | Hex color string used for backgrounds, borders, and icons | string | "#213A77" |
| backgroundUpColor | Override background color for menu and items UP state. Defaults to `#ffffff`. | string (hex) | - |
| backgroundDownColor | Override background color for menu and items DOWN state. Defaults to `primaryColor` value. | string (hex) | - |
| borderColor | Override border color for menu and items. Defaults to `primaryColor` value. | string (hex) | - |
| iconColor | Override icon color for menu and items. Defaults to `primaryColor` value. | string (hex) | - |
| buttonWidth | Width (and also height) of the button | number | 50 |
| innerWidth | Width (and also height) of the inner element of the button | number | - |
| dimmerStyle | Style the background dimmer element | object | - |
| openEase | Easing function used for the opening animation (see [js easing functions](https://gist.github.com/gre/1650294)) | function |
`t => (--t) * t * t + 1`
|
| closeEase | Easing function used for the closing animation (see [js easing functions](https://gist.github.com/gre/1650294)) | function | t => t _ t _ t
|
| renderMenuIcon | Function used to render the icon for menu button. Receives current menu state as an argument. (see below example) | function | - |
| renderItemIcon | Function used to render the icon for the items. Receives item, index, and current menu state as arguments. (see below example) | function | - |
| onMenuToggle | Callback function called when the menu has been toggled open or closed. Receives a boolean value | function | - |
| 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 | - |
## Gif Demos
Positions
FontAwesome
Colors
List lengths
## Quick Start Example
```JSX
import React from 'react';
import { StyleSheet } from 'react-native';
import { FloatingMenu } from 'react-native-floating-action-menu';
const items = [
{ label: 'Do a little dance' },
{ label: 'Make a lil love' },
{ label: 'Get down tonight' },
];
class MyScreen extends React.Component {
state = {
isMenuOpen: false,
};
handleMenuToggle = isMenuOpen =>
this.setState({ isMenuOpen });
handleItemPress = (item, index) =>
console.log('pressed item', item);
render() {
return (
);
}
};
const styles = StyleSheet.create({
container: {
width: '100%',
height: '100%',
position: 'relative',
},
});
export default MyScreen;
```
## Example rendering icons (FontAwesome, regular Images)
```JSX
import { Image } from 'react-native';
import { FloatingMenu } from 'react-native-floating-action-menu';
import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome';
import { faBars, faTimes, faUserPlus } from '@fortawesome/free-solid-svg-icons';
// Specify data required to render the icon
const items = [
{
label: 'First is an icon',
fa: faUserPlus
},
{
label: 'Second is an image',
image: require('../assets/img-0.png')
},
];
// Optional color to be silly
const primaryColor = '#09f';
class MyScreen extends React.Component {
state = {};
renderMenuIcon = (menuState) => {
const { menuButtonDown } = menuState;
return menuButtonDown
?
: ;
}
renderItemIcon = (item, index, menuState) => {
const { itemsDown, dimmerActive } = menuState;
const isItemPressed = itemsDown[index];
const color = isItemPressed ? '#fff' : primaryColor;
// Icons can be rendered however you like.
// Here are some examples, using data from the item object:
if (item.fa) {
return (
);
}
else if (item.image) {
return (
);
}
return null;
};
...
```
## Run Example
- `git clone https://github.com/nicotroia/react-native-floating-action-menu`
- `cd react-native-floating-action-menu/example`
- `npm install`
- `npm run ios` # or android
## Develop
- `npm pack`
- `cd example`
- `npm install ../react-native-floating-action-menu.tgz --save`
- `npm run ios` # or android
## License
MIT © 2019-2024 [internet-nico](https://nicotroia.com)