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' },
];

items={items}
isOpen={this.state.isMenuOpen}
onMenuToggle={this.handleMenuToggle}
onItemPress={this.handleItemPress}
/>
`

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 Items (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) | function |

t => (--t)  t  t + 1

t => t _ t _ t

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 (

isOpen={this.state.isMenuOpen}
items={items}
onMenuToggle={this.handleMenuToggle}
onItemPress={this.handleItemPress}
/>

);
}
};

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 (
icon={item.fa}
size={25}
color={color}
/>
);
}
else if (item.image) {
return (
source={item.image}
style={{ tintColor: color }}
resizeMode="contain"
/>
);
}

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