title: Better solution to open the Menu when 3 dots are clicked in React Native
body: <p>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..</p>
  
  <p>Right now menu is getting created for each card item but ideally it would have been good to create single <strong>Menu View</strong> and dynamically associate it to some card where ever the <strong>3 dots</strong> is clicked.</p>
  
  <p><a href="https://snack.expo.io/@sharathm/menu" rel="nofollow noreferrer">Expo Source Code Link</a></p>
  
  <p><strong>Code</strong></p>
  
  <pre><code>export default class App extends React.Component {
  
    constructor(props, ctx) {
      super(props, ctx);
      this.state = {
        list: [
          { name: "Michael", mobile: "9292929292", ref: React.createRef() },
          { name: "Mason Laon Roah", mobile: "1232313233", ref: React.createRef() },
          { name: "Constructor", mobile: "4949494949", ref: React.createRef() },
          { name: "Rosling", mobile: "4874124584", ref: React.createRef() }
        ],
      };
    }
  
    _menu = null;
  
    hideMenu = () =&gt; {
      this._menu.hide();
    };
  
    showMenu = (ref) =&gt; {
      this._menu = ref;
      this._menu.show();
    };
  
    render() {
      const renderItem = ({ item, index }) =&gt; (
        &lt;ListItem
            title={
              &lt;View&gt;
                &lt;Text style={{ fontWeight: "bold" }}&gt;{item.name}&lt;/Text&gt;
                &lt;Text&gt;{item.mobile}&lt;/Text&gt;
              &lt;/View&gt;
            }
            subtitle={
              &lt;View&gt;
                &lt;Text&gt;445 Mount Eden Road, Mount Eden, Auckland. &lt;/Text&gt;
                &lt;Text&gt;Contact No: 134695584&lt;/Text&gt;
              &lt;/View&gt;
            }
            leftAvatar={{ title: 'MD' }}
            rightContentContainerStyle={{ alignSelf: 'flex-start'}}
            rightTitle={this.getMenuView(item.ref)}
          /&gt;
      );
  
      return (
        &lt;View style={styles.container}&gt;
          &lt;View style={{ flex: 1, marginTop: 30 }}&gt;
            &lt;FlatList
              showsVerticalScrollIndicator={false}
              keyExtractor={(item, index) =&gt; index.toString()}
              data={this.state.list || null}
              renderItem={renderItem}
              ItemSeparatorComponent={() =&gt; (
                &lt;View style={{ marginBottom: 5 }} /&gt;
              )}
            /&gt;
          &lt;/View&gt;
        &lt;/View&gt;     
      );
    }
  
    getMenuView(ref) {
      return (
        &lt;Menu
            ref={ref}
            button={&lt;Icon onPress={() =&gt; this.showMenu(ref.current)} type="material" color="red" name="more-vert" /&gt;}
          &gt;
            &lt;MenuItem onPress={this.hideMenu}&gt;Menu item 1&lt;/MenuItem&gt;
            &lt;MenuItem onPress={this.hideMenu}&gt;Menu item 2&lt;/MenuItem&gt;
            &lt;MenuItem onPress={this.hideMenu} disabled&gt;
              Menu item 3
            &lt;/MenuItem&gt;
            &lt;MenuDivider /&gt;
            &lt;MenuItem onPress={this.hideMenu}&gt;Menu item 4&lt;/MenuItem&gt;
        &lt;/Menu&gt;
      );
    }
  }
  
  const styles = StyleSheet.create({
    container: {
      flex: 1,
      justifyContent: 'center',
      backgroundColor: '#ecf0f1',
      padding: 8,
    },
  });
  </code></pre>
  
  <p><strong>Sample Output</strong></p>
  
  <p><a href="https://i.stack.imgur.com/NFx86.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/NFx86.jpg" alt=""></a></p>