Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve iOS UX - align for consistency with Android #12

Open
fobos531 opened this issue Oct 14, 2023 · 2 comments
Open

Improve iOS UX - align for consistency with Android #12

fobos531 opened this issue Oct 14, 2023 · 2 comments

Comments

@fobos531
Copy link
Contributor

Hello,

I've noticed that when I tap on the Trigger of the tooltip on iOS, the tooltip dismisses, but immediately presents again (since I tapped on the Trigger) - to illustrate what I'm talking about:

CleanShot.2023-10-14.at.13.20.45.mp4

For comparison, on Android, when I do the same on Android, the tooltip is only dismissed, instead of being presented again. See video:

CleanShot.2023-10-14.at.13.25.10.mp4

I find Android's behavior to be much more in-line with what the average user would expect. I compared this behavior with the upstream library used for iOS which is Popovers. The author has a reference app called "Find" (getfind.app) where they're utilizing Popovers in various places. The behavior there is exactly like on Android, i.e. tapping on the Trigger only dismisses the tooltip, instead of re-presenting them.

I suspect the "culprit" of this behavior lies somewhere in this method:

  override func didUpdateReactSubviews() {
    let firstView = self.reactSubviews()[0] as! RCTView
    contentView = firstView
    for index in 1..<self.reactSubviews().count {
      let subView = self.reactSubviews()[index]
      self.addSubview(subView)
    }
  }

Can this be aligned so that the iOS behavior is the same as Android?

For reference, this is the code from my videos

<Tooltip.Root
            {...Platform.select({
              default: {
                open,
                onDismiss: () => {
                  setOpen(false);
                },
              },
            })}>
            <Tooltip.Trigger>
              <Pressable
                {...Platform.select({
                  default: {
                    onPress: () => {
                      if (!open) {
                        setOpen(!open);
                      }
                    },
                  },
                })}>
                <Text weight="medium">Test tooltip text</Text>
              </Pressable>
            </Tooltip.Trigger>
            <Tooltip.Content
              containerStyle={{
                paddingLeft: 10,
                paddingRight: 10,
                paddingTop: 8,
                paddingBottom: 8,
              }}
              onTap={() => {
                setOpen(false);
              }}
              dismissDuration={300}
              disableTapToDismiss
              side="top"
              presetAnimation="fadeIn"
              backgroundColor={theme.colors.text}
              borderRadius={12}>
              <Tooltip.Text text="Test" style={{ color: theme.colors.mainBackground, fontSize: 16 }} />
            </Tooltip.Content>
          </Tooltip.Root>
@alantoa
Copy link
Owner

alantoa commented Nov 16, 2023

@fobos531 Hey, unfortunately, this is the default behavior of Popover. You can see here that some hack work needs to be done to make it work properly.

@CodyPredy
Copy link

Considering Popover hasn't been maintained in a while is there a plan to replace it with something else?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants