CODEWITHSUNDEEP
reactjsreact-native
Akshay I
Akshay I

Reputation: 4175

How to set Dynamically react-native-material-menu in Flatlist

I'll try to set menu in flatlist component in dynamically, but the problem is that it just opening only last list item menu. how I will be an open sperate menu for each list item. my screen look like this.

<FlatList
    data= {this.state.DataList}
    extraData={ this.state }
    renderItem={({item}) =>
        <Card>
            <TouchableOpacity activeOpacity={1} onPress={() => this.props.navigation.navigate('Comment', {id:item.id})}>

                <Image source={{uri: item.image}} style={{height: 200, width: '100%', position:'absolute'}}/>
                <Menu ref={this.setMenuRef} button={<Text onPress={() => this.showMenu(item.id)}>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>

            </TouchableOpacity>
        </Card>}
/>

and menu declaration is 

import Menu, { MenuItem, MenuDivider } from 'react-native-material-menu';
_menu = null;

setMenuRef = ref => {
    this._menu = ref;
};

hideMenu = () => {
    this._menu.hide();
};

showMenu = (id) => {
    console.log(id);
    this._menu.show();
};

Upvotes: 0

Views: 1942

Answers (1)

Garry Priambudi
Garry Priambudi

Reputation: 31

You can use this way

<Menu
    ref={ref => (this[`menu${index}`] = ref)}
    button={
       <Text>Show Menu</Text>
    }
>
    <MenuItem onPress={() => this[`menu${index}`].hide()}>
       Menu 1
    </MenuItem>
    <MenuDivider />
    <MenuItem onPress={() => this[`menu${index}`].hide()}>
       Menu 2
    </MenuItem>
</Menu>

Upvotes: 2

Related Questions