React-native Why Menu is not rendering - react-hooks

Question

i have a menu for each item of a flatlist, however when ever i press on the button to show the menu nothing happens when i log the visible state of the menu i see that it is being set to true but it is not rendering.
this is a component to render each item with a menu
const RenderItem =(props)=>{
return(
<TouchableOpacity onPress={()=>{}}>
<View style={styles.flatitem}>
<Icon style={styles.pdf} name="file-pdf-o" color="#666"/>
<Text style={styles.itemtext}>{props.title}</Text>
<Menu
visible={visible}
{...console.log(visible)}
anchor={<Button onPress={openMenu} >
show
</Button>}
onDismiss={closeMenu} >
<Menu.Item icon="pencil-box-outline" onPress={() =>{}} title="Rename" />
<Menu.Item icon="label-outline" onPress={() => {}} title="Label" />
<Menu.Item icon="delete-outline" onPress={() => {}} title="Delete" />
</Menu>
</View>
</TouchableOpacity> )}
this is the flatlist:
<FlatList style={styles.flatstyle}
keyExtractor={(item)=>item['id']}
data={DATA}
renderItem={({item})=>(<RenderItem title={item.title }/>)}
/>
and these are the open and close functions
const [visible,setVisible]=useState(false)
const openMenu = () => {
setVisible(true)
}
const closeMenu = () => setVisible(false);

Answer 1

If i am right, it is actually not a problem. FlatList is a pure component and will only re-render if the data prop changes i.e, the data passed to the flatlist changes.
As visible is not in data, so it doesnot re-render.
To make it re-render and show the menu, you need to use extraData prop of the flatlist, which will take some other data. If that other data changes, that will also cause a re-render and that other data in your case is the visible variable.
More details here