So I'm making an app with React-Native and Native-Base 3. However, I can't seem to figure out how to make a onPress for a menu item. I can successfully render it just fine, but I can't seem to find an example in the docs or elsewhere that actually does something when you press it. Any workarounds? Example of my code below
<Box style={styles.topNavItems}>
<Menu
trigger={(triggerProps) => {
return <Pressable><IconButton {...triggerProps} icon={<Icon name={'account-circle-outline'} size={30}/>} /></Pressable>
}}>
<Menu.Item>Profile</Menu.Item> //pressing this should invoke a function
<Menu.Item>Account</Menu.Item>
<Menu.Item>Settings</Menu.Item>
<Menu.Item>Tutorials</Menu.Item>
<Menu.Item>Help</Menu.Item>
<Menu.Item>Sign Out</Menu.Item>
</Menu>
You can simply add onPress within Menu.Item itself.
You can do like below:
<Menu
trigger={triggerProps => {
return (
<Pressable {...triggerProps}>
<ThreeDotsIcon size={30} />
</Pressable>
);
}}>
<Menu.Item
onPress={() => {
alert('Profile pressed');
}}>
Profile
</Menu.Item>
<Menu.Item
onPress={() => {
alert('Account pressed');
}}>
Account
</Menu.Item>
<Menu.Item
onPress={() => {
alert('Settings pressed');
}}>
Settings
</Menu.Item>
<Menu.Item
onPress={() => {
alert('Tutorials pressed');
}}>
Tutorials
</Menu.Item>
<Menu.Item
onPress={() => {
alert('Help pressed');
}}>
Help
</Menu.Item>
<Menu.Item
onPress={() => {
alert('Sign Out pressed');
}}>
Sign Out
</Menu.Item>
</Menu>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With