Reputation: 2225
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>
);
}
}
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