react-native-popover-view
react-native-popover-view copied to clipboard
Error: getRectForRef - current is not set (Unhandled Promise Rejection) iOS
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)
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:
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.
Try setting the useNativeDriver to false for the animations and see if it changes anything. Like this:
animationConfig={{
duration: 70,
useNativeDriver: false,
}}
I'm seeing this behavior too, when I conditionally render a Popover, as opposed to just using isVisible
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
same issue, is there any working fix/workaround?
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.
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.
You guys found any solution to this problem?
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.
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.
Also experiencing this on web. When it happens on the web it locks up the entire app until reloaded.
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 ?
it seems this isn't maintained at all. this error is coming in a lot for me as well...