Better solution to open the Menu when 3 dots are clicked in React Native

[sharathm89]

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

[ghost]

Hi there,
I am just wondering how you added an image onto the menu button?
I have added Image to the button (rather than Text), although my issue
is that when the image is pressed, the menu does not appear.

button={<Image onPress={this.showMenu} style={styles.iconStyle} source={require('./assets/icons/dotsIcon.png')} > </Image>}

Hoping you may have experienced this and know the answer.

[snelanga]

@joniashton I've used a image like this and it works.

button = { <TouchableOpacity onPress = {this.showMenu}> <Image onPress = {this.showMenu} style = {{ margin: 20 }} resizeMode = 'contain' source = {require('../../assets/images/dot_menu.png')} /> </TouchableOpacity> }

[mxck]

@sharathm89 I will rewrite this library using contexts so soon you can use only one modal overlay for each screen.

[likern]

@sharathm89 You can try out this package - https://www.npmjs.com/package/react-native-enhanced-popup-menu. It initially was based on this react-native-material-menu, but more flexible in terms of customizations.

You can select base component to which you will stick menu. Then, later, at pressing dots for other components, you can compute dynamic offsets (added to base position) - this offset will change menu position to appropriate new component.

const computeOffset = (left, top, width, height) => {
    // left, top - are positions of component to which menu is relative
    // width, height - are sizes of this component
    // do any dynamic computations to offset initial position of menu
    // they will be added to initial menu position
   return { bottom: 30 }
}
const showMenu = () => menuRef.show(textRef.current, stickTo = Position.BOTTOM_CENTER, computeOffset = computeOffset);

[r-mhjn]

@sharathm89 hey could you please share how ur able to get the popup menu alongside each card .. im trying to implement this but the menu is always displayed on the last element of the flat list.....thanks in advance

[ZeeshanAhmadKhalil]

did you tried react-native-popup-menu ?