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

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

Positions	FontAwesome	Colors	List lengths

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;
  };

  ...

nicotroia/react-native-floating-action-menu