Comments (25)
diff --git a/dist/Utility.js b/dist/Utility.js
index 35c6c1de3708a82f6453e871c25795d6249e8746..2cd6009a69fd8d5e154ffb097c8e460250b3cb80 100644
--- a/dist/Utility.js
+++ b/dist/Utility.js
@@ -39,8 +39,8 @@ import { Placement, Rect, Size } from './Types';
import { DEFAULT_ARROW_SIZE, DEFAULT_BORDER_RADIUS } from './Constants';
export function getRectForRef(ref) {
return new Promise(function (resolve, reject) {
- if (ref.current) {
- NativeModules.UIManager.measure(findNodeHandle(ref.current), function (_1, _2, width, height, x, y) {
+ if (ref.current) {
+ ref.current.measureInWindow(function (x, y, width, height) {
return resolve(new Rect(x, y, width, height));
});
}
I had the same problem than mentioned, and this change made the library work properly again on Android without setVisible timeout tricks or collapsable false — btw UIManager.measure
and UIManager.measureInWindow
are deprecated.
Hope it helps you solve the problem :)
from react-native-popover-view.
Hi @SteffeyDev! Yes, it is working with expo 46 and react-native 0.69.5. The current behaviour is that popover is not shown and blocks the UI thread without the ability to close it with mode={PopoverMode.RN_MODAL}
and with hermes
engine enabled
(only on Android)
upd: Hermes is not a culprit here, doesn't work with JSC either way...
upd2: Seems like something with target
when Component (TouchableOpacity in my case) passed. Without it or with Rect works.
upd3: seems like it has a problem with starting right with isVisible={true}
value. As a workaround, I started with a falsy value, and in useEffect
hook changed setState
value after 50 millisecsec timeout.
from react-native-popover-view.
I'm was facing the same issue, here's how I managed to solve it.
From the documentation: https://reactnative.dev/docs/view.html#collapsable views are removed if they're only used to layout children or don't draw anything on screen. In my case, the view was purely for layout purposes, and was therefore removed by react-native. In which case, the ref did not exist and the popover was unable to anchor itself.
To fix the issue, add collapsable={false}
to the view you wish to anchor from. A potential reason why not all android users face this issue, is that views with styling are not collapsed. In my case, the view had no styling i.e. didn't draw anything on screen.
References:
Thanks to @bennidi for pointing to the other libraries. Hope this helps!
from react-native-popover-view.
@vsofroniev Thanks for finding this, hopefully this fixes for a few people. I will add this to the README under troubleshooting.
from react-native-popover-view.
worked for me too... dang we need to get that merged. thanks
from react-native-popover-view.
From the logs, it looks like the problem is that the anchorPoint
has a y
-coordinate of 4080
, which is well beyond the display area height of 802.9
. Try putting the Popover outside of the scroll view, and don't use a verticalOffset
unless needed. I would need to see what styles you are applying to be able to tell if any of them are causing issues.
from react-native-popover-view.
No it still doesn't work.
I tried putting it outside the scroll view and removed all custom styling and the vertical offset. Here is the entire screen now:
return (
<>
<ScrollView>
<View
ref={popoverRef}
renderToHardwareTextureAndroid={true}
collapsable={false}
style={{
height: 200,
backgroundColor: Colors.ERROR_BACKGROUND,
}}></View>
</ScrollView>
<Popover
isVisible={true}
onRequestClose={() => {
console.log('Closing');
}}
debug={true}
from={popoverRef}>
<Text>Hello world!</Text>
</Popover>
</>
);
Here is what I see on screen:
Logs are showing this:
[Thu Oct 13 2022 12:05:09.818] LOG [2022-10-13T16:05:09.081Z] computeGeometry - final chosen geometry: {"popoverOrigin":{"x":159.27272415161133,"y":200},"anchorPoint":{"x":196.36363220214844,"y":200},"placement":"bottom","forcedContentSize":{"width":372.7272644042969,"height":592.9091741388495},"viewLargerThanDisplayArea":{"height":false,"width":false}}
from react-native-popover-view.
Ok some information. I was able to get the popover to show up, but ONLY when the app was deleted and reinstalled into the emulator. Same screen code as above.
Logs when the popover showed up right after re-installing the app:
[Thu Oct 13 2022 12:17:59.923] LOG [2022-10-13T16:17:59.233Z] computeAutoGeometry - List of available space: {"left":{"sizeAvailable":-16,"sizeRequested":90.18181610107422,"fits":false,"extraSpace":-106.18181610107422},"right":{"sizeAvailable":-16,"sizeRequested":90.18181610107422,"fits":false,"extraSpace":-106.18181610107422},"top":{"sizeAvailable":-16.000055486505744,"sizeRequested":35.272727966308594,"fits":false,"extraSpace":-51.27278345281434},"bottom":{"sizeAvailable":586.9091741388495,"sizeRequested":35.272727966308594,"fits":true,"extraSpace":551.6364461725409}}
[Thu Oct 13 2022 12:17:59.924] LOG [2022-10-13T16:17:59.234Z] computeAutoGeometry - Found best postition for placement: "bottom"
[Thu Oct 13 2022 12:17:59.924] LOG [2022-10-13T16:17:59.234Z] computeGeometry - initial chosen geometry: {"popoverOrigin":{"x":151.27272415161133,"y":200},"anchorPoint":{"x":196.36363220214844,"y":200},"placement":"bottom","forcedContentSize":{"width":372.7272644042969,"height":592.9091741388495},"viewLargerThanDisplayArea":{"height":false,"width":false}}
[Thu Oct 13 2022 12:17:59.925] LOG [2022-10-13T16:17:59.235Z] computeGeometry - final chosen geometry: {"popoverOrigin":{"x":151.27272415161133,"y":200},"anchorPoint":{"x":196.36363220214844,"y":200},"placement":"bottom","forcedContentSize":{"width":372.7272644042969,"height":592.9091741388495},"viewLargerThanDisplayArea":{"height":false,"width":false}}
[Thu Oct 13 2022 12:17:59.929] LOG [2022-10-13T16:17:59.239Z] handleChange - animating in
[Thu Oct 13 2022 12:17:59.930] LOG [2022-10-13T16:17:59.239Z] getTranslateOrigin - popoverSize: {"width":90.18181610107422,"height":43.272727966308594}
[Thu Oct 13 2022 12:17:59.931] LOG [2022-10-13T16:17:59.240Z] getTranslateOrigin - anchorPoint: {"x":196.36363220214844,"y":200}
[Thu Oct 13 2022 12:17:59.931] LOG [2022-10-13T16:17:59.242Z] animateIn - translateStart: {"x":151.27272415161133,"y":1784.1818178350275}
[Thu Oct 13 2022 12:17:59.932] LOG [2022-10-13T16:17:59.242Z] animateIn - translatePoint: {"x":151.27272415161133,"y":200}
[Thu Oct 13 2022 12:17:59.939] LOG [2022-10-13T16:17:59.249Z] Setting up keyboard listeners
[Thu Oct 13 2022 12:17:59.964] LOG [2022-10-13T16:17:59.277Z] measureContent - Skipping, content size did not change
[Thu Oct 13 2022 12:18:00.267] LOG [2022-10-13T16:17:59.579Z] animateIn - onOpenComplete - Calculated Popover Rect: {"x":0,"y":-1597.8182373046875,"width":90.18181610107422,"height":35.272727966308594}
[Thu Oct 13 2022 12:18:00.268] LOG [2022-10-13T16:17:59.581Z] animateIn - onOpenComplete - Calculated Arrow Rect: {"x":37.09090805053711,"y":-1605.8182373046875,"width":18.18181800842285,"height":10.181818008422852}
However, then I cold-started the app and now the popover did not show. Here are the logs for that. I verified that every single line is EXACTLY the same as the logs above when the popover did show up:
[Thu Oct 13 2022 12:20:40.535] LOG [2022-10-13T16:20:39.847Z] computeAutoGeometry - List of available space: {"left":{"sizeAvailable":-16,"sizeRequested":90.18181610107422,"fits":false,"extraSpace":-106.18181610107422},"right":{"sizeAvailable":-16,"sizeRequested":90.18181610107422,"fits":false,"extraSpace":-106.18181610107422},"top":{"sizeAvailable":-16.000055486505744,"sizeRequested":35.272727966308594,"fits":false,"extraSpace":-51.27278345281434},"bottom":{"sizeAvailable":586.9091741388495,"sizeRequested":35.272727966308594,"fits":true,"extraSpace":551.6364461725409}}
[Thu Oct 13 2022 12:20:40.536] LOG [2022-10-13T16:20:39.847Z] computeAutoGeometry - Found best postition for placement: "bottom"
[Thu Oct 13 2022 12:20:40.536] LOG [2022-10-13T16:20:39.848Z] computeGeometry - initial chosen geometry: {"popoverOrigin":{"x":151.27272415161133,"y":200},"anchorPoint":{"x":196.36363220214844,"y":200},"placement":"bottom","forcedContentSize":{"width":372.7272644042969,"height":592.9091741388495},"viewLargerThanDisplayArea":{"height":false,"width":false}}
[Thu Oct 13 2022 12:20:40.536] LOG [2022-10-13T16:20:39.848Z] computeGeometry - final chosen geometry: {"popoverOrigin":{"x":151.27272415161133,"y":200},"anchorPoint":{"x":196.36363220214844,"y":200},"placement":"bottom","forcedContentSize":{"width":372.7272644042969,"height":592.9091741388495},"viewLargerThanDisplayArea":{"height":false,"width":false}}
[Thu Oct 13 2022 12:20:40.544] LOG [2022-10-13T16:20:39.854Z] handleChange - animating in
[Thu Oct 13 2022 12:20:40.545] LOG [2022-10-13T16:20:39.855Z] getTranslateOrigin - popoverSize: {"width":90.18181610107422,"height":43.272727966308594}
[Thu Oct 13 2022 12:20:40.546] LOG [2022-10-13T16:20:39.855Z] getTranslateOrigin - anchorPoint: {"x":196.36363220214844,"y":200}
[Thu Oct 13 2022 12:20:40.546] LOG [2022-10-13T16:20:39.856Z] animateIn - translateStart: {"x":151.27272415161133,"y":1784.1818178350275}
[Thu Oct 13 2022 12:20:40.546] LOG [2022-10-13T16:20:39.856Z] animateIn - translatePoint: {"x":151.27272415161133,"y":200}
[Thu Oct 13 2022 12:20:40.551] LOG [2022-10-13T16:20:39.864Z] Setting up keyboard listeners
[Thu Oct 13 2022 12:20:40.579] LOG [2022-10-13T16:20:39.894Z] measureContent - Skipping, content size did not change
[Thu Oct 13 2022 12:20:40.900] LOG [2022-10-13T16:20:40.213Z] animateIn - onOpenComplete - Calculated Popover Rect: {"x":0,"y":-1597.8182373046875,"width":90.18181610107422,"height":35.272727966308594}
[Thu Oct 13 2022 12:20:40.901] LOG [2022-10-13T16:20:40.215Z] animateIn - onOpenComplete - Calculated Arrow Rect: {"x":37.09090805053711,"y":-1605.8182373046875,"width":18.18181800842285,"height":10.181818008422852}
Removing the scroll view makes no difference - the behavior is the same, ie., the popover shows up after reinstalling the app, but never after that unless I delete and reinstall.
Emulator is Pixel 5 API 31, Gradle 7.1.1, buildToolsVersion = "31.0.0", minSdkVersion = 23, compileSdkVersion = 31, targetSdkVersion = 31
from react-native-popover-view.
@smadan Does this happen on a real device in addition to the emulator?
from react-native-popover-view.
@SteffeyDev I sadly don't have access to a real, newer Android device to test this on.
from react-native-popover-view.
I just tried on a Galaxy S9, Android 10. It doesn't work - I don't see popovers at all.
from react-native-popover-view.
I'm honestly not sure what's going on here, and not sure how to debug unless you can reproduce in an expo snack. Are you seeing negative y values on device as well?
from react-native-popover-view.
im having this problem too
from react-native-popover-view.
Having same issue (Galaxy S21), no popover on Android, but still have it on Expo
from react-native-popover-view.
Any progress here? I don't see a popover on android after updating to Expo 47.
react-native: 0.70.5
[2022-12-02T09:11:30.786Z] calculateRectFromRef - waiting for ref
[2022-12-02T09:11:30.788Z] calculateRectFromRef - waiting for ref to move from: {"x":0,"y":0,"width":0,"height":0}
[2022-12-02T09:11:30.969Z] calculateRectFromRef - rect not found, all properties undefined
from react-native-popover-view.
@zakharchenkoAndrii are you sure your issue is related? The other users are reporting issues when upgrading to a newer Android version, not when updating to expo. Your's might be a different issue entirely. Does it still work on previous expo version?
from react-native-popover-view.
Hey. I am seeing the same error using Expo 47 and RN 0.70.5.
I tried two other libraries offering a similar functionality. All of them work fine on IOS and crash on Android:
react-native-toast-message
react-native-modal-popover
This could be a RN issue. One error I received was about not being able to set some css property on a shadow node.
My technical in-depth knowledge of RN is not enough to interpret that.
But somehow it smells like a bug in the rendering process...
from react-native-popover-view.
@vsofroniev I'm not sure if that's the fix for this issue. See my code in my original post above - I already have collapsable={false} set everywhere. This seems to be a different problem.
from react-native-popover-view.
I already have collapsable={false} is not work
from react-native-popover-view.
I'm seeing the same as zakharchenkoAndrii; I was testing with isVisible set to true, and was not seeing the tooltip. I changed to the below and it works now (note: it only works when using setTimeout, not when calling setVisibility(true)
directly):
const [isVisible, setVisibility] = useState(false);
useEffect(() => {
setTimeout(() => setVisibility(true));
}, [])
EDIT: Only works when collapsable={false}
is set
from react-native-popover-view.
collapsable
sorry is not work
from react-native-popover-view.
Any updates on this? @SteffeyDev ?
from react-native-popover-view.
diff --git a/dist/Utility.js b/dist/Utility.js index 35c6c1de3708a82f6453e871c25795d6249e8746..2cd6009a69fd8d5e154ffb097c8e460250b3cb80 100644 --- a/dist/Utility.js +++ b/dist/Utility.js @@ -39,8 +39,8 @@ import { Placement, Rect, Size } from './Types'; import { DEFAULT_ARROW_SIZE, DEFAULT_BORDER_RADIUS } from './Constants'; export function getRectForRef(ref) { return new Promise(function (resolve, reject) { - if (ref.current) { - NativeModules.UIManager.measure(findNodeHandle(ref.current), function (_1, _2, width, height, x, y) { + if (ref.current) { + ref.current.measureInWindow(function (x, y, width, height) { return resolve(new Rect(x, y, width, height)); }); }I had the same problem than mentioned, and this change made the library work properly again on Android without setVisible timeout tricks or collapsable false — btw
UIManager.measure
andUIManager.measureInWindow
are deprecated.Hope it helps you solve the problem :)
This worked for me, great find @dieppe 🙌🏽
from react-native-popover-view.
I'm was facing the same issue, here's how I managed to solve it.
From the documentation: https://reactnative.dev/docs/view.html#collapsable views are removed if they're only used to layout children or don't draw anything on screen. In my case, the view was purely for layout purposes, and was therefore removed by react-native. In which case, the ref did not exist and the popover was unable to anchor itself.
To fix the issue, add
collapsable={false}
to the view you wish to anchor from. A potential reason why not all android users face this issue, is that views with styling are not collapsed. In my case, the view had no styling i.e. didn't draw anything on screen.References:
- https://github.com/doomsower/react-native-modal-popover/issues/43
- RCTUIManager.measure not working on Android facebook/react-native#12966
Thanks to @bennidi for pointing to the other libraries. Hope this helps!
Its worked for me, thanks!
from react-native-popover-view.
Related Issues (20)
- App Crashing when trying to display tooltip in different screen HOT 5
- Export `PublicPopoverProps` instead of `PopoverProps`? HOT 2
- When I use PopOver as a tooltip its opening behind other containers below it. HOT 3
- Latest react native > 0.70.0 PopUp position uneven HOT 1
- Display popover view not render correctly using mode: 'tooltip' and placement: 'bottom' in android HOT 2
- "From" prop: Function components cannot be given refs HOT 2
- Error: getRectForRef - current is not set (Unhandled Promise Rejection) iOS HOT 13
- `Point` should be exported from the package
- on android the popover is offset by a about 10 px more than intended HOT 2
- popvoer displays in an unusual position on certain Android devices HOT 4
- Screen freezes when there is a view that exceeds the height of the screen HOT 2
- Add Changelog / Release log
- Popover is not testable in react-native-testing-library HOT 6
- ScrollView is not working in android HOT 15
- hide statusbar HOT 3
- Patch to make Popover work with Appium so the children of popover can be accessible HOT 1
- More granular control to animations HOT 4
- SVG icon as children breaks HOT 1
- App freeze when popover is calculated off screen (even in official snack) HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-native-popover-view.