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

1import { FloatingMenu } from 'react-native-floating-action-menu';
2
3const items = [
4  { label: 'Do a little dance' },
5  { label: 'Make a lil love' },
6  { label: 'Get down tonight' },
7];
8
9<FloatingMenu
10  items={items}
11  isOpen={this.state.isMenuOpen}
12  onMenuToggle={this.handleMenuToggle}
13  onItemPress={this.handleItemPress}
14/>

Item Config

FloatingItem

Example:

1{
2  label: 'Hello world',
3  isPending: false,
4  isDisabled: false,
5  onPress: (item, index) => {}, // (optional, can also be handled via `onItemPress`)
6  // Anything else you want goes here
7}

Menu Config

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

t => t _ t _ t

Gif Demos

Positions	FontAwesome	Colors	List lengths

Quick Start Example

1import React from 'react';
2import { StyleSheet } from 'react-native';
3import { FloatingMenu } from 'react-native-floating-action-menu';
4
5const items = [
6  { label: 'Do a little dance' },
7  { label: 'Make a lil love' },
8  { label: 'Get down tonight' },
9];
10
11class MyScreen extends React.Component {
12  state = {
13    isMenuOpen: false,
14  };
15
16  handleMenuToggle = isMenuOpen =>
17    this.setState({ isMenuOpen });
18
19  handleItemPress = (item, index) =>
20    console.log('pressed item', item);
21
22  render() {
23    return (
24      <View style={styles.container}>
25        <FloatingMenu
26          isOpen={this.state.isMenuOpen}
27          items={items}
28          onMenuToggle={this.handleMenuToggle}
29          onItemPress={this.handleItemPress}
30        />
31      </View>
32    );
33  }
34};
35
36const styles = StyleSheet.create({
37  container: {
38    width: '100%',
39    height: '100%',
40    position: 'relative',
41  },
42});
43
44export default MyScreen;
45

Example rendering icons (FontAwesome, regular Images)

1import { Image } from 'react-native';
2import { FloatingMenu } from 'react-native-floating-action-menu';
3import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome';
4import { faBars, faTimes, faUserPlus } from '@fortawesome/free-solid-svg-icons';
5
6// Specify data required to render the icon
7const items = [
8  {
9    label: 'First is an icon',
10    fa: faUserPlus
11  },
12  {
13    label: 'Second is an image',
14    image: require('../assets/img-0.png')
15  },
16];
17// Optional color to be silly
18const primaryColor = '#09f';
19
20class MyScreen extends React.Component {
21  state = {};
22
23  renderMenuIcon = (menuState) => {
24    const { menuButtonDown } = menuState;
25
26    return menuButtonDown
27      ? <Image source={require('./btn-down.png')} />
28      : <Image source={require('./btn-up.png')} />;
29  }
30
31  renderItemIcon = (item, index, menuState) => {
32    const { itemsDown, dimmerActive } = menuState;
33
34    const isItemPressed = itemsDown[index];
35    const color = isItemPressed ? '#fff' : primaryColor;
36
37    // Icons can be rendered however you like.
38    // Here are some examples, using data from the item object:
39
40    if (item.fa) {
41      return (
42        <FontAwesomeIcon
43          icon={item.fa}
44          size={25}
45          color={color}
46        />
47      );
48    }
49    else if (item.image) {
50      return (
51        <Image
52          source={item.image}
53          style={{ tintColor: color }}
54          resizeMode="contain"
55        />
56      );
57    }
58
59    return null;
60  };
61
62  ...
63

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