mxck / react-native-material-menu Goto Github PK
View Code? Open in Web Editor NEWPure JavaScript material menu component for React Native
License: MIT License
Pure JavaScript material menu component for React Native
License: MIT License
Is it possible to put the arrow on the horizontal sides or bottom side of the menu?
Currently it only comes up on top side.
Here are examples on iOS where they do other sides:
From - http://www.completedynamics.com/help/cdhelp_case_module_case_sharing_p_ios_tablet_en.html
From: http://iosguides.net/icloud-website-updated-ios-7-design-style/
The menu works perfectly on Android, but now I tested it on iOS and it needs at least 10 seconds to open the menu (sometimes even longer). I also tried out to delete everything in the showMenu method because I thought maybe it slows it down on iOS, but same issue.
Hey there, thank you for making this package, really saved me time. I now need to add accessibility but I can't seem to expose the Menu Items to screen readers even when I set accessibility to true.
On Android I was trying to achieve this effect. I was using a hack on <Picker mode="dropdown">
and it was a really bad experience. Thanks for this module!
Hey,
Thanks for the plugin, it is really useful and got us over the line, However, I feel the Menu Item is being hardcoded and prevents the item to grow over 248px
, hence impacting the onPress.
File - src/MenuItem.js
Location - styles -> container -> maxWidth
[Line 79]
Current issue
After removing the maxWidth
from the MenuItem.js
Any idea of being dynamic in the future or providing an option to accept the width as a separate prop?
I understand this repo is more of a popup menu
rather than dropdown
, however, having a dynamic width can be useful in both the scenarios.
Regards
Hari
static navigationOptions = {
headerTitle: "My App",
headerStyle: {
backgroundColor: 'blue',
},
headerTitleStyle: {
fontWeight: 'bold',
fontSize : wid/19,
color : 'white'
},
headerRight: (
<Menu
ref={(ref) => this._menu = ref}
button={<TouchableOpacity onPress={() => this._menu.show()} style={{paddingHorizontal:16, height: '100%', alignItems:'center', justifyContent: 'center'}}><Image source={require('./blue_grad.png')} style={{width: 20, height: 20, alignSelf:'center'}} resizeMode='contain'/></TouchableOpacity>}
>
<MenuItem onPress={() => Linking.openURL('url')} textStyle={{color: '#000', fontSize: 16}}> Item 1</MenuItem>
<MenuItem onPress={()=> this.props.navigation.navigate('page2')} textStyle={{color: '#000', fontSize: 16}}>Item 2</MenuItem>
<MenuItem textStyle={{color: '#000', fontSize: 16}}>Item 3</MenuItem>
<MenuItem onPress={() => alert('mnfj')} textStyle={{color: '#000', fontSize: 16}}>Item 4</MenuItem>
</Menu>
),
};
//Alert , Linking_openUrl function works , but navigation do not works, can you please help me,
// And I also need SubItems for MenuItem , can you send the code
Hello,
I was searching for a native popup menu to create a filter bar for a FlatList component (e.g. order by name, price etc) and I found this great module.
I installed it and it works fine, but I don't understand how to get value from MenuItem selection.
The onPress method on MenuItem just hides the menu, but I can not pass the selected value.
Any idea to do that?
Thank you.
like <Search screenProps={{ uid:this.props.screenProps.uid}} /> could not able to go to Search .js
I have a dynamic List. I want to open menu on button click in each list item. How to do that?
On Android when I open the menu the status bar of the devices disappears, is this a wanted behaviour? happens just to me?
Thanks in advance
According to my project need, i need to click on name or any other field and then menu should popup. So, i called a function from render() to show menu but it is not showing up. Below is my code snippet, please have a look and fix the issue. If there is issue of zIndex then also please help me.
import React, { Component } from 'react';
import { AppRegistry, StyleSheet, TextInput,Keyboard,TouchableWithoutFeedback, ActivityIndicator, Switch, ListView, Text, View,
Alert, Platform, TouchableHighlight, Image, TouchableOpacity, ScrollView } from 'react-native';
import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome';
import MaterialIcon from 'react-native-vector-icons/MaterialIcons';
import EntypoIcon from 'react-native-vector-icons/Entypo';
import FoundationIcon from 'react-native-vector-icons/Foundation';
import Menu, { MenuItem, MenuDivider } from 'react-native-material-menu';
import { StackNavigator } from 'react-navigation';
class view_camp extends Component {
_menu = null;
static navigationOptions = {
title: 'View Campaigns',
headerLeft : null,
};
constructor(props) {
super(props);
this.state = {
isLoading: true,
text: '',
stat: '',
isPopupMenu : false,
dummy_data : [{"id":'1',"name":"abc","status":'0'},{"id":'2',"name":"xyz","status":'1'}],
}
this.arrayholder = [];
}
_onPressButton = () => {
this.props.navigation.navigate('Third', { ClientId: this.props.navigation.state.params.ClientId });
}
componentDidMount() {
const base64 = require('base-64');
return fetch('http://devapi.nlpcaptcha.in/v1/campaign_ad/loadCampaigns/All', {
method: 'GET',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
"Authorization": "Basic " + base64.encode("C1X_demo:QZMWOLIT]C")
}
}).then((response) => response.json())
.then((responseJson) => {
let ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 });
this.setState({
isLoading: false,
dataSource: ds.cloneWithRows(this.state.dummy_data),
}, function () {
this.arrayholder = responseJson;
});
})
.catch((error) => {
console.error(error);
});
}
onEditCampaignAction = (campaignID) => {
this.hideMenu();
this.props.navigation.navigate('Fourth', { campaign_id: campaignID, ClientId: this.props.navigation.state.params.ClientId });
}
onViewDetailsAction = (campaignID) => {
this.hideMenu();
this.props.navigation.navigate('Fifth', { campaign_id: campaignID, ClientId: this.props.navigation.state.params.ClientId });
}
onGeoTargetingAction = (campaignID) => {
this.hideMenu();
this.props.navigation.navigate('Sixth', { campaign_id: campaignID, ClientId: this.props.navigation.state.params.ClientId });
}
ListViewItemSeparator = () => {
return (
<View
style={{
height: .5,
width: "100%",
backgroundColor: "#000",
}}
/>
);
}
renderPopupMenuCampName = (camp_id, camp_status) =>
{ console.log("here");
var menuVar =
(
<View style={styles.viewMenuContainer}>
<Menu
style = {styles.menuContainer}
ref={this.setMenuRef}
button={<Text onPress={this.showMenu}></Text>}
>
<View style={styles.menuItemContainer}>
{camp_status == '0' ?
<MenuItem
style={styles.IconOuterSectionStyleMenu}
activeOpacity={.5}
onPress={() => this.onEditCampaignAction.bind(this, camp_id)}>
{<FontAwesomeIcon name='pencil' style={styles.iconMenu}/>}
</MenuItem>
:
<MenuItem
style={styles.IconOuterSectionStyleMenu}
activeOpacity={.5}
onPress={this.onViewDetailsAction.bind(this, camp_id)}>
{ <FontAwesomeIcon name='eye' style={styles.iconMenu} /> }
</MenuItem>
}
<MenuItem
style={styles.IconOuterSectionStyleMenu}
activeOpacity={.5}
onPress={this.onGeoTargetingAction.bind(this, camp_id)}>
{<FontAwesomeIcon name='map-marker' style={styles.iconMenu}/>}
</MenuItem>
</View>
</Menu>
</View>
);
console.log(menuVar);
//this.showMenu();
return menuVar;
}
setMenuRef = ref => {
this._menu = ref;
};
hideMenu = () => {
this._menu.hide();
};
showMenu = () => { console.log("start");
this._menu.show();
console.log("end");
};
render() {
const { navigate } = this.props.navigation;
if (this.state.isLoading) {
return (
<View style={{ flex: 1, paddingTop: 20 }}>
<ActivityIndicator />
</View>
);
}
return (
<ScrollView>
<ListView
enableEmptySections={true}
dataSource={this.state.dataSource}
stickyHeaderIndices={[0]}
renderSeparator={this.ListViewItemSeparator}
renderRow={(rowData) =>
<View style={{ flex: 1, flexDirection: 'row' }} >
<TouchableOpacity
style={styles.showMenuContainer}
activeOpacity={.5}
onPress={this.renderPopupMenuCampName.bind(this, rowData.id,rowData.status)}
>
<Text style={styles.textViewContainer}> {rowData.name} </Text>
</TouchableOpacity>
{rowData.status == '0' ?
<View style={styles.SwitchOuterSectionStyle}>
<Text style={styles.textWithSwitch}>
Inactive </Text>
<Switch
onValueChange={this.onStatusButtonPressed.bind(this, rowData.status, rowData.campaign_id)}
value={false} />
</View>
:
<View style={styles.SwitchOuterSectionStyle}>
<Text style={styles.textWithSwitch}>
Active </Text>
<Switch
onValueChange={this.onStatusButtonPressed.bind(this, rowData.status, rowData.campaign_id)}
value={true} />
</View>}
</View>
}
/>
</ScrollView>
</View>
);
}
}
const styles = StyleSheet.create({
viewMenuContainer :{
width: 150,
zIndex : 999,
},
menuContainer :{
flexWrap: 'wrap',
//width : 550,
//height : 300,
flex: 1,
// left: 20,
top: 400,
marginTop: 100,
flexDirection:"row",
padding: 5,
overflow: 'visible',
position: 'absolute',
alignItems: 'flex-start',
justifyContent: 'center',
borderWidth: 1,
borderColor: '#87ceeb',
},
showMenuContainer:{
width: 150,
//zIndex : 999,
},
textViewContainer: {
textAlignVertical: 'center',
padding: 7,
borderWidth: 1,
borderColor: '#87ceeb',
fontSize: 13,
width: 150,
},
textViewMenuContainer: {
textAlignVertical: 'center',
padding: 7,
borderWidth: 1,
borderColor: '#87ceeb',
fontSize: 13,
width: 90,
},
stickyTextViewContainer: {
textAlignVertical: 'center',
fontSize: 17,
fontWeight: 'bold',
padding: 7,
height: 45,
backgroundColor: '#00BFFF',
borderWidth: 1,
borderColor: '#87ceeb',
fontSize: 13,
width: 150,
},
stickyActionTextViewContainer: {
textAlignVertical: 'center',
textAlign: 'center',
fontSize: 17,
fontWeight: 'bold',
padding: 7,
justifyContent: 'center',
alignItems: 'center',
height: 45,
backgroundColor: '#00BFFF',
borderWidth: 1,
borderColor: '#87ceeb',
fontSize: 13,
width: 550,
},
textWithSwitch: {
fontSize: 13,
},
imageClass: {
height: 40,
width: 40,
marginLeft: 25,
borderRadius: 7,
},
SubmitButtonStyle: {
marginTop: 10,
marginLeft: 10,
marginBottom: 5,
backgroundColor: '#D6EAF8',
borderRadius: 10,
borderWidth: 1,
borderColor: '#fff'
},
TextStyle: {
color: '#fff',
textAlign: 'center',
},
icon: {
fontSize: 30,
padding: 5
},
iconMenu: {
flex : 1,
flexDirection : 'row',
fontSize: 30,
padding: 2
},
menuItemContainer: {
},
SectionStyle: {
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#fff',
borderWidth: .5,
borderColor: '#000',
height: 40,
width: 220,
borderRadius: 5,
margin: 10
},
});
module.exports = view_camp;
Iยดm using it this way in a PureComponent, please let me if I am doing something wrong.
import React from 'react'
import Menu, {MenuItem} from 'react-native-material-menu'
import theme from "../theme"
import {Icon} from './Icon'
class DropdownMenu extends React.PureComponent {
render () {
const {iconName, menuList} = this.props
return (
<Menu ref={(ref) => { this._menu = ref }} button={<Icon size={32} color={theme.palette.colors.secondaryTitleColor} name={iconName} onPress={() => this._menu.show()}/>}>
{
menuList.map((item, index) => {
return (<MenuItem key={index} onPress={() => this.executeItemOnPress(item.onPress)} style={{height:30}}>{item.text})
})
}
)
}
executeItemOnPress = (onItemPress) => {
this._menu.hide()
onItemPress()
}
}
export {DropdownMenu}
For some reason, I cannot install (npm i
) other packages while this package is installed. I get the error below. I have to first npm un react-native-material-menu
and then install the other package then I can install this back. Is this just me?
Environment:
OS: Windows 10
Node: 8.4.0
Yarn: 0.19.1
npm: 5.4.2
Watchman: Not Found
Xcode: N/A
Android Studio: Version 2.3.0.0 AI-162.3764568
Packages:
react: 16.0.0
react-native: 0.47.1
PS C:\Users\Mercurius\Documents\GitHub\trustedplatform_android> npm i react-native-carousel-pager
npm ERR! path C:\Users\Mercurius\Documents\GitHub\trustedplatform_android\node_modules\react-native-material-menu
npm ERR! code EISGIT
npm ERR! git C:\Users\Mercurius\Documents\GitHub\trustedplatform_android\node_modules\react-native-material-menu: Appears to be a git repo or submodule.
npm ERR! git C:\Users\Mercurius\Documents\GitHub\trustedplatform_android\node_modules\react-native-material-menu
npm ERR! git Refusing to remove it. Update manually,
npm ERR! git or move it out of the way first.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Mercurius\AppData\Roaming\npm-cache_logs\2017-12-01T18_53_56_927Z-debug.log
Hello,
Thanks for your component.
In order to stay consistent, according to the Material guide concerning elevation the elevation should be 8 and not 2 by default.
So, on android:
{ elevation: 8 }
And on IOS:
{ shadowOpacity: 0.192, shadowRadius: 4.32, shadowOffset: { height: 4.8, } }
Moreover, the elevation value should be a props by itself because can be a major styling props to ensure consistency with other UX components. For android, the props is straight forward. For IOS, formulas are:
shadowOpacity: 0.0015 * elevation + 0.18, shadowRadius: 0.54 * elevation, shadowOffset: { height: 0.6 * elevation, }
I can present a PR if you want :)
Bye
Hello,
after the onPress Menu button is raised, I get this error:
Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
Check the render method of Menu
.
This error is located at:
in RCTView (at View.js:71)
in View (at createAnimatedComponent.js:147)
in AnimatedComponent (at Menu.js:172)
in RCTView (at View.js:71)
in View (at createAnimatedComponent.js:147)
in AnimatedComponent (at Menu.js:164)
in RCTView (at View.js:71)
in View (at Menu.js:163)
in TouchableWithoutFeedback (at Menu.js:162)
in RCTView (at View.js:71)
in View (at AppContainer.js:102)
in RCTView (at View.js:71)
in View (at AppContainer.js:122)
in AppContainer (at Modal.js:238)
in RCTView (at View.js:71)
in View (at Modal.js:257)
in RCTModalHostView (at Modal.js:244)
in Modal (at Menu.js:161)
in RCTView (at View.js:71)
in View (at Menu.js:158)
in Menu (at Todo.js:41)
in RCTView (at View.js:71)
in View (at ListItem.react.js:455)
in RCTView (at View.js:71)
in View (at ListItem.react.js:470)
in RCTView (at View.js:71)
in View (at ListItem.react.js:483)
in TouchableWithoutFeedback (at RippleFeedbackIOS.react.js:283)
in RippleFeedbackIOS (at ListItem.react.js:490)
in RCTView (at View.js:71)
in View (at ListItem.react.js:502)
in ListItem (at Todo.js:34)
in Todo (at TodoListContainer.js:18)
in RCTView (at View.js:71)
in View (at VirtualizedList.js:1363)
in CellRenderer (at VirtualizedList.js:556)
in RCTScrollContentView (at ScrollView.js:717)
in RCTScrollView (at ScrollView.js:811)
in ScrollView (at VirtualizedList.js:871)
in VirtualizedList (at FlatList.js:634)
in FlatList (at TodoListContainer.js:16)
in RCTView (at View.js:71)
in View (at TodoListContainer.js:11)
in TodoList (created by Connect(TodoList))
in Connect(TodoList) (at LoggedInHome.js:61)
in RCTView (at View.js:71)
in View (at LoggedInHome.js:59)
in RCTView (at View.js:71)
in View (at Screen.js:28)
in Unknown (at LoggedInHome.js:58)
in Home (at withNavigation.js:21)
in withNavigation(Home) (created by Connect(withNavigation(Home)))
in Connect(withNavigation(Home)) (at SceneView.js:31)
in SceneView (at CardStack.js:405)
in RCTView (at View.js:71)
in View (at createAnimatedComponent.js:147)
in AnimatedComponent (at Card.js:26)
in Card (at PointerEventsContainer.js:55)
in Container (at CardStack.js:436)
in RCTView (at View.js:71)
in View (at CardStack.js:365)
in RCTView (at View.js:71)
in View (at CardStack.js:364)
in CardStack (at CardStackTransitioner.js:97)
in RCTView (at View.js:71)
in View (at Transitioner.js:187)
in Transitioner (at CardStackTransitioner.js:49)
in CardStackTransitioner (at StackNavigator.js:60)
in Unknown (at createNavigator.js:52)
in Navigator (at createNavigationContainer.js:216)
in NavigationContainer (at SceneView.js:31)
in SceneView (at TabView.js:82)
in RCTView (at View.js:71)
in View (at TabView.js:81)
in RCTView (at View.js:71)
in View (at TabViewPagerPan.js:294)
in RCTView (at View.js:71)
in View (at createAnimatedComponent.js:147)
in AnimatedComponent (at TabViewPagerPan.js:284)
in TabViewPagerPan (at TabView.js:165)
in RCTView (at View.js:71)
in View (at TabViewAnimated.js:252)
in TabViewAnimated (at TabView.js:225)
in TabView (at withCachedChildNavigation.js:66)
in withCachedChildNavigation(TabView) (at TabNavigator.js:65)
in Unknown (at createNavigator.js:52)
in Navigator (at createNavigationContainer.js:216)
in NavigationContainer (at SceneView.js:31)
in SceneView (at CardStack.js:405)
in RCTView (at View.js:71)
in View (at createAnimatedComponent.js:147)
in AnimatedComponent (at Card.js:26)
in Card (at PointerEventsContainer.js:55)
in Container (at CardStack.js:436)
in RCTView (at View.js:71)
in View (at CardStack.js:365)
in RCTView (at View.js:71)
in View (at CardStack.js:364)
in CardStack (at CardStackTransitioner.js:97)
in RCTView (at View.js:71)
in View (at Transitioner.js:187)
in Transitioner (at CardStackTransitioner.js:49)
in CardStackTransitioner (at StackNavigator.js:60)
in Unknown (at createNavigator.js:52)
in Navigator (at createNavigationContainer.js:216)
in NavigationContainer (at App.js:113)
in RCTView (at View.js:71)
in View (at App.js:111)
in ThemeProvider (at App.js:110)
in Provider (at App.js:109)
in App (at renderApplication.js:35)
in RCTView (at View.js:71)
in View (at AppContainer.js:102)
in _class (at index.js:69)
in RCTView (at View.js:71)
in View (at index.js:68)
in RootSiblingsWrapper (at AppContainer.js:119)
in RCTView (at View.js:71)
in View (at AppContainer.js:122)
in AppContainer (at renderApplication.js:34)
handleException
showDialog$1
logCapturedError
captureError
renderRoot
performWorkOnRoot
performWork
requestWork
scheduleWorkImpl
scheduleWork
enqueueSetState
Component.setState
(anonymous function)
(anonymous function)
__invokeCallback
(anonymous function)
__guardSafe
invokeCallbackAndReturnFlushedQueue
This is my react-native info:
Environment:
OS: macOS High Sierra 10.13.4
Node: 8.11.1
Yarn: 1.6.0
npm: 5.6.0
Watchman: 4.9.0
Xcode: Xcode 9.3 Build version 9E145
Android Studio: 3.0 AI-171.4443003
Packages: (wanted => installed)
react: ^16.2.0 => 16.3.2
react-native: ^0.52.0 => 0.52.0
And this is the component code where I'm using the menu:
`import React from 'react';
import { ListItem, Button } from 'react-native-material-ui';
import Menu, { MenuItem, MenuDivider } from 'react-native-material-menu';
class Todo extends React.PureComponent {
render() {
return (
<ListItem divider
centerElement={{
primaryText: this.props.title,
}}
onPress={() => this.props.toogleComplete(this.props.doc.ref, this.props.complete)}
leftElement={this.props.complete ? 'done' : 'undo'}
rightElement={
<Menu ref={this.setMenuRef}
button={<Button onPress={this.showMenu} icon={'more-vert'} text={''}/>}
>
eliminar
marcar
}
/>
)
}
_menu = null
setMenuRef = ref => {
this._menu = ref
}
showMenu = () => {
this._menu.show()
}
hideMenu = () => {
this._menu.hide()
}
toogleAction = () => {
this.props.toogleComplete(this.props.doc.ref, this.props.complete)
this.hideMenu()
}
deleteAction = () => {
this.props.delete(this.props.doc.ref)
this.hideMenu()
}
}
export default Todo`
Note: I got this error after I upgrade the react-netive-material-menu library to version 0.3.1, but when I use the 0.2.7 version everything works just fine. Is this a bug in the 0.3.1 version ?
Thanks in advance.
Would be nice if some tests can be written for this component
Application works well and a user can see menu
The app crashes with this error:
Error while updating property 'ellipsizeMode' of a view managed by: RCTText
There is a similar issue in the react-native GitHub.
A way to fix is just to update MenuItem.js component and use ellipsizeMode={'clip'} only for iOS platform.
I've created the #37 PR. Please verify and merge it if's OK
I have implemented the menu as you have suggested in the usage section here - https://github.com/mxck/react-native-material-menu and it works fine.
The issue I am facing is regarding the position of the menu opened. I am able to locate the show menu text wherever I want on the screen but the menu always opens in the left top corner. I want it to open in the top right corner.
Please let me know how I can achieve this as I see the same can be done looking at the gif of the demo you have attached for the same?
Hi!
Is it possible to render React components as well as a string in the MenuItem's children property?
When I try, I get an "Unexpected view type nested under text node".
I tried to display the menuitems on header right. But what happened is, it working perfectly on simulators both android and ios.Please refer my Screenshot.
It not fully visible on Android devices.Working on iphones.
(<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', width: 54 }}>
<Menu
ref={navigation.state.params && navigation.state.params.setMenuRef}
button={<Text style={{ fontFamily: IconFont.fontName, color: 'white', fontSize: 24, textAlign: 'center' }} onPress={() => { navigation.state.params.showMenu() }}>{IconFont.IconNames.kFilter}</Text>}
>
<MenuItem textStyle={{ fontSize: 16, color: textColor(0), alignSelf: 'center' }} style={{ padding: 2 }} onPress={() => selectMonth(0)}>All</MenuItem>
<MenuItem textStyle={{ fontSize: 16, color: textColor(1), alignSelf: 'center' }} onPress={() => selectMonth(1)}>Jan</MenuItem>
<MenuItem textStyle={{ fontSize: 16, color: textColor(2), alignSelf: 'center' }} onPress={() => selectMonth(2)}>Feb</MenuItem>
<MenuItem textStyle={{ fontSize: 16, color: textColor(3), alignSelf: 'center' }} onPress={() => selectMonth(3)}>Mar</MenuItem>
<MenuItem textStyle={{ fontSize: 16, color: textColor(4), alignSelf: 'center' }} onPress={() => selectMonth(4)}>Apr</MenuItem>
<MenuItem textStyle={{ fontSize: 16, color: textColor(5), alignSelf: 'center' }} onPress={() => selectMonth(5)}>May</MenuItem>
<MenuItem textStyle={{ fontSize: 16, color: textColor(6), alignSelf: 'center' }} onPress={() => selectMonth(6)}>Jun</MenuItem>
<MenuItem textStyle={{ fontSize: 16, color: textColor(7), alignSelf: 'center' }} onPress={() => selectMonth(7)}>Jul</MenuItem>
<MenuItem textStyle={{ fontSize: 16, color: textColor(8), alignSelf: 'center' }} onPress={() => selectMonth(8)}>Aug</MenuItem>
<MenuItem textStyle={{ fontSize: 16, color: textColor(9), alignSelf: 'center' }} onPress={() => selectMonth(9)}>Sep</MenuItem>
<MenuItem textStyle={{ fontSize: 16, color: textColor(10), alignSelf: 'center' }} onPress={() => selectMonth(10)}>Oct</MenuItem>
<MenuItem textStyle={{ fontSize: 16, color: textColor(11), alignSelf: 'center' }} onPress={() => selectMonth(11)}>Nov</MenuItem>
<MenuItem textStyle={{ fontSize: 16, color: textColor(12), alignSelf: 'center' }} onPress={() => selectMonth(12)}>Dec</MenuItem>
{/* <MenuDivider /> */}
</Menu>
</View>
Hi,
I tried to set my custom select Menu in fullwidth, but the items not seems to rendered correctly because their width is more or less half the main Menu.
In my Menu component, I do this:
...
<Menu
ref={props.selectRef}
style={{flex: 1, width: '100%'}}
...
and MenuItem:
...
<MenuItem style={{width: 100%}}></MenuItem>
...
Is there a way to fix this?
Can you provide a 'fullwidth' props option?
Thanks
Hi,
In your documentation the children property is required, but in your sample code you don't use it.
How can I fix this problem?
Here is my MENU code:
<Menu
style={styles.menu}
ref={this.setMenuRef}
button={
<Button transparent onPress={this.showMenu}>
<Icon ref='ico_menu' type='MaterialIcons' name='menu' style={[styles.icon, { fontWeight: 'bold' }]} />
</Button>
}
>
<MenuItem style={styles.menuItem} textStyle={styles.topMenuText} onPress={this.hideMenu}>
<Icon type='FontAwesome5' name='cog' style={styles.iconItem} /> Settings
</MenuItem>
<MenuItem style={styles.menuItem} textStyle={styles.topMenuText} onPress={this.showAbout}>
<Icon type='FontAwesome5' name='grin-stars' style={styles.iconItem} /> About Us
</MenuItem>
<MenuDivider />
<MenuItem style={styles.menuItem} textStyle={styles.topMenuTextLogout} onPress={this.hideMenu}>
<Icon type='FontAwesome5' name='power-off' style={styles.iconOff} /> Logout
</MenuItem>
</Menu>
I know that there is another issue closed HERE, but there is not solution.
Thank you!
I have a chat component in which I have a right header component (through react navigation) that on click opens a material menu. In the menu I can navigate to a different screen, if I clicked on the text input and opened the keyboard, when I press on the right header component it closes the keyboard, but the moment I click to navigate to the other screen the keyboard comes back and is now stuck, when I type in it I see that it actually types in the text input from the previous (chat) screen.
When the right header component navigated directly to that page without the menu, this would not happend. Any ideas?
I am able to open menu when 3 dots icon is clicked for each item. But can the code be written in a better way..
Right now menu is getting created for each card item in a FlatList but ideally it would have been good to create single Menu View and dynamically associate it to some card where ever the 3 dots is clicked.
I have this problem and I can't seem to be able to fix it:
The menu opens up and doesn't show/scroll all the items. The menu is inside in a scrollview.
The right popup menu is shorter so it shows everything.
Code:
<ScrollView contentContainerStyle={styles.container}>
( . . .)
<Menu
ref={this.setMenuRef}
button={
<View style={{ flexDirection: "row" }}>
<Text style={styles.popupMenuText} onPress={this.showMenu}>
{this.props.title}
</Text>
<FontAwesome
name={"caret-down"}
size={17}
color={colors.primary}
style={{ padding: 0 }}
/>
</View>
}
>
<MenuItem onPress={() => this._onPress(null)}>
{this.props.allTitle}
</MenuItem>
<MenuDivider />
{this.props.options.map((item, index) => (
<MenuItem
key={`popupoption-${index}`}
onPress={() => this._onPress(item)}
>
{item.title}
</MenuItem>
))}
</Menu>
( . . .)
</ScrollView>
Good evening,
I am trying to make the menu always open in the same position, because I am having trouble with it opening over the last item of a loop, instead of on top of the clicked item.
If there is a solution, I'd be pretty grateful.
Thank you!
When the device is in landscape mode and try to show menu what happend is that view changes to portrait mode. (Only tried on iOS device)
Not showing menu in IOS while the onclick event fires..... Sometimes open but a very delayed response in IOS.......... Very diffcult to list the menuItems in IOS... Any suggestions?
Error occurred when running "npm install":
node_modules\react-native-material-menu: Appears to be a git repo or submodule.
Same error mentioned in https://github.com/APSL/react-native-version-number/issues/13 ,
and reason maybe like alexgvozden's
comment.
Example:
_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'}}>
<ScrollView style={{flex: 1}}>
<Menu
ref={this.setMenuRef}
style={{backgroundColor:'#282828'}}
button={<ScrollView><Text onPress={this.showMenu}>Show menu</Text></ScrollView>}
>
<MenuItem style={{alignItems:'center'}} textStyle={{color:'#ffffff'}} onPress={this.hideMenu}>Menu item 1</MenuItem>
<MenuItem style={{alignItems:'center'}} textStyle={{color:'#ffffff'}} onPress={this.hideMenu}>Menu item 2</MenuItem>
<MenuItem style={{alignItems:'center'}} textStyle={{color:'#ffffff'}} onPress={this.hideMenu}>Menu item 3</MenuItem>
<MenuItem style={{alignItems:'center'}} textStyle={{color:'#ffffff'}} onPress={this.hideMenu}>Menu item 4</MenuItem>
<MenuItem style={{alignItems:'center'}} textStyle={{color:'#ffffff'}} onPress={this.hideMenu}>Menu item 1</MenuItem>
<MenuItem style={{alignItems:'center'}} textStyle={{color:'#ffffff'}} onPress={this.hideMenu}>Menu item 2</MenuItem>
<MenuItem style={{alignItems:'center'}} textStyle={{color:'#ffffff'}} onPress={this.hideMenu}>Menu item 4</MenuItem>
<MenuItem style={{alignItems:'center'}} textStyle={{color:'#ffffff'}} onPress={this.hideMenu}>Menu item 1</MenuItem>
<MenuItem style={{alignItems:'center'}} textStyle={{color:'#ffffff'}} onPress={this.hideMenu}>Menu item 2</MenuItem>
<MenuItem style={{alignItems:'center'}} textStyle={{color:'#ffffff'}} onPress={this.hideMenu}>Menu item 3</MenuItem>
<MenuItem style={{alignItems:'center'}} textStyle={{color:'#ffffff'}} onPress={this.hideMenu}>Menu item 1</MenuItem>
<MenuItem style={{alignItems:'center'}} textStyle={{color:'#ffffff'}} onPress={this.hideMenu}>Menu item 2</MenuItem>
<MenuItem style={{alignItems:'center'}} textStyle={{color:'#ffffff'}} onPress={this.hideMenu}>Menu item 3</MenuItem>
</Menu>
</ScrollView>
</View>
);
}
Would it be possible to put it in a ScrollView or something?
How to display menu-items in a horizontal line instead of vertical.
Failed prop type: Invalid prop children
of type object
supplied to MenuItem
, expected string
.
i was try to get item from array but i have this error
code
render {
let citymenu = this.state.city.map((val, key) => {
return <MenuItem key={key} onPress={()=> {this.state.cityselectname=val.name; }}><Text style={{color:'white'}}> {val.name} });
return {
{this.state.cityselectname || "select city"} } > {citymenu}}}
When I try to click on show menu button the error occurs: undefined is not an object (evaluating '_this.menu.current.show')
Code:
`import Menu, { MenuItem, MenuDivider } from 'react-native-material-menu';
export default class Apartments_Advert extends React.Component{
menu = React.createRef();
hideMenu = () => {
this.menu.current.hide();
};
showMenu = () => {
this.menu.current.show();
};
render(){
return(
<Menu
ref={this.menu}
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>
)
}
}
`
Hi,
Please I have dynamic list, how can handle menu for each item of this list
Hi,
I noticed a "little" bug when I open the menu.
The console reports this warning:
"Warning: isMounted(...) is deprecated in plain JavaScript React classes. Instead, make sure to clean up subscriptions and pending requests in componentWillUnmount to prevent memory leaks."
Any idea about this warning?
Thank you
Is it possible to control the round-ness/pointy-ness of the arrow on iOS? And non-blur but opaqueness Like iOS 7 design has:
http://iosguides.net/icloud-website-updated-ios-7-design-style/
I have an app that runs in full screen all the time, but when a react-native-material-menu is opened, the status bar appears at the top. Can this be prevented?
Want to reduce space between successive menu items.
npm WARN [email protected] requires a peer of react@>= 16.3.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of react-native@>= 0.54.0 but none is installed. You must install peer dependencies yourself.
I didn't find props for increasing size in Documentation.
on react-native-web it crashes giving me this error.
Uncaught TypeError: _TouchableNativeFeedback.default.SelectableBackground is not a function
Hi there,
I am using this on android currently to try to acheive the native PopupMenu. This is a screenshot of native PopupMenu:
And this is how it looks when I use react-native-material-menu out of the box on Android:
We see on touch, there is no ripple. We need to use <TouchableNativeFeedback>
I think.
We also see that the item on press is not flush against the top. There seems to be a gap.
Is there a way to fix this on my side, or do we need to edit the lib?
Other minor issues that I can fix with style prop, but would be ideal if it matched native android:
It would be so awesome if this looked perfect like the native PopupMenu on Android out of the box (hence the name of the lib :) )
Ideally I tried to find a native lib for Android PopupMenu in react-native but I can't. :( And I'm not experience with native ui modules yet in RN :(
Hello
Right now there is a problem when showing an alert in the onClick of a MenuItem. This would look to be related to facebook/react-native#10471 and is only for iOS. The long shot is that if an alert is opened while a modal is closing, the alert disappears and the app ui locks up. This persists until the app is closed, so from a user perspective, it is basically a crash.
Seeing as it's a bug in RN, it should be up to them to fix it, but seeing as the issue has been untouched by them for almost 2 years I'm not sure that can be relied upon.
Based on the discussion in the linked issue, it would appear that this is best resolved through the use of the onDismiss() callback from Modal, however that is iOS only. I wasn't really sure the best way to resolve this in the way this library works, seeing as the fix requires the use of a platform specific feature, which is what keeps me from submitting a PR, but in the meantime I am just getting around it through liberal application of setTimeout, however this makes things feel a tad laggy.
I'm not sure the library authored would prefer this to be resolved. If you don't want to put platform specific workaround code in the library (understandable), then it might be best to just expose onDismiss directly on the Menu component? That way users can make use of it external to your library.
I'm happy to throw together a PR when I have the time, but just want to be sure which method the authors would prefer first.
I have a screen that on top it, it has material menu and on the bottom of it, it has google maps from react-native-maps. In this screen when I press the compass mode on google maps, the menu opens.
Hi guys,
Thanks for a cool menu.
Would you consider allowing passing of testID props to the Menu and MenuItem. This is useful for E2E testing with Detox.
I realise this might be an edge use case and am happy to submit a PR.
Cheers,
Shaun
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.