AnR
AnR

Reputation: 2225

How to call Popup menu from FlatList using react-native-popup-menu

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>
    );
  }

Upvotes: 0

Views: 1774

Answers (0)

Related Questions