'How use UseRef to show popover just above the pressed element in React Native?

I am using the Flyerchat library for the chat application.

<Popover
        isVisible={open}
        onRequestClose={() => setOpen(false)}
        from={touchable}
        ref={touchable}
        arrowSize={{ height: 0, width: 0 }}>

      </Popover>


 <FlyerHQChat
        onMessageLongPress={(messageInfo: MessageType.Any) => {
          touchable?.current;
          setOpen(true);
          console.log('Message pressed', messageInfo);
        }} 
        ....
/>

I log touchable and got popover elements, but the popover is not displayed around the message pressed. it shows a popover on top of the screen.



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source