[iOS] Dropdown menu items ordered incorrectly.

[bojandurmic]

Hi there, not sure if I am doing something wrong. Here's my code:

<DropdownMenu.Root>
  <DropdownMenu.Trigger>
    <TouchableOpacity>
      <Ionicons
        name="add-outline"
        color={colors.foreground.primary}
        size={24}
      />
    </TouchableOpacity>
  </DropdownMenu.Trigger>
  <DropdownMenu.Content>
    <DropdownMenu.Item key="files" onSelect={addFiles}>
      <DropdownMenu.ItemTitle>Add files</DropdownMenu.ItemTitle>
    </DropdownMenu.Item>
    <DropdownMenu.Item key="photos" onSelect={addPhotos}>
      <DropdownMenu.ItemTitle>
        Add photos and videos
      </DropdownMenu.ItemTitle>
    </DropdownMenu.Item>
  </DropdownMenu.Content>
</DropdownMenu.Root>

However, this is the result:

Any idea why this is happening and how can I prevent it?

Versions:

"zeego": "^1.10.0".
"react-native-ios-context-menu": "^2.5.1",
"react-native-ios-utilities": "^4.4.4",

[jstheoriginal]

The way context menus works (at least on iOS) is they always render from first to last away from the button that triggers them. so if the menu goes above, the first item is the closes to the + button. If the context menu were rendered under, it would be as you expect. Long press on home screen icons in different spots to see what I mean.

So if you always have the + button down there, just reverse the order and you should get it as you expect.

[bojandurmic]

Oooooh. That makes sense. Thanks @jstheoriginal for the explanation. Definitely not something I expected coming from web React background. Closing the issue. :)

[nandorojo]

yeah native will use the order to be “most important action” and place the buttons accordingly