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

After misrender tooltip keeps flicking on screen #116

Open
ghost opened this issue Apr 2, 2021 · 14 comments · May be fixed by #195
Open

After misrender tooltip keeps flicking on screen #116

ghost opened this issue Apr 2, 2021 · 14 comments · May be fixed by #195

Comments

@ghost
Copy link

ghost commented Apr 2, 2021

I noticed that trying to render a tooltip with bottom placement when it hasn't enough space to be rendered will cause some strange behavior after closing and opening it again. It will start flickering, but only on the very first render after the "misrender".

Screen.Recording.2021-04-02.at.17.13.13.mov

Any idea how to implement a placement auto? I saw that there was a feature like that but IDK why it was removed.

@Manya-96
Copy link

Manya-96 commented Jun 4, 2021

I am also facing the same issue. Are you able to solve it @emilioheinz

@ghost
Copy link
Author

ghost commented Jun 12, 2021

@Manya-96 No I wasn't 😕

@Manya-96
Copy link

Any other solution you tried for this issue? @emilioheinz

@jzxchiang1
Copy link

Bump. I also see flickering on Android (but not iOS).

@tamir61
Copy link

tamir61 commented Oct 7, 2021

I also have the same issue, any solution? @jasongaare

@Ashutosh-Tiwari
Copy link

Even after upgrading the plugin to the latest version i.e. 1.3.0, the issue still remains. Sadly, I am now looking for an alternative to this plugin.

@gregfenton
Copy link

Does anyone have a simple project that reproduces this issues reliably? Something where we could simply:

  1. clone project
  2. npm install
  3. npm start

and see the issue? If so, then we might as a community be able to narrow down the problem and solve it together.

This project is pure JS, so it isn't like we need to get into Objective-C and Kotlin.

@oregev
Copy link

oregev commented Feb 20, 2022

Any news on this?
Have the same problem on iPhone 11 only running IOS 13.
setup:
RN - 0.66.4
react-native-walkthrough-tooltip - 1.3.0

Screen.Recording.2022-02-20.at.7.56.51.mov

@Pakile
Copy link

Pakile commented Mar 23, 2022

the same issue, any solutions for this @oregev ?

@Dassine
Copy link

Dassine commented Jul 5, 2022

Same issue, Any solution?

@tailorem
Copy link

tailorem commented Sep 9, 2022

The issue my team was seeing is slightly different than the above, but the below patch seems to be doing the trick for us. Perhaps something similar would help someone else. :)

diff --git a/node_modules/react-native-walkthrough-tooltip/src/tooltip.js b/node_modules/react-native-walkthrough-tooltip/src/tooltip.js
index 4de1852..076b99f 100644
--- a/node_modules/react-native-walkthrough-tooltip/src/tooltip.js
+++ b/node_modules/react-native-walkthrough-tooltip/src/tooltip.js
@@ -226,8 +226,12 @@ class Tooltip extends Component {
 
   measureContent = e => {
     const { width, height } = e.nativeEvent.layout;
-    const contentSize = new Size(width, height);
-    this.setState({ contentSize }, () => {
+    const newContentSize = new Size(width, height);
+    this.setState(({ contentSize }) => ({
+      contentSize: {
+        width: Math.max(contentSize.width, newContentSize.width),
+        height: Math.max(contentSize.height, newContentSize.height),
+      }}), () => {
       this.computeGeometry();
     });
   };

Possibly related but didn't investigate too far: facebook/react-native#31876

@codal-mpawar
Copy link

Thanks @tailorem works well.

@tsachit
Copy link

tsachit commented Feb 13, 2024

Is this patch above going to be implemented in this project?

@jyaconelli
Copy link

Also facing this issue. I have a state change that triggers a scroll to the tooltip's location and was also controlling the Tooltip's isVisible. My hacky fix has been use setTimeout to delay showing the tooltip by 300-400ms to allow time for the scroll to occur.
Also would be interested in getting @tailorem's fix into the package

useEffect(() => {
  scrollRef.({
    y: locations[tutorial.step]
  })
}, [tutorial.step])

then my Tooltip has

  const [open, setOpen] = useState(false)

  useEffect(() => {
    if (tutorial.step === TutorialStep.USER_TAKES) {
      const timeout = setTimeout(() => {
        setOpen(true)
      }, 400)
      return () => clearTimeout(timeout)
    } else {
      setOpen(false)
    }
  }, [tutorial.step])
...
  <Tooltip
    isVisible={open}
    ...
  />

@jyaconelli jyaconelli linked a pull request Apr 17, 2024 that will close this issue
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

Successfully merging a pull request may close this issue.