0

I was looking for an option to call Popup menu from FlatList using react-native-popup-menu. Most the examples and github references are perhaps based on assumption that you are only displaying the popup menu on your App screen and nothing else.

After visiting dozen of pages I got some clues from this page: https://github.com/instea/react-native-popup-menu/blob/master/examples/MenuMethodsExample.js

and came up with below solution. If someone can improve that, it would be good. Otherwise I am posting this with the idea that others like me might find this to be useful.

Here is an extract of the relevant code:

class App extends React.Component {
    componentWillUnmount = () => {
      sound.release();
    };
    render() {
    return (
      <MenuProvider>
        <AppContainer />
      </MenuProvider>
    );
  }
}

// JS file

import Menu, { MenuProvider, MenuOptions, MenuOption, MenuTrigger } from 'react-native-popup-menu';

  onOptionSelect(Param1, Param3, Param3) {
    this.menu.close();
    Toast.show(` ${value}, ${fileName}, ${fileDesc}`);
    if (value === 1) {
      this.playMyAudioFile(fileName)
    }
    return false;
  }

  onRef = r => {
    this.menu = r;
  }
  playMyAudioFile (fileName ) {

     // Play Audio File Code

  }

  render() {

    return (

      <View style={styles.container}>

        <View style={{flex: 1, flexDirection: 'row'}}>
        <FlatList
              data={audioMenu}
              extraData={this.state}
              ItemSeparatorComponent={Divider}
              renderItem={({item}) =>
              (
                <Menu onSelect={value => this.onOptionSelect(value, item.AudioFile, item.Desc)}
                ref={this.onRef}>
                <MenuTrigger style={styles.menuItemsLP} text={item.Desc)}/>
                <MenuOptions>
                  <MenuOption value={1} text='Play' />
                  <MenuOption value={2} text='Download' />
                  <MenuOption value={3} text='Download Externally' />
                </MenuOptions>
                </Menu>       

              )}
              keyExtractor={(item, index) => index.toString()}
            />
        </View>
      </View>
    );
  }
AnR
  • 1,809
  • 3
  • 26
  • 45
  • what is wrong with https://github.com/instea/react-native-popup-menu/blob/master/examples/InFlatListExample.js ? – sodik Apr 21 '19 at 11:31
  • The problem is that you will render one popup with every flatlist item , that can cause performance problems. – RegularGuy Apr 21 '19 at 16:46
  • If you are using RN 0.59+ you could use a library like reactn, to manage the coordinates, the menu items , and more, since it uses react hooks to have a global state. That way you could only have one popup menu and it will change it's content and position on a button press. – RegularGuy Apr 21 '19 at 16:48
  • @ValdaXD. Thanks. Can you please post an example for the above code, as I haven't used reactn. I am very new to react-native doing my first project. Thanks again. – AnR Apr 22 '19 at 05:34
  • OP also renders more popup menus. And if you want to have multiple triggers (one per item), I don't think it is way around. – sodik Apr 25 '19 at 14:15
  • @sodik I actually have a long list of Audios (a few hundred) and on each Audio Click I need to display a standard menu allowing the user to perform Play, Download, and other activities relating to that particular audio. – AnR Apr 26 '19 at 15:18
  • well, `react-native-popup-menu` works that way, that you have one menu for one menu trigger. Question is why do you thing it is a problem? Performance wise I had a problems with big lists with or without menus inside. But proper `shouldComponentUpdate` on list item level helped. – sodik Apr 29 '19 at 18:20
  • @sodik No I don't see this to be a problem. I was sharing my solution to the issue for others' benefit and ValdaXD mentioned that it will give me performance issues and should consider reactn – AnR Apr 30 '19 at 04:52
  • @AnR Did you find the solution for this .If yes can you please share the code for that .It will be very helpful for us .! Thanks in Advance – Kartik Shah Oct 08 '20 at 14:53

0 Answers0