Swap Positions when pressed below mid screen

[tavaresluis00]

It works fine if I remove the ContextMenu.Preview, the problem is that in certain parts of the screen the Content swaps positions, so my reactions stay on correct place, but the group goes above the reactions

[tavaresluis00]

@nandorojo if you could give quick help here

[nandorojo]

Hey can you please format this code better? I can't see it at all

[nandorojo]

Also please explain clearly what you expect vs what actually happens

[tavaresluis00]

I expect the reactions to always show above the message and the menu with the reply etc below the message,

but when I press them and they are lower in the view they get on top of each other like on the screenshot

<ContextMenu.Content>
              <ContextMenu.Auxiliary
                alignmentHorizontal={isSent ? 'previewTrailing' : 'previewLeading'}
                anchorPosition="top"
                height={60}
                transitionConfigEntrance={{
                  transition: 'fade',
                }}
                transitionEntranceDelay={0.2}
              >
                {(menu) => (
                  <YStack
                    ai="center"
                    backgroundColor="#f2f2f2"
                    borderRadius="$3"
                    justifyContent="center"
                    padding="$2"
                    shadowColor="$black0"
                    shadowOffset={{ width: 0, height: 2 }}
                    shadowOpacity={0.2}
                    shadowRadius="$2"
                  >
                    <XStack backgroundColor="#f2f2f2">
                      {reactionOptions.map((reaction) => (
                        <Button
                          key={reaction}
                          unstyled
                          backgroundColor="transparent"
                          padding="$2"
                          size="$3"
                          onPress={() => {
                            handleReaction(reaction)
                            // 2) Then queue the state update immediately (or next frame)
                            requestAnimationFrame(() => {
                              menu.dismissMenu()
                            })
                          }}
                        >
                          {reaction}
                        </Button>
                      ))}
                      <Button
                        key="7"
                        unstyled
                        backgroundColor="transparent"
                        padding="$2"
                        size="$3"
                        onPress={() => {
                          menu.dismissMenu()
                        }}
                      >
                        +
                      </Button>
                    </XStack>
                  </YStack>
                )}
              </ContextMenu.Auxiliary>
                <ContextMenu.Item
                  key="pin"
                  onSelect={() => {
                    onPin?.({ id: message.id, isPinned })
                  }}
                >
                  <ContextMenu.ItemTitle>{isPinned ? 'Unpin' : 'Pin'}</ContextMenu.ItemTitle>
                  <ContextMenu.ItemIcon
                    androidIconName={isPinned ? 'pin-off' : 'pin'}
                    iosIconName={isPinned ? 'pin.slash.fill' : 'pin.fill'}
                  />
                </ContextMenu.Item>
                <ContextMenu.Item key="star" onSelect={handleStar}>
                  <ContextMenu.ItemTitle>{isStarred ? 'Unstar' : 'Star'}</ContextMenu.ItemTitle>
                  <ContextMenu.ItemIcon androidIconName="star" iosIconName="star.fill" />
                </ContextMenu.Item>
                <ContextMenu.Item
                  key="reply"
                  onSelect={() => {
                    onReply?.(message)
                  }}
                >
                  <ContextMenu.ItemTitle>Reply</ContextMenu.ItemTitle>
                  <ContextMenu.ItemIcon
                    androidIconName="reply"
                    iosIconName="arrowshape.turn.up.left"
                  />
                </ContextMenu.Item>
                <ContextMenu.Item
                  key="Copy"
                  onSelect={async () => {
                    await Clipboard.setStringAsync(message.content)
                    toast.show('Copied to Clipboard!')
                  }}
                >
                  <ContextMenu.ItemTitle>Copy</ContextMenu.ItemTitle>
                  <ContextMenu.ItemIcon androidIconName="content-copy" iosIconName="doc.on.doc" />
                </ContextMenu.Item>
                {isSent && (
                  <ContextMenu.Item key="Delete" onSelect={handleDelete}>
                    <ContextMenu.ItemTitle>Delete</ContextMenu.ItemTitle>
                    <ContextMenu.ItemIcon androidIconName="delete" iosIconName="trash" />
                  </ContextMenu.Item>
                )}
                {isSent && (
                  <ContextMenu.Item
                    key="Edit"
                    onSelect={() => {
                      handleEdit(message.content)
                    }}
                  >
                    <ContextMenu.ItemTitle>Edit</ContextMenu.ItemTitle>
                    <ContextMenu.ItemIcon androidIconName="edit" iosIconName="pencil" />
                  </ContextMenu.Item>
                )}
                <ContextMenu.Item key="Info">
                  <ContextMenu.ItemTitle>Info</ContextMenu.ItemTitle>
                  <ContextMenu.ItemIcon androidIconName="info-outline" iosIconName="info.circle" />
                </ContextMenu.Item>
            </ContextMenu.Content>
          </ContextMenu.Root>

[tavaresluis00]

and should be like this always

[nandorojo]

What if you try these props? (You’ll need to rename some)

verticalAnchorPosition: 'automatic',
            horizontalAlignment: isMe ? 'targetTrailing' : 'targetLeading',
            marginVerticalInner: 10,
            anchorPosition: 'automatic',
            transitionConfigEntrance: {
              mode: 'syncedToMenuEntranceTransition',
              shouldAnimateSize: true,
            },
            transitionExitPreset: {
              mode: 'zoomAndSlide',
              zoomOffset: 0.8,
              slideOffset: -20,
            },

[tavaresluis00]

If I change to automatic they still swap positions but dont overlap

The reaction just stays below the message and vice-versa

[tavaresluis00]

And hw wont even run If I put some of the props you gave me

[tavaresluis00]

@nandorojo

[nandorojo]

Hey please don't frequently tag here, keep in mind it's open source

[nandorojo]

Okay so I think the issue here is that iOS automatically does this for you. I don't think there's a way around it actually...

[nandorojo]

I wonder if there is an example of what you want working on the upstream react-native-ios-context-menu library...