react-native-popover-view icon indicating copy to clipboard operation
react-native-popover-view copied to clipboard

Error: getRectForRef - current is not set (Unhandled Promise Rejection) iOS

Open cormacbeagan opened this issue 2 years ago • 13 comments

Describe the bug

'Error: getRectForRef - current is not set' is being thrown when a replace (replace, native back navigation) navigation (native-stack) is being triggered from popover. Behaves slightly differently when built with or without hermes:

With Hermes:

  ERROR  Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory 
  leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.
    in AdaptivePopover
  WARN  Possible Unhandled Promise Rejection (id: 0):
  Error: getRectForRef - current is not set
  Error: getRectForRef - current is not set

Or just:

WARN  Possible Unhandled Promise Rejection (id: 1):
Error: getRectForRef - current is not set
Error: getRectForRef - current is not set

Without Hermes:

  ERROR  Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory 
  leak 
  in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.
    in AdaptivePopover

Causes screen freezes and crashes on big busy ipad app. I am happy to have a dig at finding a solution and creating a PR but I will need input on how to resolve the issue. I have not tested on Android.

Device/Setup Info:

RN Info
System:
    OS: macOS 13.0.1
    CPU: (8) arm64 Apple M1
    Memory: 106.27 MB / 8.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.13.2 - ~/.nvm/versions/node/v16.13.2/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 8.1.2 - ~/.nvm/versions/node/v16.13.2/bin/npm
    Watchman: 2022.12.12.00 - /opt/homebrew/bin/watchman
  Managers:
    CocoaPods: 1.11.3 - /Users/mac/.rbenv/shims/pod
  SDKs:
    iOS SDK:
      Platforms: DriverKit 22.1, iOS 16.1, macOS 13.0, tvOS 16.1, watchOS 9.1
    Android SDK:
      API Levels: 29, 30, 31
      Build Tools: 28.0.3, 29.0.2, 30.0.2, 30.0.3, 31.0.0, 32.0.0, 32.1.0, 33.0.0
      System Images: android-24 | ARM 64 v8a, android-25 | Google APIs ARM EABI v7a, android-26 | Google Play Intel x86 Atom, android-29 | ARM 64 v8a, android-32 | Google APIs ARM 64 v8a, android-32 | Google Play ARM 64 v8a
      Android NDK: Not Found
  IDEs:
    Android Studio: 2021.1 AI-211.7628.21.2111.8092744
    Xcode: 14.1/14B47b - /usr/bin/xcodebuild
  Languages:
    Java: 11.0.11 - /usr/bin/javac
  npmPackages:
    "@react-navigation/native": "^6.1.1",
    "@react-navigation/native-stack": "^6.9.7",
    "react": "17.0.2",
    "react-native": "0.68.0",
    "react-native-popover-view": "^5.1.7",
    "react-native-safe-area-context": "^4.4.1",
    "react-native-screens": "^3.18.2"
  npmGlobalPackages:
    *react-native*: Not Found

