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
expo demo)
Usage example (import React from 'react'; import View Text from 'react-native';import Menu MenuItem MenuDivider from 'react-native-material-menu'; PureComponent _menu = null; { this_menu = ref; }; { this_menu; }; { this_menu; }; { return <View => <Menu = = > <MenuItem =>Menu item 1</MenuItem> <MenuItem =>Menu item 2</MenuItem> <MenuItem = > Menu item 3 </MenuItem> <MenuDivider /> <MenuItem =>Menu item 4</MenuItem> </Menu> </View> ; } ;
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