search

SteffeyDev / react-native-popover-view

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

How can I change arrow position ? #51

Closed zhuliminl closed 4 years ago

zhuliminl commented 5 years ago

How can I change arrow position ? this is so important for my UI

SteffeyDev commented 5 years ago

What do you mean change the arrow position? The position is determined by the button or rect you show the popover from, so you can just change the ref or text to change the position of the arrow. Do you have an example you can show of where the arrow is in the wrong position?

SteffeyDev commented 4 years ago

Closing due to inactivity

IkaroAlef commented 4 years ago

@SteffeyDev problably something like this image And that's what I'm also looking for. I'm using tooltip mode. Is it possible to change the triangle alignment/position?

SteffeyDev commented 4 years ago

Ah, I see what you mean. What you can do is pass a Rect object into the from prop to specify where on the screen the top of the arrow goes to (if you set width and height to 0 then you can use x an y to control the coordinates of the arrow). You can then use the placement prop to control which direction the popover opens in. A placement of bottom would make the arrow point up. Does that help?

SteffeyDev commented 4 years ago

You can adjust the style of the popover and the arrow using the corresponding style props, which allows you to change color, set border radius, size, etc. In the test app that is linked at the top of the readme, I have examples of different size arrows, different corner radius, and different colors.

IkaroAlef commented 4 years ago

Actually I'm using placement="top" but the arrow is horizontally align to the center of the popover. I'd like to align it to the start of the popover like this: image

SteffeyDev commented 4 years ago

Gotcha. I would consider adding an offset into a future version to make this easier. Can't say when I'll have time but I welcome pull requests as always.

Until then, you'll have to calculate the rect of the button manually and then pass a Rect to the from prop. You can look into the source code to see how I calculate the rect and then use that to calculate the rect, then just shorten the width of the rect to shift the popover source to the left.

SteffeyDev commented 4 years ago

@IkaroAlef I was working on another feature and decided to just knock this out. Check out the new arrowShift prop and let me know if it satisfies your needs. I'm also curious if the documentation on it makes sense or if it needs more clarification.

IkaroAlef commented 4 years ago

It's perfect! Thank you very much. But is there a way to fix the arrow instead of a multiplier? I tried a value of -0.5 but it becomes relative

image

I'm trying to align the arrow with the icons (still working on it)

SteffeyDev commented 4 years ago

Awesome! Good to hear :)

IkaroAlef commented 4 years ago

Oh sorry, I edited my comment.

SteffeyDev commented 4 years ago

What is the source view of the popover? If you set the source view to be the icon, the arrow will align with the icon.

IkaroAlef commented 4 years ago

I tried, but the popover won't show up. I'm using the Showing popover from a reference to an element way and set the ref to the icon, but the popover won't show up.