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

[cormacbeagan]

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

[pierroo]

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.

[cormacbeagan]

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

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

[stevewillard]

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

[pierroo]

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

[thimo1]

same issue, is there any working fix/workaround?

[cormacbeagan]

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.

[evelant]

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.

[Munir-Hassan]

You guys found any solution to this problem?

[RavenJock]

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.

[rampazzo1989]

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.

[jarredkenny]

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

[Tiropz]

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 ?

[zackify]

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