search

SteffeyDev / react-native-popover-view

A well-tested, adaptable, lightweight <Popover> component for react-native
MIT License
613 stars 92 forks source link

is it possible to show at the top of the screen? #134

Closed jaredh159 closed 2 years ago

jaredh159 commented 2 years ago

Hi there! Thanks for the great library, really appreciate all your work in it.

I'm using your popover view in a couple places in a few production apps of mine, but up until now I've always wanted my popovers not anchored to anything and centered in the screen. This works great out of the box.

But I have a new component I'm working on that I don't want to anchor to anything, but I want it to fix itself a certain number of pixels (or percentage) from the top of the screen. The component changes height based on the props passed to it, so what I'd like is that the top of the component is always some fixed distance from the top of the screen, and it grows only downward.

Right now, I have it centered, and as it grows/shrinks based on props, it re-centers vertically.

Is this possible? I've been playing around with placement and from props for a while, and can't seem to figure it out. Passing a Rect to from seemed promising, but I'm not sure the right mix of numbers to pass it. I'm not clear from the documentation what the x, y, and width height actually represent. x and y seem like it would be a coordinate system -- i assumed 0, 0 would be at the top left of the screen. But it doesn't seem to work like that. Or does it? does 0, 0 mean the middle of the screen. Also, what should I specify for width and height -- I can't quite figure that out. Or is using Rect the wrong approach?

Once again, thanks so much!

SteffeyDev commented 2 years ago

You are on the right track! I was thinking yesterday about adding a prop for better control of placement of floating popovers (maybe similar to arrowShift but in both dimensions). I'm definitely thinking about ways to simplify the API and am open to suggestions!

However, for the current version, you are absolutely correct to use a Rect. It uses a normal coordinate system, so (0, 0) is the top left. Something like from={new Rect(0, 0, width, 0)}, where width comes from useWindowDimensions, should pin the popover to the center of the top (and then you can hide the arrow so that it looks like it's floating). Let me know if that works!

jaredh159 commented 2 years ago

@SteffeyDev thanks so much for the quick response. finally got it working, with your hint, and a bit more experimentation. for some reason (unless I'm crazy), it wouldn't work when it was in PopoverMode.JS_MODAL I had to switch it to PopoverMode.RN_MODAL as well, then use the technique you described. thanks again.

SteffeyDev commented 2 years ago

Glad to hear! JS_MODAL is tricky to work with, you need to make sure the Popover component is positioned correctly in the component hierarchy so that it can actually show. Was the JS_MODAL showing centered or not showing at all?

jaredh159 commented 2 years ago

it was showing not at all (as far as I could tell...)

SteffeyDev commented 2 years ago

Awesome, sounds like a typically JS_MODAL layout issue and not a bug, thanks for confirming. I'll probably update the docs to explain how to use JS_MODAL better, lots of people struggle with it, but it's the only way to have nested popovers and tooltips.