https://github.com/nicotroia/react-native-floating-action-menu.git
npm install react-native-floating-action-menu 
```
npm install --save react-native-floating-action-menu
`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' },
];
isOpen={this.state.isMenuOpen}
onMenuToggle={this.handleMenuToggle}
onItemPress={this.handleItemPress}
/>
`
_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
| isDisabled | Will disable the item when is true | boolean |onItemPress
| onPress | Callback function called when this item is pressed. This will override the default callback given to FloatingMenu | function |
Example:
`JSXonItemPress
{
label: 'Hello world',
isPending: false,
isDisabled: false,
onPress: (item, index) => {}, // (optional, can also be handled via )`
// Anything else you want goes here
}
| 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[] | [] |#ffffff
| 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 . | string (hex) | - |primaryColor
| backgroundDownColor | Override background color for menu and items DOWN state. Defaults to value. | string (hex) | - |primaryColor
| borderColor | Override border color for menu and items. Defaults to value. | string (hex) | - |primaryColor
| iconColor | Override icon color for menu and items. Defaults to value. | string (hex) | - |t => (--t) t t + 1
| 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 | |onPress
| closeEase | Easing function used for the closing animation (see js easing functions) | 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 function, it will take priority, and this function will be ignored | function | - |
Positions ![]() | FontAwesome ![]() | Colors ![]() | List lengths ![]() |
`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 (
items={items}
onMenuToggle={this.handleMenuToggle}
onItemPress={this.handleItemPress}
/>
);
}
};
const styles = StyleSheet.create({
container: {
width: '100%',
height: '100%',
position: 'relative',
},
});
export default MyScreen;
`
`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 (
size={25}
color={color}
/>
);
}
else if (item.image) {
return (
style={{ tintColor: color }}
resizeMode="contain"
/>
);
}
return null;
};
...
`
- git clone https://github.com/nicotroia/react-native-floating-action-menucd react-native-floating-action-menu/example
- npm install
- npm run ios
- # or android
- npm packcd example
- npm install ../react-native-floating-action-menu.tgz --save
- npm run ios` # or android
-
MIT © 2019-2024 internet-nico