React Native Expandable Circle Menu

React Native expandable circle menu library

Demo

Installation

First, download the library from npm:

npm install rn-expandable-circle-menu --save

Usage

import CircleMenu from 'rn-expandable-circle-menu'

const openMenuButton = {
  image: require('./assets/openMenu.png'),
}

const closeMenuButton = {
  image: require('./assets/closeMenu.png'),
  // You can override style of every item
  style: {
    backgroundColor: 'red'
  }
}

const menuItems = [
  {
    image: require('./assets/shareLogo.png'),
    onClick: () => {
      alert('Share button pressed')
    },
    style: {
      backgroundColor: 'yellow'
    }
  },
  {
    image: require('./assets/searchLogo.png'),
    onClick: () => {
      alert('Search button pressed')
    }
  },
  {
    image: require('./assets/moreLogo.png'),
    onClick: () => {
      alert('More button pressed')
    }
  },
  {
    image: require('./assets/downloadLogo.png'),
    onClick: () => {
      alert('Download button pressed')
    }
  },
];


const CircleMenuView = () => {
  return (
    <CircleMenu
      menuItems={menuItems}
      openMenuButton={openMenuButton}
      closeMenuButton={closeMenuButton}
    />
  )
}

Props

| Name | Description | Type | Required | | :--- | :----- | :--- | :---: | | menuItems | Array of menu items | Array | YES | | openMenuButton | Object for open menu button | Object | YES | | closeMenuButton | Object for close menu button | Object | YES |

menuItems

| Name | Description | Type | Required | | :--- | :----- | :--- | :---: | | image | The icon of the item | Image | YES | | onClick | The function that called when pressed on menu item | Function | YES | | style | Style object to override style | Object | NO |

openMenuButton & closeMenuButton

| Name | Description | Type | Required | | :--- | :----- | :--- | :---: | | image | The icon of the item | Image | YES | | style | Style object to override style | Object | NO |