**Debug Output**
LOG  [2023-01-02T13:40:30.925Z] calculateRectFromRef - waiting for ref
LOG  [2023-01-02T13:40:30.925Z] calculateRectFromRef - waiting for ref to move from: {"x":0,"y":0,"width":0,"height":0}
LOG  [2023-01-02T13:40:31.042Z] calculateRectFromRef - calculated Rect: {"x":0,"y":119.66666603088379,"width":390,"height":37.66667175292969}
LOG  [2023-01-02T13:40:31.050Z] setDefaultDisplayArea - newDisplayArea: {"x":0,"y":0,"width":390,"height":844}
LOG  [2023-01-02T13:40:31.051Z] setDefaultDisplayArea - displayAreaOffset: {"x":0,"y":0}
LOG  [2023-01-02T13:40:31.055Z] calculateRectFromRef - waiting for ref
LOG  [2023-01-02T13:40:31.055Z] calculateRectFromRef - waiting for ref to move from: {"x":0,"y":119.66666603088379,"width":390,"height":37.66667175292969}
LOG  [2023-01-02T13:40:31.075Z] measureContent - new requestedContentSize: {"width":79.66666412353516,"height":37.6666259765625} (used to be null)
LOG  [2023-01-02T13:40:31.078Z] handleChange - waiting 100ms to accumulate all changes
LOG  [2023-01-02T13:40:31.191Z] handleChange - requestedContentSize: {"width":79.66666412353516,"height":37.6666259765625}
LOG  [2023-01-02T13:40:31.191Z] handleChange - displayArea: {"x":0,"y":0,"width":390,"height":844}
LOG  [2023-01-02T13:40:31.192Z] handleChange - fromRect: {"x":0,"y":119.66666603088379,"width":390,"height":37.66667175292969}
LOG  [2023-01-02T13:40:31.192Z] handleChange - placement: "auto"
LOG  [2023-01-02T13:40:31.192Z] computeAutoGeometry - displayArea: {"x":0,"y":0,"width":390,"height":844}
LOG  [2023-01-02T13:40:31.192Z] computeAutoGeometry - fromRect: {"x":0,"y":119.66666603088379,"width":390,"height":37.66667175292969}
LOG  [2023-01-02T13:40:31.192Z] computeAutoGeometry - List of available space: {"left":{"sizeAvailable":-16,"sizeRequested":79.66666412353516,"fits":false,"extraSpace":-95.66666412353516},"right":{"sizeAvailable":-16,"sizeRequested":79.66666412353516,"fits":false,"extraSpace":-95.66666412353516},"top":{"sizeAvailable":103.66666603088379,"sizeRequested":37.6666259765625,"fits":true,"extraSpace":66.00004005432129},"bottom":{"sizeAvailable":670.6666622161865,"sizeRequested":37.6666259765625,"fits":true,"extraSpace":633.000036239624}}
LOG  [2023-01-02T13:40:31.192Z] computeAutoGeometry - Found best postition for placement: "bottom"
LOG  [2023-01-02T13:40:31.192Z] computeGeometry - initial chosen geometry: {"popoverOrigin":{"x":155.16666793823242,"y":157.33333778381348},"anchorPoint":{"x":195,"y":157.33333778381348},"placement":"bottom","forcedContentSize":{"width":370,"height":676.6666622161865},"viewLargerThanDisplayArea":{"height":false,"width":false}}
LOG  [2023-01-02T13:40:31.192Z] computeGeometry - final chosen geometry: {"popoverOrigin":{"x":155.16666793823242,"y":157.33333778381348},"anchorPoint":{"x":195,"y":157.33333778381348},"placement":"bottom","forcedContentSize":{"width":370,"height":676.6666622161865},"viewLargerThanDisplayArea":{"height":false,"width":false}}
LOG  [2023-01-02T13:40:31.195Z] handleChange - animating in
LOG  [2023-01-02T13:40:31.195Z] getTranslateOrigin - popoverSize: {"width":79.66666412353516,"height":45.6666259765625}
LOG  [2023-01-02T13:40:31.195Z] getTranslateOrigin - anchorPoint: {"x":195,"y":157.33333778381348}
LOG  [2023-01-02T13:40:31.195Z] animateIn - translateStart: {"x":155.16666793823242,"y":1822.5000247955322}
LOG  [2023-01-02T13:40:31.195Z] animateIn - translatePoint: {"x":155.16666793823242,"y":157.33333778381348}
LOG  [2023-01-02T13:40:31.198Z] Setting up keyboard listeners
LOG  [2023-01-02T13:40:31.225Z] measureContent - Skipping, content size did not change
LOG  [2023-01-02T13:40:31.519Z] animateIn - onOpenComplete - Calculated Popover Rect: {"x":155.1666717529297,"y":165.3333740234375,"width":79.66666412353516,"height":37.6666259765625}
LOG  [2023-01-02T13:40:31.519Z] animateIn - onOpenComplete - Calculated Arrow Rect: {"x":187.1666717529297,"y":157.3333740234375,"width":18,"height":10}
LOG  [2023-01-02T13:40:32.250Z] componentWillUnmount
LOG  [2023-01-02T13:40:32.250Z] animateOut - isMounted
LOG  [2023-01-02T13:40:32.250Z] getTranslateOrigin - popoverSize: {"width":79.66666412353516,"height":45.6666259765625}
LOG  [2023-01-02T13:40:32.250Z] getTranslateOrigin - anchorPoint: {"x":195,"y":157.33333778381348}
LOG  [2023-01-02T13:40:32.255Z] Tearing down keyboard listeners
ERROR  Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.
   in AdaptivePopover
WARN  Possible Unhandled Promise Rejection (id: 0):
Error: getRectForRef - current is not set
Error: getRectForRef - current is not set
   at anonymous (http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.PopoverMinimal:95689:25)
   at tryCallTwo (/Users/distiller/hermes/build_iphonesimulator/lib/InternalBytecode/InternalBytecode.js:61:9)
   at doResolve (/Users/distiller/hermes/build_iphonesimulator/lib/InternalBytecode/InternalBytecode.js:216:25)
   at Promise (/Users/distiller/hermes/build_iphonesimulator/lib/InternalBytecode/InternalBytecode.js:82:14)
   at getRectForRef (http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.PopoverMinimal:95683:23)
   at anonymous (http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.PopoverMinimal:94809:88)
   at call (native)
   at step (http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.PopoverMinimal:94610:23)
   at anonymous (http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.PopoverMinimal:94559:20)
   at fulfilled (http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.PopoverMinimal:94518:30)
   at tryCallOne (/Users/distiller/hermes/build_iphonesimulator/lib/InternalBytecode/InternalBytecode.js:53:16)
   at anonymous (/Users/distiller/hermes/build_iphonesimulator/lib/InternalBytecode/InternalBytecode.js:139:27)
   at apply (native)
   at anonymous (http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.PopoverMinimal:24710:26)
   at _callTimer (http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.PopoverMinimal:24629:17)
   at _callReactNativeMicrotasksPass (http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.PopoverMinimal:24659:17)
   at callReactNativeMicrotasks (http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.PopoverMinimal:24822:44)
   at __callReactNativeMicrotasks (http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.PopoverMinimal:2535:46)
   at anonymous (http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.PopoverMinimal:2347:45)
   at __guard (http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.PopoverMinimal:2519:15)
   at flushedQueue (http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.PopoverMinimal:2346:21)
   at callFunctionReturnFlushedQueue (http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.PopoverMinimal:2331:33)

