2.0.0 • Published 3 months ago
react-native-floating-action-menu v2.0.0
Installation
npm install --save react-native-floating-action-menu
Usage
import { FloatingMenu } from 'react-native-floating-action-menu';
const items = [
{ label: 'Do a little dance' },
{ label: 'Make a lil love' },
{ label: 'Get down tonight' },
];
<FloatingMenu
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:
{
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) | function | t => (--t) * t * t + 1 |
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 onPress function, it will take priority, and this function will be ignored | function | - |
Gif Demos
Quick Start Example
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 (
<View style={styles.container}>
<FloatingMenu
isOpen={this.state.isMenuOpen}
items={items}
onMenuToggle={this.handleMenuToggle}
onItemPress={this.handleItemPress}
/>
</View>
);
}
};
const styles = StyleSheet.create({
container: {
width: '100%',
height: '100%',
position: 'relative',
},
});
export default MyScreen;
Example rendering icons (FontAwesome, regular Images)
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
? <Image source={require('./btn-down.png')} />
: <Image source={require('./btn-up.png')} />;
}
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 (
<FontAwesomeIcon
icon={item.fa}
size={25}
color={color}
/>
);
}
else if (item.image) {
return (
<Image
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
2.0.0
3 months ago
1.2.4
2 years ago
1.2.3
2 years ago
1.2.2
2 years ago
1.2.1
2 years ago
1.2.0
3 years ago
1.1.14
3 years ago
1.1.13
3 years ago
1.1.12
4 years ago
1.1.11
4 years ago
1.1.10
4 years ago
1.1.9
4 years ago
1.1.8
4 years ago
1.1.7
4 years ago
1.1.5
4 years ago
1.1.4
4 years ago
1.1.2
4 years ago
1.1.1
4 years ago
1.1.0
4 years ago
1.0.11
4 years ago
1.0.9
4 years ago
1.0.8
4 years ago
1.0.7
4 years ago
1.0.3
4 years ago
1.0.2
4 years ago
1.0.1
4 years ago
1.0.0
4 years ago