nandorojo / zeego

Menus for React (Native) done right.
https://zeego.dev
MIT License
1.42k stars 41 forks source link

Android content not respecting right margin when trigger is right aligned #43

Closed Estevete closed 1 year ago

Estevete commented 1 year ago

When aligning the trigger to the right, the content gets opened without leaving a margin right on Android.

Code:

    <View style={{ position: "absolute", right: 0 }}>
      <DropdownMenuRoot>
        <DropdownMenuTrigger>
            <FontAwesomeIcon
              icon={faEllipsisVertical}
              color={colors.primary}
              style={{
                marginRight: 10
              }}
              size={iconSizes.xl} />
        </DropdownMenuTrigger>

        <DropdownMenuContent>
          <DropdownMenu.Sub>
            <DropdownMenu.SubTrigger
              key="language"
              textValue="Language">
            </DropdownMenu.SubTrigger>

            <DropdownMenu.SubContent>
               ....
            </DropdownMenu.SubContent>
          </DropdownMenu.Sub>

          <DropdownMenuItem
            key="help"
            textValue="Help">
          </DropdownMenuItem>
        </DropdownMenuContent>
      </DropdownMenuRoot>
    </View>

Current behavior On the image, the content has no "native" margin right. On iOS, it does. image

Expected behavior Other native apps (like contacts) do have margin right when trigger is right aligned image

** If it is left aligned, it has left margin.

nandorojo commented 1 year ago

can you see if react native menu has support for a solution? that’s what we use under the hood for android

nandorojo commented 1 year ago

also, wait, is your trigger using margin or padding on the right side? i think it’s a problem with your code. the second screenshot aligns itself to the right of the search input, whereas your button might touch the right end of the screen.

Estevete commented 1 year ago

I already have a margin. Eventhough I increse it to have like 100 marginRight, it's still sticked on the right side on Android.

Android:

image

iOS: image

It only leaves the margin when the trigger is almost centered: image