handle menu in dynamic List.

[wilfriednhw]

Hi,

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

[mxck]

@wilfriednhw hello! Right now you can create menus for each item, but this is not optimized. In the future, I will rework this library by using react context.

[wilfriednhw]

Thank you for your answer, I have another problem.

for example, I have 6 elements, when I click on the first element, the menu is triggered on the sixth element.

What to do please

[wilfriednhw]

HI @mxck

I found a solution to handle this problem. This could help others.

here is my code

//===================For dropdown menu=============================//

_menu = [ ];

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

showMenu = (item) => {
    this._menu[item].show();
};

displayDropdown = (item) => {
    return (
        <Menu
            //  ref={this.setMenuRef}
            ref={(menu) => { this._menu[item] = menu }}
            button={<Icon2 name="dots-three-vertical"
                size={25}
                color="#572E82"
                onPress={() => this.showMenu(item)}
            />}
        >
            <MenuItem onPress={() => this.hideMenu(item)}>{item}</MenuItem>
        </Menu>
    )
}

//===================End dropdown menu=============================//

Inside render method

render() {
    let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13];
    return (
        <ScrollView style={styles.listModuleContainer}>
            {
                array.map(
                    item =>
                        <View key={item} style={styles.moduleContainer} >
                            <View style={styles.infosModule}>
                                <Text style={[styles.infos, styles.infosSerial]}>CE4WRTRYTY - {item} </Text>
                                <Text style={styles.infos}>695203140</Text>
                                <Text style={styles.infos}>31-07-2017</Text>
                            </View>
                            <View style={styles.triggerDropdown}>
                                {this.displayDropdown(item)}  //display dropdown
                            </View>
                        </View>
                )
            }
        </ScrollView>

    )
}

[jeffelector]

HI @mxck

I found a solution to handle this problem. This could help others.

here is my code

//===================For dropdown menu=============================//

_menu = [ ];

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

showMenu = (item) => {
    this._menu[item].show();
};

displayDropdown = (item) => {
    return (
        <Menu
            //  ref={this.setMenuRef}
            ref={(menu) => { this._menu[item] = menu }}
            button={<Icon2 name="dots-three-vertical"
                size={25}
                color="#572E82"
                onPress={() => this.showMenu(item)}
            />}
        >
            <MenuItem onPress={() => this.hideMenu(item)}>{item}</MenuItem>
        </Menu>
    )
}

//===================End dropdown menu=============================//

Inside render method

render() {
    let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13];
    return (
        <ScrollView style={styles.listModuleContainer}>
            {
                array.map(
                    item =>
                        <View key={item} style={styles.moduleContainer} >
                            <View style={styles.infosModule}>
                                <Text style={[styles.infos, styles.infosSerial]}>CE4WRTRYTY - {item} </Text>
                                <Text style={styles.infos}>695203140</Text>
                                <Text style={styles.infos}>31-07-2017</Text>
                            </View>
                            <View style={styles.triggerDropdown}>
                                {this.displayDropdown(item)}  //display dropdown
                            </View>
                        </View>
                )
            }
        </ScrollView>

    )
}

you saved my day ! thanks!

[johnjoshuadablo]

HI @mxck

I found a solution to handle this problem. This could help others.

here is my code

//===================For dropdown menu=============================//

_menu = [ ];

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

showMenu = (item) => {
    this._menu[item].show();
};

displayDropdown = (item) => {
    return (
        <Menu
            //  ref={this.setMenuRef}
            ref={(menu) => { this._menu[item] = menu }}
            button={<Icon2 name="dots-three-vertical"
                size={25}
                color="#572E82"
                onPress={() => this.showMenu(item)}
            />}
        >
            <MenuItem onPress={() => this.hideMenu(item)}>{item}</MenuItem>
        </Menu>
    )
}

//===================End dropdown menu=============================//

Inside render method

render() {
    let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13];
    return (
        <ScrollView style={styles.listModuleContainer}>
            {
                array.map(
                    item =>
                        <View key={item} style={styles.moduleContainer} >
                            <View style={styles.infosModule}>
                                <Text style={[styles.infos, styles.infosSerial]}>CE4WRTRYTY - {item} </Text>
                                <Text style={styles.infos}>695203140</Text>
                                <Text style={styles.infos}>31-07-2017</Text>
                            </View>
                            <View style={styles.triggerDropdown}>
                                {this.displayDropdown(item)}  //display dropdown
                            </View>
                        </View>
                )
            }
        </ScrollView>

    )
}

Does not work for me :(

[r-mhjn]

@wilfriednhw i tried using ur solution but the problem of menu being displayed on the last item of flatlist is still there

[arunkrishnang86]

Same issue persisting for me . Did anyone found a solution for this ?

[kabitacode]

in flatlist ( renderItem I added items and index)

showMenu = (item, index) => {
        this._menu[index].show()
    };

<Menu
  ref={(menu) => {this._menu[index] = menu}}
  button={<Text onPress={()=>this.showMenu(item, index)}>Show menu</Text>}>
  <MenuItem onPress={this.hideMenu}>Menu item 1</MenuItem>
  </Menu>

Solved for me :) thank's @jeffelector

[Saad-Bashar]

I am having a problem implementing this ref with useRef. Can anyone guide me? @kabitacode ?

[gauravsbagul]

@Saad-Bashar same here

[varunSuccessive]

showMenu = (item, index) => {
this._menu[index].show()
};

{this._menu[index] = menu}} button={this.showMenu(item, index)}>Show menu}> Menu item 1

Solution worked for me:) thanks alots.

[mohdadnaanazam]

@Saad-Bashar same here

1. Create a variable inside your component let _menu : any = []
2. Inside your renderItem method and in Menu component pass this ref={(ref)=> _menu[index] = ref }
3. Open your Menu by calling _menu[index]?.show();