How to get the cursor position of a TextInput relative to its parent or screen in React native

Question

Is there any way to get the Y position of the TextInput cursor in react native, if possible without any native (android/ios) hacks? I don't mean the start and end of the cursor selection state. What I am trying to achieve is, when the keyboard is open, I would like to display a modal based on the position of the cursor, just like mentioning in Facebook and Instagram. Or may be at which line the cursor is at? That way I may be able to calculate the position of the cursor.

Meaning, if the cursor is in the beginning of the TextInput (Top of the screen) I would like to display the modal below the cursor upto the keyboard. And if the cursor is in the middle or bottom of the TextInput (middle of the visible area between the Top of the screen and Keyboard), I would like to display the modal above the cursor.

Use case:

1. Here, the cursor is at the top of the screen.

And since, there is space between the cursor position and keyboard, I would like to display a modal in between the cursor and keyboard.

2. In this case, the cursor is in about middle, between the top of the screen and keyboard.

And since in this case, there is much space above the cursor to the top of the screen, I would like to display the modal above the cursor.

3. A user can also change the cursor position, and start typing from the new cursor position. Therefore, I cannot just measure the height of the TextInput and rely on the height of the TextInput, which is why I need to know where the cursor Y position is.

Answer 1

I was hoping to get the cursor's position with @JohnKrakov method, by implementing a dummy Text component inside a TextInput component. But this is not possible, by the nature of the Text component. I have managed to work it out in a react web app, but not with react native.

However, I found a medium post on how to extract a cursor’s position in react native. It is a very lengthy post, so I cannot answer the steps in this post, and instead ask you to go through his post and appreciate him for his work.

Update

There is a feature request to get the cursor position in react native. If you also need it, kindly vote the request in this link.