"From" prop: Function components cannot be given refs

[merganon]

The popover doesn't work if a functional component is supplied to the "from" prop.

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

Someone solved this by using React.forwardRef(): https://github.com/SteffeyDev/react-native-popover-view/issues/128#issuecomment-964935918

Could we add a code example to the README.md explaining how to fix this?

[SteffeyDev]

This is already covered in the documentation: https://github.com/SteffeyDev/react-native-popover-view#error-when-passing-a-functional-component-to-the-from-prop

However, I'll leave this issue open until I add an example to the examples section

[merganon]

Solved it. Here's a code example if someone stumbles on this:

import React from 'react';
import { Text, TouchableOpacity } from 'react-native';
import Popover from 'react-native-popover-view';

const CustomButton = React.forwardRef((props, ref) => {
  return (
    <TouchableOpacity ref={ref}>
      <Text>Custom button</Text>
    </TouchableOpacity>
  )
}

export default function App() {
  return (
    <Popover
       from={
         <CustomButton />
      }
    >
      <Text>Inside popover</Text>
    </Popover>
  )
}