wrathchaos/react-native-bottom-menu

Fully customizable Bottom Menu for React Native.

Installation

Add the dependency:

React Native:

npm i react-native-bottom-menu

Peer Dependencies

IMPORTANT! You need install them.

"react": ">= 16.x.x",
"react-native": ">= 0.55.x",
"react-native-androw": ">= 0.0.31",
"react-native-vector-icons": ">= 6.x.x",
"react-native-dynamic-vector-icons": ">= x.x.x"

Basic Usage

You can use any other component rather than Item component. It's all customizable.

import { BottomMenu, Item } from "react-native-bottom-menu";

<BottomMenu>
  <Item
    size={22}
    name="home"
    text="Home"
    type="Octicons"
    onPress={() => {})}
  />
</BottomMenu>

Advanced Usage

You can check the example for the advanced usage

<BottomMenu>
  <Item
    size={22}
    name="home"
    text="Home"
    type="Octicons"
    isActive={this.state.isActive == "home" ? true : false}
    onPress={() => this.setState({ isActive: "home" })}
  />
  <Item
    size={22}
    type="Feather"
    text="Messages"
    name="message-circle"
    isActive={this.state.isActive == "messages" ? true : false}
    onPress={() => this.setState({ isActive: "messages" })}
  />
  <Item
    size={30}
    name="cart"
    text="Cart"
    type="EvilIcons"
    isActive={this.state.isActive == "cart" ? true : false}
    onPress={() => this.setState({ isActive: "cart" })}
  />
  <Item
    size={22}
    name="settings"
    text="Settings"
    type="SimpleLineIcons"
    isActive={this.state.isActive == "settings" ? true : false}
    onPress={() => this.setState({ isActive: "settings" })}
  />
</BottomMenu>

BottomMenu Wrapper with React Hooks as an Example

import React, { useState } from "react";
import { BottomMenu, Item } from "react-native-bottom-menu";

const BottomMenuWrapper = props => {
  const [isActive, setActive] = useState("home");
  return (
    <BottomMenu>
      <Item
        size={22}
        name="home"
        text="Home"
        type="Octicons"
        isActive={isActive == "home" ? true : false}
        onPress={() => setActive("home")}
      />
      <Item
        size={22}
        type="Feather"
        text="Messages"
        name="message-circle"
        isActive={isActive == "messages" ? true : false}
        onPress={() => setActive("messages")}
      />
      <Item
        size={30}
        name="cart"
        text="Cart"
        type="EvilIcons"
        isActive={isActive == "cart" ? true : false}
        onPress={() => setActive("cart")}
      />
      <Item
        size={22}
        name="settings"
        text="Settings"
        type="SimpleLineIcons"
        isActive={isActive == "settings" ? true : false}
        onPress={() => setActive("settings")}
      />
    </BottomMenu>
  );
};

export default BottomMenuWrapper;

Usage

import BottomMenu from "shared-components/BottomMenuWrapper";

<BottomMenu />

ToDos

• LICENSE
• Write an article about the lib on Medium

Author

FreakyCoder, [email protected]

License

React Native Bottom Menu Library is available under the MIT license. See the LICENSE file for more info.

react-native-bottom-menu's Issues

Shadow (elevation) not working in Android platform

I'm using react-native-bottom-menu 0.1.8 and I'm having some problem to set shadow in the menu element on android platform. I have tried to add elevation: 5 in the menu shadowStyle but still not works...

Android at left and iOS at right:

Android View Problem

Half of the bar doesn't appear on Android