mxck / react-native-material-menu Goto Github PK

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

I have a dynamic List. I want to open menu on button click in each list item. How to do that?

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

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?

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}

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?

Would be nice if some tests can be written for this component

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.

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.

Expo Source Code Link

Want to reduce space between successive menu items.

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)

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!

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

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

Error

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

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

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; 

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:

• Font size of menu item
• Font color of menu item
• Too much (by like 4dpi) horizontal margin on menu item's
• Elevation shadow, but i see issue for this already - #10

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 :(

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,

Please I have dynamic list, how can handle menu for each item of this list

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>

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?

like <Search screenProps={{ uid:this.props.screenProps.uid}} /> could not able to go to Search .js

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

Hi!

Is it possible to render React components as well as a string in the MenuItem's children property?

Like this: https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F0B54x0KDcs5U-NC1tYmRKQWIzdDA%2Fbehavior-icon.png

When I try, I get an "Unexpected view type nested under text node".

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

This is my normal menu

But if I open when menu button is below, the menu goes out of the view

I have seen in preview that the menu can be anchored. Does it happens automatically? or we have to do it manually? If we have to do it manually there is nothing mentioned in the DOCS.

Thank you

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

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?

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>

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.

Environment:

• OS: macOS High Sierra 10.13.1
• Node: 8.11.1
• Yarn: 1.6.0
• npm: 6.1.0
• Watchman: 4.9.0
• Android Studio: 3.1.3

Packages:

• react: 16.3.1
• react-native: 0.55.2

Steps to Reproduce

1. Create android react-native app
2. Copy Usage example to your code
3. Run app

Expected Behavior

Application works well and a user can see menu

Actual Behavior

The app crashes with this error:
Error while updating property 'ellipsizeMode' of a view managed by: RCTText

Root cause

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.

Fix

I've created the #37 PR. Please verify and merge it if's OK

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.

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!

on react-native-web it crashes giving me this error.
Uncaught TypeError: _TouchableNativeFeedback.default.SelectableBackground is not a function

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

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?

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.

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 {

}}

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/

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!

How to display menu-items in a horizontal line instead of vertical.

I didn't find props for increasing size in Documentation.

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.

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/

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>
)
 }

}
`