Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Native-Base 3: Onpress for MenuItem

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>
like image 993
branperr Avatar asked Oct 26 '25 12:10

branperr


1 Answers

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>
like image 178
Fahad Ali Qureshi Avatar answered Oct 28 '25 00:10

Fahad Ali Qureshi



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!