JSPM – react-native-bottom-menu@0.1.8

Package Exports

react-native-bottom-menu

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-native-bottom-menu) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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, kurayogun@gmail.com

License

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