https://github.com/wrathchaos/react-native-bottom-menu

Fully customizable Bottom Menu for React Native.
https://github.com/wrathchaos/react-native-bottom-menu

android apple application design freakycoder front-end front-end-development google ios jsx kuray library mobile mobile-app-development react react-native reactjs

Last synced: about 2 months ago
JSON representation

Fully customizable Bottom Menu for React Native.

• Host: GitHub
• URL: https://github.com/wrathchaos/react-native-bottom-menu
• Owner: WrathChaos
• License: mit
• Created: 2019-08-02T14:40:48.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2023-10-21T00:16:24.000Z (about 1 year ago)
• Last Synced: 2024-10-25T16:59:05.470Z (2 months ago)
• Topics: android, apple, application, design, freakycoder, front-end, front-end-development, google, ios, jsx, kuray, library, mobile, mobile-app-development, react, react-native, reactjs
• Language: JavaScript
• Homepage: https://www.freakycoder.com
• Size: 16.8 MB
• Stars: 18
• Watchers: 3
• Forks: 2
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        


[![Battle Tested ✅](https://img.shields.io/badge/-Battle--Tested%20%E2%9C%85-03666e?style=for-the-badge)](https://github.com/WrathChaos/react-native-bottom-menu)

[![Fully customizable Bottom Menu for React Native](https://img.shields.io/badge/-Fully%20customizable%20Bottom%20Menu%20for%20React%20Native-lightgrey?style=for-the-badge)](https://github.com/WrathChaos/react-native-bottom-menu)

[![npm version](https://img.shields.io/npm/v/react-native-bottom-menu.svg?style=for-the-badge)](https://www.npmjs.com/package/react-native-bottom-menu)

[![npm](https://img.shields.io/npm/dt/react-native-bottom-menu.svg?style=for-the-badge)](https://www.npmjs.com/package/react-native-bottom-menu)

![Platform - Android and iOS](https://img.shields.io/badge/platform-Android%20%7C%20iOS-blue.svg?style=for-the-badge)

[![License: MIT](https://img.shields.io/badge/License-MIT-green.svg?style=for-the-badge)](https://opensource.org/licenses/MIT)

[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier)









## Installation

Add the dependency:

### React Native:

```ruby

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. 

```js

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

```

```js

   {})}

  />

```

## Advanced Usage

You can check the example for the advanced usage

```js

   this.setState({ isActive: "home" })}

  />

   this.setState({ isActive: "messages" })}

  />

   this.setState({ isActive: "cart" })}

  />

   this.setState({ isActive: "settings" })}

  />

```

## BottomMenu Wrapper with React Hooks as an Example

```js

import React, { useState } from "react";

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

const BottomMenuWrapper = props => {

  const [isActive, setActive] = useState("home");

  return (

    

       setActive("home")}

      />

       setActive("messages")}

      />

       setActive("cart")}

      />

       setActive("settings")}

      />

    

  );

};

export default BottomMenuWrapper;

```

#### Usage

```js

import BottomMenu from "shared-components/BottomMenuWrapper";

```

### ToDos

- [x] 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.