Invariant Violation: [...,"top: <<NaN>>",...] is not usable as a native method argument

Explain what you did

I use “tooltip” to indicate a message when a user press on a text. This tooltip is located on a text that is in an Item of a flatlist.

Expected behavior

I want the tooltip to show up!

Describe the bug

The tooltip works very well! However, if the flatlist item is located very low in the flatlist rendering window and I click on the text, I get an ugly error like this:

Tip: It only seems to happen on Android.

To Reproduce

• Make a flatlist with some large (in height) item
• Put a text at the bottom of this item
• Create an absolute view that wrap the text and apply it a tooltip (cause there is a problem with statusbar on Android)
• Scroll the items, when a text with tooltip is at the bottom of the rendering window, click on it.

Screenshots

Your Environment (please complete the following information):

react-native info

System:
    OS: macOS 10.14.6
    CPU: (4) x64 Intel(R) Core(TM) i5-3210M CPU @ 2.50GHz
    Memory: 1.69 GB / 16.00 GB
    Shell: 5.3 - /bin/zsh
  Binaries:
    Node: 10.16.1 - /usr/local/bin/node
    npm: 6.13.4 - ~/.npm-global/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  SDKs:
    iOS SDK:
      Platforms: iOS 12.4, macOS 10.14, tvOS 12.4, watchOS 5.3
  IDEs:
    Android Studio: 3.5 AI-191.8026.42.35.6010548
    Xcode: 10.3/10G8 - /usr/bin/xcodebuild
  npmPackages:
    @react-native-community/cli: ^3.0.4 => 3.0.4
    react: 16.8.6 => 16.8.6
    react-native: 0.60.4 => 0.60.4

react-native elements version

react-native-elements": "^1.1.0

[LucidNinja]

I was getting this issue but managed to fix it by waiting for the screen to finish painting, by using the requestAnimationFrame method

requestAnimationFrame(() => tooltipRef.current?.toggleTooltip());

[renjfk]

This is still occurring for some cases especially on simulator and when hermes is enabled which ends up with app crashing. For now as workaround providing default values to measure callback seems to be resolving issue at least for my situation (manual toggle). Even if it gets wrong positioning at first since toggleTooltip hence getElementPosition is called every time it ends up with correct ones ultimately without any glitch. I could create another PR for this kind of situation as safety measure since I don’t see any harm with this kind of change.

...
  getElementPosition = () => {
    const { skipAndroidStatusBar } = this.props;
    this.renderedElement &&
      this.renderedElement.measure(
        (
          frameOffsetX,
          frameOffsetY,
          width = 0,
          height = 0,
          pageOffsetX = 0,
          pageOffsetY = 0
        ) => {
...