Minimal Reproducable Example

Run ios and then notice the error when navigation from screen 2 to screen 1 - using navigation.navigate removes screen 2 from the stack and navigates to screen 1

Possibly Connected to:

Issue 145

Issue 69

cormacbeagan avatar Jan 02 '23 14:01 cormacbeagan

Not sure if it's related, but I'm getting that same error "getRectForRef" on android when handling popover visibility through state rather than ref.

pierroo avatar Jan 25 '23 10:01 pierroo

Try setting the useNativeDriver to false for the animations and see if it changes anything. Like this:

animationConfig={{
          duration: 70,
          useNativeDriver: false,
        }}

cormacbeagan avatar Jan 25 '23 16:01 cormacbeagan

I'm seeing this behavior too, when I conditionally render a Popover, as opposed to just using isVisible

stevewillard avatar Jan 27 '23 01:01 stevewillard

Try setting the useNativeDriver to false for the animations and see if it changes anything. Like this:

animationConfig={{
          duration: 70,
          useNativeDriver: false,
        }}

Unfortunately still facing the warning with this config

pierroo avatar Feb 06 '23 11:02 pierroo

same issue, is there any working fix/workaround?

thimo1 avatar Feb 27 '23 20:02 thimo1

Using Patch Package I was able to get it working. In Popover.js line 850 in the dist folder you need to change: callback: function () { return setTimeout(_this.props.onCloseComplete); }, To this callback: function () { return _this.props.onCloseComplete(); }, So you have

BasePopover.prototype.animateOut = function () {
        var _this = this;
        if (this.props.onCloseStart)
            setTimeout(this.props.onCloseStart);
        if (this._isMounted)
            this.setState({ showing: false });
        this.animateTo({
            values: this.state.animatedValues,
            fade: 0,
            scale: 0,
            translatePoint: this.getTranslateOrigin(),
            callback: function () { return _this.props.onCloseComplete(); },
            easing: Easing.inOut(Easing.quad),
            geom: this.getGeom()
        });
    };

To get it running on production builds properly I also needed to add: animationConfig={{ useNativeDriver: false, }} As props to the Popover component.

cormacbeagan avatar Feb 28 '23 11:02 cormacbeagan

Also seeing this clogging up my error reporting. It doesn't seem to be causing any problems but it is causing thousands of error reports to come in.

evelant avatar Mar 21 '23 15:03 evelant

You guys found any solution to this problem?

Munir-Hassan avatar Apr 21 '23 17:04 Munir-Hassan

I encountered this warning when the source component was removed from the hierarchy. I found that making the source component a forwardRef fixed it for me.

const SafePopoverSource = forwardRef<View, ViewProps>(
  function EllipsisContainer(props, ref) {
    return (
      <View ref={ref} {...props}>
        {props.children}
      </View>
    );
  },
);

...

<SafePopoverSource ref={popoverSource}>
/* children */
</SafePopoverSource>

[Edit] This appeared to fix the issue this morning, but now the warning is back. Not a fix.

RavenJock avatar Jun 15 '23 08:06 RavenJock

Facing the same problem on a menu option to delete a item: when deleted, the item is removed from it's parent and with it the whole popover. So it gives me the warning. If I wait like 2 seconds it doesn't warn.

rampazzo1989 avatar Aug 06 '23 17:08 rampazzo1989

Also experiencing this on web. When it happens on the web it locks up the entire app until reloaded.

jarredkenny avatar Aug 08 '23 12:08 jarredkenny

Facing the same problem on a menu option to delete a item: when deleted, the item is removed from it's parent and with it the whole popover. So it gives me the warning. If I wait like 2 seconds it doesn't warn.

I'm facing the exact same issue, any update on a fix ?

Tiropz avatar Jan 31 '24 20:01 Tiropz

it seems this isn't maintained at all. this error is coming in a lot for me as well...

zackify avatar Feb 14 '24 17:02 zackify