search

SteffeyDev / react-native-popover-view

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

Cannot use functional components as "from" #128

Closed AdamGerthel closed 2 years ago

AdamGerthel commented 3 years ago

Describe the bug Popover does not work when a functional component is supplied to the from prop. Error message reads:

Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

I don't know if this is intended behavior or not, and I'm not sure how to work around it.

Device/Setup Info: Any device, see snack: https://snack.expo.dev/@insats/sample-popover

Debug Output

calculateRectFromRef - waiting for ref

AdamGerthel commented 3 years ago

Solved by using React.forwardRef()

SteffeyDev commented 3 years ago

I'm actually going to re-open this so that I remember to update the documentation to mention this. Thanks for pointing it out.

SteffeyDev commented 2 years ago

Updated readme, added this under troubleshooting section.

merganon commented 1 year ago

Could someone please share a code example how to solve this with React.forwardRef?

SteffeyDev commented 1 year ago

Here are the generic react docs, including example: https://reactjs.org/docs/forwarding-refs.html

Just make sure to pass the ref to the outermost element, or the element that you want the popover to originate from.