rn-floating-menu

React Native Floating Menu

A customizable floating menu component for React Native with animated background functionality.

Installation

Install the package using npm or yarn:

npm install rn-floating-menu
# or
yarn add rn-floating-menu

Demo Video

Watch the demo video to see how the react-native-floating-menu works: Link to Demo Video

Usage

import { FloatingMenu } from "rn-floating-menu";

const actionMenus = [
  {
    title: "Menu1",
    icon: "menu1_icon",
    handler: () => console.log("Menu1"),
  },
  {
    title: "Menu2",
    icon: "menu2_icon",
    handler: () => console.log("Menu2"),
  },
];

<FloatingMenu actionMenus={actionMenus} />;

Example

<FloatingMenu
  actionMenus={actionMenus}
  subActionButtonStyle={{ backgroundColor: "red" }}
  backShadow={true}
  subActionTextStyle={{ color: "yellow" }}
  backShadowStyle={{ backgroundColor: "rgba(0, 0, 0, 0.7)" }}
  mainActionButtonStyle={{ backgroundColor: "green" }}
  subActionContainerStyle={{ bottom: 100, right: 50 }}
/>

Props

Prop	Type	Required	Description
actionMenus	array	Yes	An array of menu items to display. Each item should be an object with title, icon, and handler.
subActionButtonStyle	object	No	Custom styles for the submenu buttons.
backShadow	boolean	No	Enables/disables the background shadow animation when the menu expands. Default is false.
subActionTextStyle	object	No	Custom styles for the submenu text.
backShadowStyle	object	No	Custom styles for the background shadow.
mainActionButtonStyle	object	No	Custom styles for the main action button.
subActionContainerStyle	object	No	Custom styles for the submenu container.

actionMenus Example

Each object in the actionMenus array should have the following properties:

• title: (string) The title text to display for the menu item.
• icon: (string) The name of the icon to display for the menu item. Ensure that the icon name is compatible with the react-native-vector-icons library.
• handler: (function) The function to be executed when the menu item is pressed.

Customization Example

You can customize various parts of the floating menu using the optional props. Here’s an example showing how to customize the appearance of the submenu and the background shadow:

<FloatingMenu
  actionMenus={actionMenus}
  subActionButtonStyle={{ backgroundColor: "red" }}
  backShadow={true}
  subActionTextStyle={{ color: "yellow" }}
  backShadowStyle={{ backgroundColor: "rgba(0, 0, 0, 0.7)" }}
  mainActionButtonStyle={{ backgroundColor: "green" }}
  subActionContainerStyle={{ bottom: 100, right: 50 }}
/>