After misrender tooltip keeps flicking on screen

[ghost]

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".

https://user-images.githubusercontent.com/47385105/113450719-d1f96900-93d6-11eb-9787-e94bf280b278.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]

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

[ghost]

@Manya-96 No I wasn't 😕

[Manya-96]

Any other solution you tried for this issue? @emilioheinz

[jzxchiang1]

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

[tamir61]

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

[Ashutosh-Tiwari]

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]

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]

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

https://user-images.githubusercontent.com/60711866/154830546-42ce634c-cfc5-460c-aa2f-25258f42ed78.mov

[Pakile]

the same issue, any solutions for this @oregev ?

[Dassine]

Same issue, Any solution?

[tailorem]

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: https://github.com/facebook/react-native/issues/31876

[codal-mpawar]

Thanks @tailorem works well.

[tsachit]

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

[jyaconelli]

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}
    ...
  />