Native-Base 3: Onpress for MenuItem

user_12847465 0
Viewed 491

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>
native-base react-native javascript
2 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>
user_100420550

I am using native-base 3 to develop react native too.

It seems there is no official APIs for handling select kind of event there for <Menu.Item />.

My work around is render the Menu.Item by .map() and add onPress handling to the text inside <Menu.Item />:

        const menuItems = ['Profile', ..., 'Sign Out'];
        const handMenuItemSelect = (menuItem) => {...};
    
        ...
    
        return (
          ...
            {menuItems.map(menuItem => {
                return <Menu.Item>
                       <Text onPress={(menuItem) => handMenuSelect(menuItem)}
                           {menuItem}
                       </Text>
                    </Menu.Item>
                    }}
          ...
        )

, where is also from native-base.

user_131638750
Related