mxck / React Native Material Menu
Licence: mit
Pure JavaScript material menu component for React Native
Stars: ✭ 327
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to React Native Material Menu
Githubfollows
A demo project based on MVVM architecture and material design & animations.
Stars: ✭ 272 (-16.82%)
Mutual labels: material-design, material
Framework7
Full featured HTML framework for building iOS & Android apps
Stars: ✭ 16,560 (+4964.22%)
Mutual labels: material-design, material
Material Motion Js
Reusable gestural interactions in JavaScript. In development.
Stars: ✭ 277 (-15.29%)
Mutual labels: material-design, material
Ngx Materialize
Angular wrap around Materialize library
Stars: ✭ 322 (-1.53%)
Mutual labels: material-design, material
Material Showcase Ios
✨ An elegant way to guide your beloved users in iOS apps - Material Showcase.
Stars: ✭ 300 (-8.26%)
Mutual labels: material-design, material
Epiboard
Web Extension — A new tab page extension with material design and useful features 🆕 🎉
Stars: ✭ 262 (-19.88%)
Mutual labels: material-design, material
Ng Notadd
In-middle background front-end solution based on angular material 基于Angular Material的中后台前端解决方案
Stars: ✭ 287 (-12.23%)
Mutual labels: material-design, material
Motion Shapeofview
Explain how to use MotionLayout with ShapeOfView
Stars: ✭ 236 (-27.83%)
Mutual labels: material-design, material
Primedatepicker
PrimeDatePicker is a tool that provides picking a single day, multiple days, and a range of days.
Stars: ✭ 292 (-10.7%)
Mutual labels: material-design, material
Materia Theme
A Material Design theme for GNOME/GTK based desktop environments
Stars: ✭ 3,177 (+871.56%)
Mutual labels: material-design, material
Materiallettericon
Material first letter icon like lollipop contacts icon. Letter(s) on a shape drawn on canvas.
Stars: ✭ 255 (-22.02%)
Mutual labels: material-design, material
Quasar
Quasar Framework - Build high-performance VueJS user interfaces in record time
Stars: ✭ 20,090 (+6043.73%)
Mutual labels: material-design, material
Responsive scaffold
Responsive Scaffold - On mobile it shows a list and pushes to details and on tablet it shows the List and the selected item. Maintainer: @rodydavis
Stars: ✭ 238 (-27.22%)
Mutual labels: material-design, material
Sequent
A simple continuous animation library for Android UI.
Stars: ✭ 263 (-19.57%)
Mutual labels: material-design, material
Alyle Ui
Minimal Design, a set of components for Angular 9+
Stars: ✭ 234 (-28.44%)
Mutual labels: material-design, material
Progressstatusbar
Another way to show progress. A progress View over the system StatusBar.
Stars: ✭ 283 (-13.46%)
Mutual labels: material-design, material
Material Backdrop
A simple solution for implementing Backdrop pattern for Android
Stars: ✭ 221 (-32.42%)
Mutual labels: material-design, material
Hexo Theme Fluid
🌊 一款 Material Design 风格的 Hexo 主题 / An elegant Material-Design theme for Hexo
Stars: ✭ 3,700 (+1031.5%)
Mutual labels: material-design, material
Material Bread
Cross Platform React Native Material Design Components
Stars: ✭ 287 (-12.23%)
Mutual labels: material-design, material
Material Components Vue
Material Design styled components for Vue.js
Stars: ✭ 316 (-3.36%)
Mutual labels: material-design, material
react-native-material-menu · 
Pure JavaScript material menu component for React Native with automatic RTL support.
Install
Using yarn
yarn add react-native-material-menu
or using npm
npm install --save react-native-material-menu
Usage example (expo demo)
import React from 'react';
import { View, Text } from 'react-native';
import Menu, { MenuItem, MenuDivider } from 'react-native-material-menu';
class App extends React.PureComponent {
_menu = null;
setMenuRef = ref => {
this._menu = ref;
};
hideMenu = () => {
this._menu.hide();
};
showMenu = () => {
this._menu.show();
};
render() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Menu
ref={this.setMenuRef}
button={<Text onPress={this.showMenu}>Show menu</Text>}
>
<MenuItem onPress={this.hideMenu}>Menu item 1</MenuItem>
<MenuItem onPress={this.hideMenu}>Menu item 2</MenuItem>
<MenuItem onPress={this.hideMenu} disabled>
Menu item 3
</MenuItem>
<MenuDivider />
<MenuItem onPress={this.hideMenu}>Menu item 4</MenuItem>
</Menu>
</View>
);
}
}
export default App;
Menu
Properties
| name | description | type | default |
|---|---|---|---|
| children | Components rendered in menu (required) | Node | - |
| button | Button component (required) | Node | - |
| style | Menu style | Style | - |
| onHidden | Callback when menu has become hidden | Function | - |
| animationDuration | Changes show() and hide() duration | Number | 300 |
Methods
| name | description |
|---|---|
| show() | Shows menu |
| hide() | Hides menu |
MenuItem
Properties
| name | description | type | default |
|---|---|---|---|
| children | Rendered children (required) | Node | - |
| disabled | Disabled flag | Bool | false |
| disabledTextColor | Disabled text color | String | '#bdbdbd' |
| ellipsizeMode | Custom ellipsizeMode | String | iOS: 'clip', Android: 'tail'
|
| onPress | Called function on press | Func | - |
| style | Container style | Style | - |
| textStyle | Text style | Style | - |
| underlayColor | Pressed color | String | '#e0e0e0' |
Children must be based on
<Text>component (like text itself, strings, react-native-vector-icons or expo icons) otherwise you may get an error on a real device.
MenuDivider
Properties
| name | description | type | default |
|---|---|---|---|
| color | Line color | String | 'rgba(0,0,0,0.12)' |
Pietile native kit
Also take a look at other our components for react-native - pietile-native-kit
License
MIT License. © Maksim Milyutin 2017-2019
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].