0
231
Viewshow to add a disappearing pop up menu to a flatlist in react native
I am a bit new to react native.
I'm trying to open a pop-up menu from a flat list
so if the user clicks on something like three dots at a corner of each list item a pop up appears with clickable options similar to the below images
Image 1- Initial state, before clicking the three dots on the right of each flatList item
Image 2- final state, afterclicking the three dots on the right of each flatList item
Please advise me on how I can achieve this in react native
Thanks
·
Juan Pablo Isaza
1 answers
Answer question0
I suggest you use react-native-material-menu.
Example code:
import React from 'react';
import React, { useState } from 'react';
import { View, Text } from 'react-native';
import { Menu, MenuItem, MenuDivider } from 'react-native-material-menu';
export default function App() {
const [visible, setVisible] = useState(false);
const hideMenu = () => setVisible(false);
const showMenu = () => setVisible(true);
return (
<View style={{ height: '100%', alignItems: 'center', justifyContent: 'center' }}>
<Menu
visible={visible}
anchor={<Text onPress={showMenu}>Show menu</Text>}
onRequestClose={hideMenu}
>
<MenuItem onPress={hideMenu}>Menu item 1</MenuItem>
<MenuItem onPress={hideMenu}>Menu item 2</MenuItem>
<MenuItem disabled>Disabled item</MenuItem>
<MenuDivider />
<MenuItem onPress={hideMenu}>Menu item 4</MenuItem>
</Menu>
</View>
);
}
·
Juan Pablo Isaza
Report
Answer question